不在移动设备中显示图像但仍在加载图像？

Question

我正在和设计师一起设计电子邮件。我们想在这封电子邮件中使用 Gif 作为英雄图片。但在移动设备上，我想显示与桌面设备不同的 Gif。由于几乎所有移动客户端都支持 header 中的 css 我在代码中插入了桌面图像，然后将移动图像作为样式。这是我的代码： CSS:

<style>
  @media only screen and (max-device-width: 470px) {
    span[id=mobile] {
      display:block;
      background-image: url(mobile.gif) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 320px !important;
      height: 290px !important;
    }
    img[id=desktop] {display: none !important;}
  }
</style>

和我的 HTML:

<span id="mobile">
  <img id="desktop" src="desktop.gif" alt="">
</span>

一切正常，我唯一的问题是每个 Gif 的大小约为 220kb。如果只加载一个，我认为它适用于移动设备。我想现在，虽然我不显示桌面版本，但它仍然可以完全加载。是否有任何解决方法，只加载一次？

Answer 1

除了图像文件太大（220MB？-呃呃...）你应该反过来做，比如首先定义移动背景图像然后在媒体查询中 喜欢 min-device-width: 471px 桌面版。这样桌面图像就不会加载到移动设备上。

Answer 2

不同的电子邮件客户端处理方式不同，但您是否尝试过将图像隐藏在 HTML 正文中并在媒体查询中有选择地显示它？如果图像默认为 display:none; 编辑，读取 HTML 的电子邮件客户端可能不会立即下载它。

CSS

<style>
    @media only screen and (min-device-width: 470px) {
        img[id=desktop] {
            display: block !important;
        }
    }
</style>

<!--[if !mso]>
<style>
    @media only screen and (max-device-width: 470px) {
        span[id=mobile] {
            display:block;
            background-image: url(mobile.gif) !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            width: 320px !important;
            height: 290px !important;
        }
        img[id=desktop] {
            display: none !important;
        }
    }
</style>
<![endif]-->

HTML

<span id="mobile">
    <img id="desktop" src="desktop.gif" alt="" style="display: none;">
</span>

同样，不确定是否所有电子邮件客户端都这样做。

不确定您关注哪些客户，但另一个值得测试的选项是 srcset?

<img srcset="small.gif 1x, large.gif 2x" src="small.gif" alt="my gif" border="0">

它应该涵盖 iOS 邮件，但不确定是否涵盖其他内容。

不在移动设备中显示图像但仍在加载图像？

Not displaying a image in mobile but still loading it?

html

css

mobile

html-email