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

Question

我正在与设计师一起设计电子邮件。我们想在这封电子邮件中使用 Gif 作为英雄图片。但在移动设备上，我想显示与桌面设备不同的 Gif。由于几乎所有移动客户端都支持标题中的 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

不同的电子邮件客户端处理方式不同，但您是否尝试过将图像隐藏在 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 Mail，但我不确定是否涵盖其他内容。