Reach

Grow

Manage

Automate

Reach

Grow

Manage

Automate

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

2018年8月27日

电子邮件

1 min read

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

2018年8月27日

电子邮件

1 min read

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

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

HTML 文件大小

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

我们建议的最大大小是100KB,因为超过这个大小可能导致交付和显示问题。例如,Gmail会在102KB处截断您的html。截断将隐藏电子邮件的结尾并可能破坏布局。Gmail对邮件的处理还有其他考虑,例如图像预取对电子邮件跟踪的影响

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

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

  • 不要过度编码。我们看到的一些模板中有不必要的额外代码。有关创建高效模板的指导,请参阅我们的高级电子邮件模板指南。最糟糕的罪魁祸首是添加额外的表格元素。大多数布局可以用5-10个表格实现,但我们经常看到包含30-40个表格的代码。较少的表格还有一个额外的好处,即使您的代码更易于阅读。

  • 将部分代码从HTML移动到CSS。 目前尚不安全将所有样式移至CSS,但如果方法正确,将部分内联样式移至嵌入样式可以帮助减少代码。

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

  • 压缩代码。 压缩代码将删除不必要的空格和注释。这可以产生巨大影响,但要谨慎,因为许多ESPS施加最大行长度限制,这可能会强制新行并破坏代码。

外部资产 Size

外部资产大小是指您所有图像和外部样式表的大小。由于外部大小较为罕见,我们暂时将重点放在图像上。

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

大多数图像的最大大小是 100KB,但如果您有一张大型高分辨率图像或一个动画 gif,这可能会达到 500KB。理解电子邮件性能问题通常需要阅读电子邮件头部以进行故障排除。然而,更重要的是总大小,我们将在完整加载的电子邮件大小部分讨论这一点。

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

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

  • Caesium – 在 Windows 上

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

这里是我们推荐的一些其他技巧:

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

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

外部资产大小是指您所有图像和外部样式表的大小。由于外部大小较为罕见,我们暂时将重点放在图像上。

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

大多数图像的最大大小是 100KB,但如果您有一张大型高分辨率图像或一个动画 gif,这可能会达到 500KB。理解电子邮件性能问题通常需要阅读电子邮件头部以进行故障排除。然而,更重要的是总大小,我们将在完整加载的电子邮件大小部分讨论这一点。

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

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

  • Caesium – 在 Windows 上

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

这里是我们推荐的一些其他技巧:

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

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

外部资产大小是指您所有图像和外部样式表的大小。由于外部大小较为罕见,我们暂时将重点放在图像上。

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

大多数图像的最大大小是 100KB,但如果您有一张大型高分辨率图像或一个动画 gif,这可能会达到 500KB。理解电子邮件性能问题通常需要阅读电子邮件头部以进行故障排除。然而,更重要的是总大小,我们将在完整加载的电子邮件大小部分讨论这一点。

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

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

  • Caesium – 在 Windows 上

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

这里是我们推荐的一些其他技巧:

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

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

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 的最新动态。