Question

我正在和设计师一起设计电子邮件。我们希望在此电子邮件中将Gif实现为Hero Image。但是在Mobile上我希望显示与桌面不同的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，但不确定覆盖范围之外。

Answer 2

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

不在手机中显示图像但仍在加载图像？

2 个答案: