如何为不受支持的客户端将 HTML 电子邮件中的 GIF 替换为不同的图像

Posted 2023-03-05

【中文标题】如何为不受支持的客户端将 HTML 电子邮件中的 GIF 替换为不同的图像

【英文标题】：How to swap a GIF in an HTML email with a different image for unsupported clients

【发布时间】：2016-12-26 22:11:57

【问题描述】：

我有一个客户希望我为他们创建一个 html 电子邮件模板。他们希望包含动画 GIF 的横幅图像，但并非所有电子邮件客户端都支持。他们想要的动画没有可读的第一帧，根据我的研究，不呈现 GIF 格式的电子邮件客户端只会显示 GIF 的第一帧。我想知道是否有办法为不支持 GIF 格式的电子邮件客户端更换使用的图像并提供不同的图像而不是 GIF。感谢您的帮助！

【参考方案1】：

大多数电子邮件客户端不支持脚本，所以这很难。但是你总是可以使用第二个 gif，它有一个可见的第一帧，它是你想要的任何图片，然后让 gif 的其余部分是透明的。一旦你有了这个，你可以将两个 gif 叠加在一起。这样，如果客户端支持动画 gif，则顶部的 gif 将变为透明，如果不支持，您将看到第一帧是什么。

【讨论】：

在电子邮件中叠加图像很棘手，因为不支持 margin 和 position 等属性。不过，有趣的概念。如果您将 GIF 设为前景图像（第一帧透明）并将后备图像设为背景，如果序列经过精心设计，这可能工作。

【参考方案2】：

最简单的方法是设计一个第一帧可读的 GIF，但由于这不是一个选项，您可以破解不支持 GIF 的客户端。

幸运的是 GIF 支持还不错，basically Windows Outlook 2007/2010/2013/2016 不支持 GIF。所以我们使用 Outlook Conditional CSS 定位这个范围。 Outlook 2007 - Version 12，所以这样的东西应该显示我们想要的。 （可能需要弄清楚到底嵌套了哪些标签）

<!--[if gte mso 12]>
<td>
    <img src="fallback.jpg">
</td>
<![endif]-->

<!--[if !gte mso 12]><!-- -->
<td>
    <img src="animated.gif">
</td>
<!--<![endif]-->

这里是good thread on Stack Overflow，讨论了针对特定桌面 Outlook 版本的各种方法。

【参考方案3】：

另一个应该可行的有趣方法是将要作为海报帧出现的任何帧定位到动画 GIF 的时间线中的第 1 帧，并将延迟设置为 0。不支持动画 GIF 的人将看到第一帧。那些支持动画 GIF 的将通过第一帧，因为没有延迟（它已设置为 0）。

不幸的是，有时第一帧会闪烁，从而导致此方法效果不佳。

似乎电子邮件开发的大多数问题都需要被扼杀在萌芽状态（在设计阶段）。