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 可能会就我们的产品和服务与您联系。

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

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

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

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

Newsletter

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

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

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

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

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

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

R

Reach

G

Grow

M

Manage

A

Automate

Newsletter

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

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

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