如何将 HTML 电子邮件中的 GIF 换成不支持的客户端的不同图片

How to swap a GIF in an HTML email with a different image for unsupported clients

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

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

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

幸运的是 GIF 支持很好,它是 basically Windows Outlook 2007/2010/2013/2016 that don't support GIFs. So we target this range using 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 的各种方法。

另一个应该有效的有趣方法是将您想要作为海报帧出现的任何帧定位到动画 GIF 时间线中的第 1 帧并将延迟设置为 0。那些不支持动画 GIF 的人将看到第一个框架。那些支持动画 GIF 的将通过第一帧,因为没有延迟(已设置为 0)。

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

似乎电子邮件开发的大多数问题都需要防患于未然(在设计阶段)。