电子邮件文件大小的重要性

谈到电子邮件中的文件大小时,我们实际上讨论的是三个主题:发送的 HTML 文件大小、外部资产的大小和完全加载的大小。我们希望将所有这些文件大小保持尽可能小,但最大尺寸是多少,我们应该瞄准什么?

作者

类别

电子邮件

电子邮件文件大小的重要性

谈到电子邮件中的文件大小时,我们实际上讨论的是三个主题:发送的 HTML 文件大小、外部资产的大小和完全加载的大小。我们希望将所有这些文件大小保持尽可能小,但最大尺寸是多少,我们应该瞄准什么?

作者

类别

电子邮件

电子邮件文件大小的重要性

谈到电子邮件中的文件大小时,我们实际上讨论的是三个主题:发送的 HTML 文件大小、外部资产的大小和完全加载的大小。我们希望将所有这些文件大小保持尽可能小,但最大尺寸是多少,我们应该瞄准什么?

作者

类别

电子邮件

HTML 文件大小

HTML 文件大小是实际发送的 .html 文件的大小。此文件大小不包括所包含图像的大小,因为这些图像将从此 HTML 文件链接并在打开时下载。

我们建议的最大大小是 100KB,因为超过此大小可能会导致可传递性和显示问题。例如,Gmail 会在 102KB 处剪切您的 HTML。剪切将隐藏您的电子邮件结尾,可能会破坏您的布局。

大多数电子邮件应该轻松地控制在 50KB 以内。然而,有时复杂的逐步增强或大量的活动内容会导致更大的文件大小。如果发生这种情况,有多种方法可以帮助减少 HTML 文件的大小。


  • 清理您的代码。 电子邮件正在不断变化,我们看到许多模板中包含过时的代码。快速清理可以节省几 KB。

  • 不要过度编码。 我们看到的一些模板有额外的代码,根本不需要。最糟糕的情况是添加额外的表元素。大多数布局可以用 5-10 个表格来实现,但我们经常看到带有 30-40 个表格的代码。更少的表格也具有使代码更易于阅读的额外好处。

  • 将一些代码从 HTML 移动到 CSS。 目前还不安全将所有样式移动到 CSS,但如果做得正确,将一些内联样式转移到嵌入式样式可以帮助减少代码。

  • 简化您的设计。 另一个选择是回到设计阶段。单列电子邮件使用的代码要少得多。

  • 压缩您的代码。 压缩代码将删除不必要的空格和注释。这可能会产生巨大影响,但要小心,因为许多 ESP 强制要求最大行长度,这可能导致换行并破坏代码。


外部资产大小

外部资产大小是您所有图像和外部样式表的大小。由于外部大小较少,我们目前将更多关注图像。

如果您使用背景图像和媒体查询,那么在某些环境中,可能并非所有内容都将为每个用户下载。但是,记住,即使您在 <img> 元素上定义了 display:none; ,它仍然会下载。目前没有办法阻止这一点。

大多数图像的最大大小是 100KB,但如果您有一个大尺寸高清图像或一个动画 GIF,则可能会达到 500KB。尽管如此,更重要的是总大小,我们将在完全加载的电子邮件大小部分进行讨论。

有许多资源可以帮助压缩图像大小:

  • ImageOptim – 在 Mac 上,或作为网络服务

  • Caesium – 在 Windows 上

  • CDN – 许多 CDN 都具有内置的图像优化功能。一些甚至会根据可用带宽调整压缩。

这是一些我们推荐的其他提示:

  • 确保您使用最合适的格式,照片使用 .jpg,图形使用 .gif,当您需要 alpha 通道时使用 .png

  • 简化您的设计。再次回到设计阶段,使用更少的图像、更小的图像或可以压缩为更小尺寸的简单图像。


完全加载的电子邮件大小

这是打开电子邮件时所有内容的总大小,并且一切都被下载。根据打开电子邮件的环境不同,这可能会有所不同。

这里的主要问题是电子邮件加载所需的时间。您可能会在具有非常快速连接的办公室测试您的电子邮件,但您的许多收件人可能在具有缓慢 3G 连接的移动设备上。

在良好的连接下,总电子邮件大小为 1MB 将在瞬间加载,对用户似乎是即时的。然而,在 3G 连接上,加载整个电子邮件可能需要 2 到 14 秒。如果您的目标受众可能使用 2G 连接,则下载可能需要几分钟。

这对于使用限制数据计划的用户也是一个潜在问题,他们必须考虑下载的每个 MB。这在发展中国家尤为重要。

您可以做几件事情来帮助:

首先,查看我们提到的所有有关 HTML 和图像大小优化的建议
如果您有时间,尝试实验代码并测试真正需要什么以及可以省略什么。尝试使用图像,尝试不同的方法来压缩它们。确保您的电子邮件看起来不错且没有图像时也能讲得通,这样用户可以在等待图像加载时开始查看您的电子邮件。


将一切结合在一起

在文件大小方面,与许多事情一样,归根结底都归结为妥协。您可能会进行一些 A/B 测试,发现大型高清图像表现良好。您可能会发现许多详细内容的表现良好。您可能会发现复杂的互动表现良好。然而,当您将三者混合到一个单一的活动中时,您可能会发现效果开始变差。

Sign up

为营销、支持和财务提供的人工智能驱动平台

点击 "获取演示" 即表示您同意 Bird's

Sign up

为营销、支持和财务提供的人工智能驱动平台

点击 "获取演示" 即表示您同意 Bird's

Sign up

为营销、支持和财务提供的人工智能驱动平台

点击 "获取演示" 即表示您同意 Bird's

Channels

Grow

Engage

Automate

APIs

Resources

Company

Socials

生长

管理

自动化

生长

管理

自动化