加载缓慢的电子邮件（Email）会让订阅者感到沮丧并损害参与度。大于 100KB 的电子邮件（Email）可能会被 Gmail 截断，从而隐藏您的行动号召或取消订阅链接。大型图片文件和未优化的 HTML 代码会减慢加载时间，尤其是在移动设备上。

本指南将向您展示如何通过优化图片、压缩 HTML 代码以及提高移动性能来减少电子邮件（Email）加载时间。

开始之前

要查看您的当前电子邮件（Email）大小：
在 Gmail 中向您自己发送测试电子邮件（Email）营销活动（Campaign）。打开电子邮件（Email） → 点击三点 (⋮) → 选择显示原文 → 点击下载原始文件以查看您的文件大小。

💡 小贴士： 保持您的总电子邮件（Email）大小低于 100KB，以避免 Gmail 截断。

为什么电子邮件（Email）加载时间很重要

电子邮件（Email）加载时间影响：

用户体验：加载缓慢的电子邮件（Email）会令订阅者感到沮丧，尤其是在移动设备上。
收件箱投放：大于 100KB 的电子邮件（Email）会被 Gmail 截断。如果您的退订链接被隐藏，收件人可能会将您的电子邮件（Email）标记为垃圾邮件。
互动：更快的电子邮件（Email）在订阅者失去兴趣之前完全加载。

增加电子邮件（Email）大小的关键因素：

高分辨率图片（高于 72 DPI）。
图片过多（每张图片 = 1 次服务器请求）。
未压缩的 HTML 和 CSS 代码
CSS animations 和复杂的 media queries

优化图片

限制图片数量

您的电子邮件（Email）中的每张图片都是一个单独的服务器请求。如果您加载20张小图片，就会产生20个请求，这会增加加载时间。

如何减少图片请求：

将多个小图片合并成一个大图片（使用图片精灵）。
将装饰性图片（项目符号、分隔线、图标）替换为样式文本或 CSS 形状。
使用 60:40 的文本与图片比例（60% 文本，40% 图片）。每张图片都应包含 2-4 句文本。

减少图片文件大小

请按照以下步骤操作，以在不损失质量的情况下压缩图片：

1. 保存图片用于网页

在您的图像编辑器中使用“Save for Web”功能，以在不降低质量的情况下减小文件大小。

2. 以 72 DPI 导出图片

查看图片的 DPI:

Windows：右键点击文件 → 选择属性 →详情。查看水平分辨率和垂直分辨率.
Mac：打开图片 → 选择工具 →调整大小在菜单栏中。

导出为 72 DPI 可保持图像清晰，同时减小文件大小。

3. 调整图库照片大小

如果您下载了图库照片，请在图片编辑器中打开它，并以所需的质量和尺寸重新保存。

4.保持图片一致

如果并排图像的高度和宽度不匹配，移动设备将不会自动调整其大小。保持图片统一可防止移动端堆叠问题。

5.选择合适的格式

JPG 用于照片
PNG-8 适用于简单图像（徽标、图标）
PNG-24 适用于包含摄影元素的图片

PNG 文件保持最高质量，但会增加电子邮件（Email）大小。尽可能使用 JPG。

6.使用图片优化工具

您可以使用第三方优化应用（例如 TinyPNG、ImageOptim 或 Squoosh）来处理您的图片，以在保持质量的同时进一步减小文件大小。

将长电子邮件（Email）分段

与其创建一封冗长的电子邮件（Email），不如将其分成几个部分，使用分隔符（Line or Space blocks）。

这有何帮助：分隔线将您的电子邮件（Email）分成更小的 HTML 部分，从而使电子邮件（Email）客户端能够从上到下逐步渲染内容。这使您的电子邮件（Email）看起来加载更快，即使总大小保持不变。

如何在 Omnisend 中添加分隔线：

在 Omnisend邮件构建器（Email Builder）中，拖动一个线条或间距区块到内容部分之间。
每隔 2–3 个内容块重复。

没有分隔符的电子邮件（Email）会作为一个大块加载，这会增加感知的加载时间。

精简 HTML 代码

如果您使用自定义 HTML 或 CSS，代码压缩会移除您的 HTML 和 CSS 代码中不必要的字符（如空格、注释、换行符），而不会改变其功能。这能将文件大小减少 20% 到 30%。

为什么要精简？

减少电子邮件（Email）大小（有助于避免 Gmail clipping）。
加快在电子邮件（Email）客户端中的渲染速度。
为订阅者节省移动数据。

如何 minify：

复制您的 HTML 代码。
使用像 HTMLMinifier 或 Email on Acid's HTML Compressor 这样的压缩工具。
粘贴精简代码到 Omnisend 的 HTML 内容块中。

💡 提示：使用 HTML 定位裁剪图片中不需要的空白区域，而不是在图片文件本身中添加空白区域。

优化移动设备

移动下载速度慢于桌面。如果您有大量的移动受众，针对移动设备进行优化至关重要。

移动优化技巧：

专门针对移动设备压缩图片 – 使用诸如 TinyPNG 或 Squoosh 等工具，为移动设备创建更小版本的图片。
使用可见性设置 – 在移动设备上隐藏非必要内容（大型图片、横幅），以减少加载时间。

如何在 Omnisend 中设置可见性：

点击您想要调整的内容块。
前往 Layout 选项卡。
滚动到 设备上的可见性 → 选择哪些设备应显示内容块：
- 所有设备。
- 仅限移动设备。
- 仅限桌面设备。

测试您的电子邮件（Email）加载速度

优化您的电子邮件（Email）后，请测试它以确认改进。

如何测试:

检查 Gmail 中的总电子邮件（Email）大小：
- 在 Gmail 中向您自己发送一个测试电子邮件（Email）营销活动（Campaign）。
- 打开电子邮件（Email） → 点击三点图标 (⋮) → 选择 Show original.
- 点击 "Download Original" 以查看您的文件大小。请保持在 100KB 以下。
使用电子邮件（Email）测试工具：
- Litmus 或Email on Acid 显示不同设备和电子邮件（Email）客户端的加载时间预览。
A/B测试（A/B Test）优化过的邮件与未优化过的邮件对比：
- 创建两个版本的您的电子邮件（Email）营销活动（Campaign）：一个包含优化图片，一个不包含。
- 使用 Omnisend 的 A/B Content Test 来比较互动指标。