电子邮件中的动画 PNG：GIF 的替代品？

动画图像是2019 年最热门的电子邮件设计趋势之一。 各地的电子邮件营销人员都希望为他们的活动增添动感——而最流行的做法是利用动画 GIF 的力量。

但动画 GIF 并不是唯一允许您为图像添加运动的文件类型。 动画便携式网络图形（或 APNG）也是您可能想要探索的一个选项。

在电子邮件中使用 APNG 的原因

动画 PNG 正是顾名思义：组合起来引入运动的 PNG 集合。 因此，要了解 APNG 的特殊之处，关键是要了解简单 PNG 的特征。

PNG 格式有两种类型：PNG-8 和 PNG-24。 PNG-8 格式与 GIF 类似，因为它们最多以 256 色保存。 PNG-24 格式能够显示数百万种颜色。 因此，与 GIF 的有限颜色通常会给动画带来低质量的外观相比，APNG 可让您使用全方位的颜色深度。 这使您的图像看起来更清晰——尤其是当您使用色彩广泛的摄影时——但更高的质量总是需要付出代价的。 如果您不仔细观察文件大小，PNG 可能会变得非常大。 如果您使用它们中的许多来创建 APNG，则大文件大小会对您的电子邮件加载时间产生负面影响。

另外，与 GIF 相比，APNG 允许您使用透明度。 GIF 处理透明性很差，当设置在透明背景上时，会在元素周围应用粗糙的白色边缘：

你问为什么要在透明背景上使用动画？

电子邮件中的透明度和动画：Litmus 十月时事通讯中的 APNG

对于今年以万圣节为主题的 10 月时事通讯，我们希望让我们的读者有机会“关灯”，将电子邮件从明亮的设计更改为阴暗诡异的设计。 另外，为了增加诡异感，我们决定加入一些动画，让可怕的眼睛在黑暗中眨眼、鬼魂盘旋和黏糊糊的东西——但仅限于关灯时。

为了在电子邮件的明亮版本中隐藏动画，我们将它们设计为与它们在明亮版本中放置的背景完全相同的颜色。 当订阅者“关掉灯”时，这些背景颜色发生了变化，并且——令人惊讶的是——让我们的怪异动画可见！

为了让这个技巧起作用，动画必须在透明的背景下运行——这正是我们不可以选择使用 GIF 的原因。 如果我们使用 GIF，您会在我们的插图周围看到那些白色边缘，当灯光打开时，这些白色边缘看起来会很凌乱并暴露我们隐藏的图形。 另一方面，动画 PNG 完美地应对了透明度的挑战。

我们考虑了通过使用CSS 动画关键帧为 PNG 精灵表设置动画来解决此问题的替代策略。 但是在这个项目的上下文中，每个图形所涉及的 CSS 数量会导致电子邮件代码过多。 更重要的是，近年来，电子邮件客户端对动画 PNG 的支持实际上已经超过了对 CSS 动画的支持。

APNG 的电子邮件客户端支持

许多流行的电子邮件客户端都提供对 APNG 的全面支持。 最麻烦的例外是 Gmail（网络邮件客户端和移动应用程序）、Outlook.com 和 Windows 上的 Outlook。 这些电子邮件客户端仅显示动画的第一帧。

动画 PNG 完全支持：

• 苹果邮箱
• IOS
• 三星邮箱
• 展望 (MacOS)
• 展望网
• Outlook.com 应用
• 美国在线
• 美国在线应用程序
• 雅虎
• 雅虎应用

只有第一帧显示在：

• Gmail
• Gmail 应用
• 展望 (Windows)

如何为您的电子邮件活动创建动画 PNG

目前无法从 Adob​​e Photoshop 或 Adob​​e Animate 等软件中将动画保存为 APNG，因此您需要其他工具来创建动画。 以下是我们为时事通讯创建动画 PNG 的方法：

1. 在 Adob​​e CC 中创建动画并将每一帧保存为 PNG

我们使用 Adob​​e Animate 创建我们的动画——无论是 GIF 还是 APNG。 不过，不同之处在于 Adob​​e Animate 不提供导出 APNG 文件的本机选项。 相反，您必须将每个帧导出为单个 PNG。 创建动画后，转到“导出”>“导出电影”，然后从下拉菜单中选择“PNG 序列” 。

Photoshop 中的过程非常相似。 转到文件 > 导出 > 渲染视频。 在“渲染视频”窗格中，从下拉列表中选择“Photoshop 图像序列”并选择PNG作为格式。 您需要再进一步确保您的 png 是透明的：在“渲染选项”框中，从“Alpha 通道”下拉列表中选择“Straight – Unmatted” 。 选择要保存图像的位置后，点击渲染按钮。

2. 将您的个人 PNG 组合成一个 APNG

现在是时候将您的个人图像文件组合成 APNG！

PNG animator是一款很棒的软件，如果您是操作系统用户，则可以从 Apple App Store 以较低的价格购买。 一个免费的替代方案是ezgif.com的Animated PNG maker，它提供了类似的功能。

我们选择使用在线工具来完成我们的文件。 在这里，我们能够排除最终文件中不需要的任何帧，并设置每个帧所需的时间。

3. 优化 APNG 文件大小以用于电子邮件

与 GIF 一样，APNG 很快就会变得非常重要。 减少颜色和使用的帧数将有助于保持较小的文件大小。 标准的 zlib 压缩似乎是对我们的文件有效的唯一选项，一旦我们点击Make APNG！ 按钮，我们可以在下载之前看到我们的动画示例及其文件大小。 这是在下载之前进行进一步更改（例如更改速度或删除更多帧）的绝佳机会。

在上传我们的图像文件以在我们的电子邮件中使用之前，我们能够对它们进行更多压缩。 我们只是通过TinyPNG运行我们的 APNG ，它通过剥离元数据和减少颜色来减小文件大小，同时保留透明度和动画。 它产生了巨大的变化，将我们的总图像文件大小从 943kb 减少到 243kb，文件大小节省了 74% 以上！ 但是，并非每个 PNG 压缩工具都会保留动画，因此请确保在处理图像后仔细检查您的工作。

就是这样！ 现在您已准备好将 APNG 添加到您的电子邮件中，就像您处理任何其他图像类型一样。 如果您想查看我们的完整时事通讯，可以在此处查看或查看Litmus Builder 中的代码。

您对在电子邮件中使用 APNG 有什么看法？

您是否曾在电子邮件活动中使用过动画 PNG？ 您依赖哪些工具来创建它们并保持较小的文件大小？ 我们很想听听您的经历。 在下面的评论中分享您的学习。