电子邮件代码 102：处理图像

已发表: 2020-05-01

看到代码在您面前溢出会感到非常令人生畏，有时甚至令人沮丧。我向您保证，从营销人员到营销人员，这比看起来容易得多。另外，能够浏览电子邮件 HTML 是一项非常有价值的技能。在我们的电子邮件代码基础系列中，我们将教您需要了解的电子邮件 HTML 基础知识，以便更轻松地使用电子邮件代码。

在我们的上一篇文章中，我们介绍了如何导航电子邮件代码以快速了解如何更新链接或进行快速复制更改。但是图像呢？

图像是许多高性能电子邮件的支柱。但是，随着复杂性的不断增加以及需要考虑的各种文件类型、大小、可访问性和加载时间，它甚至可能让最熟练的营销人员不知所措。

在本文中，我们将介绍一些最常见的向电子邮件添加图像的方法，并介绍一些基本知识，以确保您的订阅者获得良好的体验。如果您想深入了解图像，请查看以下指南：

您可以轻松地遵循本指南中涵盖的主题，因此请继续在 Litmus Builder 中打开一封电子邮件，我们将开始！

准备你的形象

在将图片添加到电子邮件之前，请确保设置成功。首先，确保您使用的图像是适合电子邮件的文件类型和大小。大文件大小会减慢您的加载时间，降低您的整体转化率和参与度，因此请确保您使用的是快速加载的轻量级图像。

找到要在代码中添加图像的位置 - 如果您使用 Litmus Builder，请打开网格视图以单击您希望图像出现的位置，然后单击进入代码视图。找到最佳位置后，使用 <img> 标签添加图像，但将此处的 URL 替换为指向图像的直接链接。

如果您不确定直接链接是什么，请注意文件名的结尾，它应该以图像文件类型结尾，例如“.png”、“.jpg”或“.gif”。文件夹或 HTML 的链接在此处不起作用，它需要直接指向您添加到电子邮件中的图像。

 <img src="img-url.jpg" />

就是这样！添加标签后，如果您在 Litmus Builder 中，您的图像将显示在预览窗格中。

想知道您可以在哪里托管您的图像？大多数 ESP 都有一个文件托管系统，您可以在其中上传图像并将这些公共 URL 用于电子邮件中的图像源，因此请务必先检查您的 ESP。如果您的 ESP 不提供图像文件托管，请考虑使用亚马逊的 AWS 或您自己网站的 FTP 服务器进行图像托管。

最好使用两倍于您想要插入图像的空间大小的图像，这样它在所有显示器上看起来都很棒，并且没有像素化或模糊。通过向您在上一步中构建的 <img> 标签添加修饰符来调整图像的宽度和高度。它看起来像这样：

 <img src="img-url.jpg" width="400" height="100" />

根据对您的电子邮件有意义的任何内容调整宽度和高度的值。您可以使用这些值并通过进行更改来查看其外观，然后单击 Builder 中的预览窗格以查看它们的更新。

ALT 文本描述图像，以便那些在电子邮件客户端中禁用图像或依赖屏幕阅读器的人可以轻松阅读您的电子邮件。例如，如果我们有一张提供 20% 折扣的促销图片，添加一些描述该优惠的 ALT 文本会使您的读者知道该优惠，即使他们因任何原因无法看到图片。

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

最好的 ALT 文本是描述性的、简洁的，并且与您的图像具有相同的意图。如果您在发送之前通过 Litmus Checklist 运行您的电子邮件，我们将标记丢失的 ALT 文本，以便您可以轻松进入并更新它。现在您甚至不必与开发人员核对！

改变了你对那一张图片的看法？你有两个选择：

1. 与创建新图片一样，您可以将指向您图片的 URL 替换为新图片。这将保留您的所有尺寸、ALT 文本或任何其他可能有助于设置图像样式的内容，并且只需更新图像内容本身。

获取当前图像标签并查找文件路径：

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

用您的新图像路径替换路径：

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. 根据您的图像托管位置，您还可以将名称完全相同的新图像上传到同一位置。这样，您根本不需要触摸代码来更新电子邮件的图像。

既然您已经拥有更新和修改图像的能力，请明智地使用这种能力！电子邮件中的图像很快就会出错。需要很长时间才能加载的繁重文件、在整个电子邮件中使用图像或放弃设计的可访问性都会造成订阅者体验混乱。

在构建图像库时，请牢记以下一些快速最佳实践：

保持文件轻巧甜美，1MB 以下最好，越小越好（Litmus Checklist 检查您的加载时间，所以如果您不知道每个图像大小，请不要担心。）
添加替代文本以使您的电子邮件清晰易读，即使图像不可见。
不要发送仅包含图片的电子邮件，并确保您的电子邮件包含实时文本。使用图像设计整封电子邮件可能很诱人，但这可能会因加载时间长和禁用图像的用户体验不佳而损害参与度和转化率。

在特定的新手代码问题上需要帮助？让我们知道您希望在本系列中看到什么。没有什么问题太基础了！

_______________________

了解有关电子邮件中图像的更多信息：