HTML 电子邮件中图像的终极指南
Posted: Sun Mar 02, 2025 5:11 am
图片之于描述，就如同香料之于菜肴。随着时间的推移，交流在很大程度上是视觉化的。早期人类曾经在洞穴中作画，而古代的统治者和君主则发现自己在几幅画作中永垂不朽，这些画作既错综复杂又令人着迷。电视是在第一个商业广播出现后的 20 年内发明的，Twitter 和其他社交媒体平台现在支持在帖子中添加图片（和视频）。
HTML 电子邮件也是如此——它是最常用的沟通渠道之一（包括营销）。90 年代初，当专门的电子邮件开发人员采用编码原则创建 HTML 电子邮件模板时，他们通过背景颜色、图像、超链接等开辟了更好的可能性。以 HTML 电子邮件格式进行编码是创建 HTML 电子邮件的分步过程。
如今，82% 的营销人员认为视觉元素可以让他们的内容更具吸引力，洪都拉斯 手机号码列表 更容易被大众接受。虽然对于最终用户来说，它只是 HTML 电子邮件图像，但对于电子邮件营销人员来说，电子邮件中的图像有充足的策略、理由和测试作为后盾。所以今天我们来探讨一下在电子邮件中嵌入图像时会出现哪些细节。
电子邮件 HTML 中支持不同类型的图像
根据国际标准，图形和图像有几十种文件格式，例如 JPEG、GIF、RAW、PNG、TIFF 等。虽然大多数格式用于特定目的和应用程序，但电子邮件中图像主要使用的 3 种常见格式是 JPEG、GIF 和 PNG。
响应式 HTML 电子邮件开发人员
在 HTML 电子邮件图像中使用 JPEG
JPEG 和 JPG 图像格式是联合图像专家组的缩写，用于照片和插图，因为细节和复杂形状非常重要。JPEG 格式的核心优势在于，视觉数据被压缩，但质量却没有受到太大影响。这在电子邮件中包含 Retina 图像时尤其有用（稍后解释）。
JPEG 有助于以极小的文件大小呈现图像，从而降低下载到电子邮件中查看时的总数据成本。然而，JPEG 图像不适合照片编辑，因为电子邮件图像在保存时会被进一步压缩，从而破坏更多的视觉数据。
让我们以使用 JPEG 的该示例电子邮件为例。
HTML 电子邮件中的示例 jpg
再次，这是压缩了 30% 的同一张图像。虽然您可能没有注意到很大的差异，但原始图像的清晰度已经受到影响，并且您可以看到由于压缩，图像中的毛发变得模糊。
HTML 电子邮件中的 JPEG 示例 (10%)
即使最终用户可能无法分辨出差异，最好也不要为了几 KB 的文件大小而牺牲质量。JPEG 是静态图像（与 GIF 不同）并且不存储任何透明度数据（与 GIF 和 PNG 不同）。
在电子邮件中使用动画 GIF
GIF 是“图形交换格式”的缩写，其概念是通过引入透明度来创建比 JPEG 更小的文件大小的图像。通过使不需要的部分透明，该部分的视觉数据将被丢弃，从而使图像变得更亮。并且通过在预设的持续时间内使不同的图层透明，您还可以在每个图层中容纳帧以对其进行动画处理。
GIF是带有图像的电子邮件中最流行的交互样式之一。
图片来源
您可能想知道，既然 GIF 可以进一步减小文件大小，为什么还要使用 JPEG 图像来发送电子邮件？虽然可以将图像中不需要的部分设为透明以减小图像大小，但它会在引入透明度的部分上引入锯齿状边框。此外，GIF 格式是 8 位文件格式，这意味着每个像素包含 8 位颜色通道，每次累计仅显示 256 种颜色，而 JPEG 是 24 位文件格式，因此它支持 1600 万种颜色。
HTML 电子邮件中的示例 GIF
上面的示例电子邮件是上面显示的 JPEG 电子邮件的 GIF 版本。如您所见，透明度并非贯穿始终。有一部分颜色只是扩散到背景中。
在电子邮件 HTML 中使用 Cinemagraph
如果您真的想美化您的电子邮件新闻稿模板，那么 Cinemagraph 就是您的最佳选择。Cinemagraph 是一种 GIF，只是它在视觉上更具吸引力。Cinemagraph 与其他 GIF 的不同之处在于，它只需在背景中为一个元素添加动画即可创建电影效果。大多数品牌目前都在使用 Cinemagraph 在其电子邮件中创建视觉盛宴，如下所示。
HTML 电子邮件也是如此——它是最常用的沟通渠道之一（包括营销）。90 年代初，当专门的电子邮件开发人员采用编码原则创建 HTML 电子邮件模板时，他们通过背景颜色、图像、超链接等开辟了更好的可能性。以 HTML 电子邮件格式进行编码是创建 HTML 电子邮件的分步过程。
如今，82% 的营销人员认为视觉元素可以让他们的内容更具吸引力，洪都拉斯 手机号码列表 更容易被大众接受。虽然对于最终用户来说，它只是 HTML 电子邮件图像，但对于电子邮件营销人员来说，电子邮件中的图像有充足的策略、理由和测试作为后盾。所以今天我们来探讨一下在电子邮件中嵌入图像时会出现哪些细节。
电子邮件 HTML 中支持不同类型的图像
根据国际标准，图形和图像有几十种文件格式，例如 JPEG、GIF、RAW、PNG、TIFF 等。虽然大多数格式用于特定目的和应用程序，但电子邮件中图像主要使用的 3 种常见格式是 JPEG、GIF 和 PNG。
响应式 HTML 电子邮件开发人员
在 HTML 电子邮件图像中使用 JPEG
JPEG 和 JPG 图像格式是联合图像专家组的缩写，用于照片和插图，因为细节和复杂形状非常重要。JPEG 格式的核心优势在于，视觉数据被压缩，但质量却没有受到太大影响。这在电子邮件中包含 Retina 图像时尤其有用（稍后解释）。
JPEG 有助于以极小的文件大小呈现图像，从而降低下载到电子邮件中查看时的总数据成本。然而，JPEG 图像不适合照片编辑，因为电子邮件图像在保存时会被进一步压缩，从而破坏更多的视觉数据。
让我们以使用 JPEG 的该示例电子邮件为例。
HTML 电子邮件中的示例 jpg
再次，这是压缩了 30% 的同一张图像。虽然您可能没有注意到很大的差异，但原始图像的清晰度已经受到影响，并且您可以看到由于压缩，图像中的毛发变得模糊。
HTML 电子邮件中的 JPEG 示例 (10%)
即使最终用户可能无法分辨出差异，最好也不要为了几 KB 的文件大小而牺牲质量。JPEG 是静态图像（与 GIF 不同）并且不存储任何透明度数据（与 GIF 和 PNG 不同）。
在电子邮件中使用动画 GIF
GIF 是“图形交换格式”的缩写，其概念是通过引入透明度来创建比 JPEG 更小的文件大小的图像。通过使不需要的部分透明，该部分的视觉数据将被丢弃，从而使图像变得更亮。并且通过在预设的持续时间内使不同的图层透明，您还可以在每个图层中容纳帧以对其进行动画处理。
GIF是带有图像的电子邮件中最流行的交互样式之一。
图片来源
您可能想知道，既然 GIF 可以进一步减小文件大小，为什么还要使用 JPEG 图像来发送电子邮件？虽然可以将图像中不需要的部分设为透明以减小图像大小，但它会在引入透明度的部分上引入锯齿状边框。此外，GIF 格式是 8 位文件格式，这意味着每个像素包含 8 位颜色通道，每次累计仅显示 256 种颜色，而 JPEG 是 24 位文件格式，因此它支持 1600 万种颜色。
HTML 电子邮件中的示例 GIF
上面的示例电子邮件是上面显示的 JPEG 电子邮件的 GIF 版本。如您所见，透明度并非贯穿始终。有一部分颜色只是扩散到背景中。
在电子邮件 HTML 中使用 Cinemagraph
如果您真的想美化您的电子邮件新闻稿模板，那么 Cinemagraph 就是您的最佳选择。Cinemagraph 是一种 GIF，只是它在视觉上更具吸引力。Cinemagraph 与其他 GIF 的不同之处在于，它只需在背景中为一个元素添加动画即可创建电影效果。大多数品牌目前都在使用 Cinemagraph 在其电子邮件中创建视觉盛宴，如下所示。