Reach

Grow

Manage

Automate

Reach

Grow

Manage

Automate

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

电子邮件

1 min read

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

电子邮件

1 min read

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

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

HTML 文件大小

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

我们建议的最大大小是 100KB,因为超过这个大小可能会导致传递性和显示问题。例如,Gmail 会在 102KB 时截断您的 html。截断会隐藏您电子邮件的结尾,并可能破坏您的布局。

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

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

  • 不要过度编码。我们注意到一些模板有很多不必要的额外代码。最糟糕的是添加多余的表格元素。大多数布局可以用 5-10 个表格实现,但我们经常看到有 30-40 个表格的代码。更少的表格也有助于让您的代码更易于阅读。

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

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

  • 简化代码。简化代码将删除不必要的空格和注释。这可以产生巨大的效果,但要小心,因为许多 ESP 会强制实行最大行长度,可能会导致新行并破坏代码。

外部资产 Size

外部资产大小是指所有图像和外部样式表的大小。由于外部大小比较罕见,我们现在会更多地关注图像。

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

大多数图像的最大尺寸是100KB,但如果您有一张大的高分辨率图像或一个动画GIF,它可能会达到500KB。然而,更重要的是总大小,我们会在“完全加载的电子邮件大小”部分中讨论。

这里有很多资源可以帮助压缩图像大小:

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

  • Caesium — 在 Windows 上

  • CDN —— 许多 CDN 内置了图像优化功能。有些甚至会根据可用带宽调整压缩率。

以下是我们推荐的一些其他技巧:

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

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

外部资产大小是指所有图像和外部样式表的大小。由于外部大小比较罕见,我们现在会更多地关注图像。

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

大多数图像的最大尺寸是100KB,但如果您有一张大的高分辨率图像或一个动画GIF,它可能会达到500KB。然而,更重要的是总大小,我们会在“完全加载的电子邮件大小”部分中讨论。

这里有很多资源可以帮助压缩图像大小:

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

  • Caesium — 在 Windows 上

  • CDN —— 许多 CDN 内置了图像优化功能。有些甚至会根据可用带宽调整压缩率。

以下是我们推荐的一些其他技巧:

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

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

外部资产大小是指所有图像和外部样式表的大小。由于外部大小比较罕见,我们现在会更多地关注图像。

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

大多数图像的最大尺寸是100KB,但如果您有一张大的高分辨率图像或一个动画GIF,它可能会达到500KB。然而,更重要的是总大小,我们会在“完全加载的电子邮件大小”部分中讨论。

这里有很多资源可以帮助压缩图像大小:

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

  • Caesium — 在 Windows 上

  • CDN —— 许多 CDN 内置了图像优化功能。有些甚至会根据可用带宽调整压缩率。

以下是我们推荐的一些其他技巧:

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

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

Fully Loaded Email Size

这是电子邮件打开且所有内容下载后的合并大小。这可能会因打开电子邮件的环境而有所不同。

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

在良好的连接上,总邮件大小为1mb的电子邮件可以在瞬间加载,用户会感觉其即时显示。然而,在3G连接上加载完整的电子邮件可能需要2到14秒的时间。而且,如果您的目标受众可能在2G连接上,这样的下载可能需要几分钟。

这对于那些有数据限制计划的用户来说也是一个潜在问题,他们需要考虑每个下载的MB。这在发展中国家特别值得注意。

您可以做的一些事情:

首先,查看我们提到的关于html和图像大小优化的所有建议
如果您有时间,尝试与代码进行实验并测试什么是真正需要的,哪些可以省略。尝试与图像进行实验,并尝试不同的方法来压缩它们。确保您的电子邮件在没有图像的情况下看起来不错并且有意义,这样用户可以在等待图像时开始查看您的电子邮件。

综合一切

关于文件大小,与许多事情一样,最终归结为妥协。您可能会进行一些 A/B 测试,发现大的高分辨率图像表现良好。您可能会发现很多详细内容表现良好。您可能会发现复杂的互动性表现良好。然而,当您将这三者整合到单个活动中时,您可能会发现事情开始表现不佳。

让我们为您联系Bird专家。
在30分钟内见证Bird的全部威力。

通过提交,您同意 Bird 可能会就我们的产品和服务与您联系。

您可以随时取消订阅。查看Bird的隐私声明以获取有关数据处理的详细信息。

Newsletter

通过每周更新到您的收件箱,随时了解 Bird 的最新动态。

让我们为您联系Bird专家。
在30分钟内见证Bird的全部威力。

通过提交,您同意 Bird 可能会就我们的产品和服务与您联系。

您可以随时取消订阅。查看Bird的隐私声明以获取有关数据处理的详细信息。

Newsletter

通过每周更新到您的收件箱,随时了解 Bird 的最新动态。

让我们为您联系Bird专家。
在30分钟内见证Bird的全部威力。

通过提交,您同意 Bird 可能会就我们的产品和服务与您联系。

您可以随时取消订阅。查看Bird的隐私声明以获取有关数据处理的详细信息。

R

Reach

G

Grow

M

Manage

A

Automate

Newsletter

通过每周更新到您的收件箱,随时了解 Bird 的最新动态。