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

Question

我想我已经尝试了所有可能的现有解决方案，所以我在这里询问是否有人知道显示 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"标签总是下载图像，即使它没有显示（显示：none）。

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

上运行

有人能帮忙吗？

JSFiddle

谢谢

Answer 1

无法为桌面和移动设备提供不同的图像，也无法同时下载它们用于电子邮件。解决这个问题需要 Javascript，任何主要的电子邮件客户端都不支持它。

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

Answer 2

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

首先，一个警告：Google应用程序网络邮件 + 移动 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 webmail，它将显示为与 Gmail App 相同。

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

Answer 3

正如其他人所说，隐藏图像永远不会稳定。我的解决方案是创建一个小的 server-side 脚本，它将为不同的设备提供不同的图像。我认为这是 most 稳定和强大的解决方案。

您可以从请求的 header 中识别 os、设备和屏幕宽度，尽管任何 browser/email 客户端都可以发送虚假信息。

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

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

Answer 4

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

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

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

HTML Email - different images for desktop and mobile

html

css

email

html-email