HTML 电子邮件 - 用于桌面和移动设备的不同图像答案

【问题标题】：HTML Email - different images for desktop and mobileHTML 电子邮件 - 用于桌面和移动设备的不同图像
【发布时间】：2016-10-13 17:24:24
【问题描述】：

我想我已经尝试了所有可能的现有解决方案，所以我在这里询问是否有人知道显示 a 的最佳方式是什么：

简单（可点击或不可点击）图片
为桌面设备和移动设备使用不同的图片
与最流行的电子邮件客户端兼容

此处发布的解决方案：A Slick, New Image Swapping Technique for Responsive Emails 似乎是迄今为止最好的，但它有一个小问题，无论您是在移动设备上还是桌面上，这 2 个图像总是被下载（我不是说显示）。

<a href="http://www.emailonacid.com">
  <span id="switcher">
    <img id="houdini" src="http://www.sample.com/desktop.jpg" alt="">
  </span>
</a>

 <style>
  @media only screen and (max-device-width: 489px) {
    span[id=switcher] {
      display:block;
      background-image: url(http://www.sample.com/mobile.jpg) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 300px !important;
      height: 250px !important;
    }
    img[id=houdini] {display: none !important;}1
  }
</style>

“img”标签总是下载图片，即使它没有显示（display:none）。

我尝试了许多其他方法，在表格上使用背景图像，但这似乎需要 Microsoft 的 VML 代码，而且解决方案看起来非常混乱，有时甚至无法在 android 上运行。

有人可以帮忙吗？

JSFiddle

谢谢

【问题讨论】：

您是否尝试过使用媒体查询来更改跨度的 bg 图像 - 并将标记放在一起？ - 那么，实际上是一个带有 bg 图像的 css 规则，然后是一个媒体查询覆盖该 bg 图像以用于移动设备？
并非所有电子邮件客户端都支持媒体查询，因此如果图像仅显示媒体查询代码，则不会出现在所有电子邮件客户端上
另外，@asimovwasright，并非所有客户端都支持背景图像（尤其是 Windows 上的 Microsoft Outlook 等旧客户端），因此这是不可能的
无论如何你可以控制正在分发图像的服务器，然后你可以使用http嗅探来基于UA提供图像。（虽然我自己从未尝试过，但我很确定这是可能的。）:-)
@asimovwasright 同样在这里，以前从未测试过，但可能是一个解决方案，正如 gyula 建议的那样:-) ..值得一试。

标签： html css email html-email

【解决方案1】：

没有办法为台式机和移动设备提供不同的图像，而不是将它们都下载到电子邮件中。解决这个问题需要 Javascript，任何主要的电子邮件客户端都不支持。

我还想指出，无论您使用哪种方法，一些主要的邮件应用程序（尤其是 Gmail）都不支持图像交换。从设计的角度来看，最佳做法是在桌面设备和移动设备上使用相同的图片。

【讨论】：

我不是 100% 确定没有办法做到这一点......让我们看看是否有人有解决方案 :-) 但无论如何感谢您的回答。（是的，我知道兼容性问题，这绝对是要记住的事情）
不幸的是，这是正确的答案。电子邮件可以做很多很酷的事情，但它通常伴随着大量的胶带和口香糖，并且需要许多级别的优雅降级以确保在所有电子邮件客户端上显示吸引人的显示。图像交换就是其中之一。

【解决方案2】：

这在某种程度上是可能的，但实现起来有点棘手。 Gmail 可能是自 it strips out the <style> tag 以来最大的障碍，因此不支持媒体查询。

首先，请注意：Google Apps 网络邮件 + 移动版 Gmail 将呈现相同的效果，但我们可以让常规 Gmail 网络邮件有所不同。

Gmail 会从所有元素中去除 class 和 id 属性，但保留一些其他属性不变：style、title、lang、width、height、alt、href。 所以我们可以使用 [lang~="x-houdini"] {display: none !important;} 之类的方式定位常规 Gmail 网络邮件。

因此，使用移动 Gmail 作为您要显示的内容的基础，然后您可以覆盖常规 Gmail 网络邮件，将其定位为隐藏移动 Gmail 图像并显示常规 Gmail 网络邮件图像。

同样，这不适用于 Google Apps 网络邮件，它的显示方式与 Gmail 应用程序相同。

This article on Fresh Inbox 解释了如何定位特定版本的 Gmail。如果您走这条路并有疑问，值得一读！

【讨论】：

感谢您的回答。我对 Gmail 没有任何问题，因为网络邮件和应用程序都没有使用媒体查询，因此它们只会显示桌面图像。有趣的 Gmail 目标，从来不知道。然而，不幸的是，这对我的问题没有帮助......

【解决方案3】：

正如其他人所说，隐藏图像永远不会稳定。我的解决方案是创建一个小型服务器端脚本，该脚本将为不同的设备提供不同的图像。我认为这是最稳定和最强大的解决方案。

您可以从请求的标头中识别操作系统、设备和屏幕宽度，尽管任何浏览器/电子邮件客户端都可能发送虚假信息。

我们使用这个包来解析用户代理信息：https://www.npmjs.com/package/ua-parser 我们可以用它来获取这些信息： https://github.com/EDMdesigner/supertracker/blob/master/models/session.js

根据设备字段，可以提供不同的图片。

【讨论】：

感谢您的回答。这很有趣，我从来没有考虑过，这绝对是应该考虑的一种可能的解决方案。我会等着看是否有其他解决方案，否则我会选择你的作为最佳解决方案。

【解决方案4】：

让图像宽度为 100% 怎么样？我试过了，它似乎适用于不同的宽度。我什至尝试过使用 chrome 的响应模式，即使图像质量不那么清晰，它似乎也适用于 iphone 大小的设备。

<html>
<head>
    <title>ResponsiveImage</title>
</head>
<body>
    <img src="Tulips.jpg" width="100%">
</body>
</html>

【讨论】：

感谢您的回答。只有一张宽度为 100% 的图像与我尝试做的不同：为桌面版和移动版电子邮件设置 2 张不同的图像。
根据其他人的回答，我的理解是，您必须采取一种方法，使样式和内容保持固定，但图像大小会发生变化（例如使图像中心对齐）。这样，当移动或桌面浏览器请求图像时，您可以确定用户代理，然后从服务器返回相关图像。因此，所有内容都必须是响应式的，并且必须为每个元素指定样式。
好的，我知道您打算将其用于 gyula.nemeth 解决方案