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

【问题标题】：Not displaying a image in mobile but still loading it?不在移动设备中显示图像但仍在加载它？
【发布时间】：2016-12-12 15:15:52
【问题描述】：

我正在与设计师一起设计电子邮件。我们想在这封电子邮件中将 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。如果只加载一个，我认为它适合移动。我现在想，虽然我没有显示桌面版本，但它仍然可以完全加载。是否有任何解决方法，所以只加载一个？

【问题讨论】：

220mb 的 gif 文件不适合移动设备。这么大的图像比我手机上的大多数应用程序都要大得多，而且我的网速最高为 12mbps，我可以保证我会阅读您电子邮件中的所有内容并在您的 gif 下载一半之前将其删除。
我的意思是 220 kb，抱歉！
值得注意的是，最新的 Gmail 应用程序不支持选择器 (span[id=mobile]) - 该应用程序并没有完全去除样式。将其更改为 span#mobile，让您想出的任何东西都可以在 Android Gmail 中使用。

标签： html css mobile html-email

【解决方案1】：

不同的电子邮件客户端处理此问题的方式不同，但您是否尝试过将图像隐藏在 HTML 正文中并有选择地在媒体查询中显示它？如果图像默认为display:none;-ed，则读取 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 邮件，但我不确定是否会超出此范围。

【讨论】：

我可以通过试金石、关于酸的电子邮件和现场测试验证该解决方案适用于绝大多数电子邮件客户端。我真正发现的唯一例外是一些 Android 本地客户端（不到 1% 的市场）和一些版本的 Android Gmail 应用程序 - 尚未收到样式表更新（非常小的利润）。我还将在移动图像版本周围添加 !mso 条件，以确保两者都不会出现在 Outlook 的回复和转发中。 srcset 虽然没有被广泛接受。
@Gortonington 关于<!--[if !mso]> 的绝妙想法，我已经更新了我的答案！
感谢 Gortonington 的出色回答和测试！我将实现它并对其进行测试。你知道是否有一个工具可以测量不同客户端的电子邮件文件大小吗？

【解决方案2】：

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

【讨论】：

我这样做是因为例如 Outlook 不会使用头部的样式。大多数移动客户端都这样做。另外我的意思是 220kb，抱歉错误。