制作 HTML 电子邮件而不是全图像电子邮件比您想象的要容易

截至今年，电子邮件已经存在了 50 年，但一开始，它都是纯文本电子邮件。 电子邮件营销的想法诞生于 1978 年，但直到 1990 年代 HTML 电子邮件才成为现实。 在电子邮件营销的早期世界中，电子邮件垃圾邮件是一个常见的烦恼，电子邮件客户端使用许多不同的过滤器来帮助阻止垃圾邮件。 其中一个过滤器阻止了所有图片的电子邮件。 早在 2007 年，Mailchimp 就发现在您的电子邮件中使用巨幅图像可能会导致您的电子邮件被屏蔽，并使您的退回率增加高达 23%。

随着电子邮件营销的发展，垃圾邮件过滤器也在发展。 如今，全图片电子邮件不一定会将您标记为垃圾邮件，但仅仅因为您可以创建全图片电子邮件并不意味着您应该这样做。

我认为是时候就全图像电子邮件进行诚实的对话，以解决支持和反对它们的原因。 在此期间，我们将看看将一些全图像电子邮件转换为实时文本电子邮件是多么容易。

让我们评估全图片电子邮件

优点

“你的意思是，全图像电子邮件有优点？！” 你问。 嗯，有。 全图像电子邮件不再是过去的电子邮件失礼。 事实上，当您通常发送实时文本电子邮件时，更改内容并发送全图像电子邮件可能会增加您的参与度。 任何新事物都可能会让您的订阅者振作起来。 但还有其他一些因素使全图片电子邮件成为某些公司的首选。

1. 维持品牌风格
   如果您为一个对所使用的品牌风格非常具体的品牌工作，那么全图片电子邮件可能是您要走的路。 您可以确保字体在任何地方都是正确的。 您可以确保所有电子邮件客户端都保持任何品牌风格。 使用全图片电子邮件，您无需像使用实时文本电子邮件那样担心电子邮件会中断。
2. 视觉冲击力
   我个人并不是非常相信这一点，因为我相信您可以制作具有视觉冲击力的电子邮件，而无需求助于全图像电子邮件。 但是有一些事情你不能在任何地方用实时文本电子邮件做（尽管如果你有一个伟大的电子邮件开发者，那就不多了）。 RealGoodEmails 充满了一些很棒的电子邮件灵感，其中很大一部分是全图片电子邮件，因为老实说，它们真的很好看。
3. 更便宜
   有些人会争辩说，全图像电子邮件更便宜，因为您不需要支付设计师和开发人员的费用。 （在某些情况下，我很确定这些公司甚至不使用设计师）。 您可以在您最喜欢的照片编辑程序中创建图像，然后将它们保存并直接放入您的 ESP。 这是向您的订阅者发送精美电子邮件的快捷方式。

缺点

我们自己的 Magan Le 问了我对全图片电子邮件的看法，老实说，我不像以前那样反对纯图片电子邮件。 我仍然认为您无法通过全图像电子邮件为每个人提供出色的电子邮件体验。 但是，对于某些企业来说，全图片电子邮件可能有意义。 但在您做出决定之前，请确保您已考虑到不利因素：

1. 可达性差
   全图像电子邮件不像实时文本电子邮件那样易于访问。 “但我输入了准确的 ALT 文本，Carin！” 那太棒了。 还有一些公司使用非常好的 ALT 文本来制作全图像电子邮件。 但可访问性不仅仅是放入 ALT 文本。拥有可供所有人访问的电子邮件意味着每个人都可以阅读。 ALT 文本对于那些使用设置来增加字体大小的阅读障碍者或弱视用户没有任何帮助。 这些只是实时文本电子邮件可以比全图像电子邮件更好地处理的几个问题。
2. 用户体验不佳
   即使对于启用了图像的订阅者，全图像电子邮件也可能比实时文本电子邮件更糟糕的用户体验。 互联网连接速度较慢的订阅者可能会经历很长时间才能加载图像。 如果订阅者在手机上阅读时查看电子邮件，则使用未压缩的大图像可能会消耗掉订阅者的数据。 并考虑个性化！ 我可以向您保证，将合并标签放入实时文本电子邮件中要比为整个列表获取个性化图像容易得多。
3. 缺少或丢失号召性用语 (CTA)
   对于全图片电子邮件，任何关闭图片的订阅者都将丢失图片中的所有 CTA。 更不用说 - 您电子邮件中可能包含的所有其他内容。 您可能会认为，因为您在没有打开电子邮件的情况下点击的订阅者数量很少，所以您无需担心这一点。 但是，有多少订阅者在关闭图片的情况下查看您的电子邮件并且没有点击，因为他们看不到您的 CTA？

这些只是对缺点的广泛概述。 如果您需要更有说服力（或者您的客户需要），Magan 会更深入地说明为什么不应该发送全图片电子邮件。

实时电子邮件有什么好处？

在您的整个电子邮件营销生涯中，您一直在发送全图片电子邮件，并且一遍又一遍地听到“不要发送全图片电子邮件”的言论，但您除了成功之外一无所有？ 那太棒了。 但是我可以让你知道一些关于实时电子邮件的很棒的事情吗？

优点

1. 更容易更新
   全图片电子邮件更新起来很痛苦。 您必须更新图像、重新保存、重新上传，然后将其添加到您的电子邮件中。 你可能也在那里获得了一些批准。 使用实时电子邮件，更新拼写错误的单词或错误的日期是一件简单的事情。 你所要做的就是找出错误并改正它。 无需一直回到-文字-绘图板。
2. 更好的订阅者体验
   通过实时电子邮件，副本将针对具有更高分辨率屏幕的订阅者调整大小，文本在移动设备上不会变得非常小，并且在黑暗模式下，您可以控制颜色的反转方式。 即使您的订阅者出于某种原因关闭了图片，电子邮件内容和 CTA 仍然可见。

缺点

1. 更贵
   “为我们所做的每封电子邮件聘请一名开发人员太昂贵了。” 是的，大概是。 这就是为什么您不应该聘请开发人员来处理您发送的每封电子邮件。 聘请开发人员创建一个模块化系统，然后您可以自己实现。 许多电子邮件服务提供商 (ESP) 都提供模板系统，因此请聘请开发人员为您的公司构建自定义模板系统。 如果您的 ESP 没有，您可以让开发人员在 Litmus Builder 中创建部分和片段，然后使用拖放和可视化编辑器功能在 Litmus 中创建电子邮件。 我保证，从长远来看，您将节省时间，减少来回编辑电子邮件。
2. 更难创造
   还是他们？ 这是我从许多企业那里听到的缺点之一。 我们没有开发人员，所以我们不能做实时电子邮件。 如上所述，许多 ESP 都有模板和模块化构建解决方案。 如果您的 ESP 没有，Litmus 有一个可视化编辑器，Litmus 社区有许多模板和片段，您可以使用它们来构建自己的电子邮件。 我们甚至有一个模块化模板和片段来帮助您入门。
3. 所有电子邮件客户端的设计都不相同
   嗯，不，大多数电子邮件在所有电子邮件客户端中并不相同。 如果您有开发人员和大量时间，您可能会非常接近。 但是，您真的需要所有电子邮件客户端的电子邮件都相同吗？ 是的，颜色应该是相同的，但是在你的按钮上有圆角、有稍微不同的字体或者在较小的屏幕上有相同的布局都不会影响订阅者的体验，就像不可读一样文本将是。

转换全图片电子邮件

现在我们进入有趣的部分。 将那些漂亮的全图像电子邮件转换为实时文本。 您可以使用多种技术来确保您的电子邮件仍然像全图像电子邮件一样令人惊叹和引人注目。

背景图片

制作全图片电子邮件的最常见原因之一是，拥有有趣的背景，而不仅仅是白色或纯色，这会创建更具视觉吸引力的电子邮件。 但是您不必在电子邮件中使用纯色作为背景。 您可以使用背景图像，并且如果您正确编码，大多数电子邮件客户端都支持它们。 Windows 10 邮件是最大的例外。 如果您在 Windows 10 邮件上有大量订阅者，那么您应该避开背景图像。

使用背景图像编码的电子邮件和仅编码为图像的电子邮件之间存在很大差异。 如果您使用背景图片，即使图片关闭，所有文字仍然可见：

与使用图像创建背景图像效果的电子邮件相反。 在这种情况下，初始 CTA 会丢失（徽标和公司名称也是如此）。 电子邮件没有那么有影响力，尽管“畅销书”部分仍然可见且可操作，但电子邮件的重点——在组织捆绑包上省钱——已经丢失：

英雄作品是在所有图像的情况下创建的——图像已打开（来源： Really Good Emails ）	英雄作品是使用所有图像创建的 - 图像已关闭

编码背景图像并不是最简单的事情，但我们有一篇博客文章可以帮助您解决这个问题。 如果您在 Litmus 中设置了带有背景图像的模板，则可以在 Visual Editor 中更改背景图像，甚至无需触及代码。 确保图像大小与您要替换的图像匹配，并且您已压缩正在使用的图像，使其不会太大。

偏移图像和文本

任何偏离预期或常规的东西都有引起我们注意的趋势，你可以在任何地方看到这样的例子，包括在电子邮件中。

上面的例子有图像偏移，你可以很容易地把它作为一个完整的图像来做，但是如果你想偏移一个文本块怎么办？ 好吧，你有几个选择。 你可以稍微偏移它，这样文本实际上就不会偏移，你只是让它看起来元素被偏移，比如在这封电子邮件中：

这里电子邮件的顶部是偏移的，但正如您所看到的，实际上在白色部分只有一点蓝色，没有文本或图像。 所以你可以使用一个空的表格单元格。 或者，如果您想要在任何地方都能使用的圆角，您可以使用装饰图像。 但稍后会详细介绍这些技术。 在这种情况下，您的电子邮件的实际内容不会被抵消，但它似乎是。

另一种选择是让所有内容都像这封电子邮件中一样偏移：

这封电子邮件在图像上的块中偏移了整个标注部分。 使用绝对定位在网络上很容易做到这一点，但由于电子邮件中并非处处都支持它，因此它变得有点棘手。 我知道有两种不同的方法。 如果您有更多，请在评论中告诉我们！

首先，有虚假绝对定位。 Steven Sayo 和 Mark Robbins 编写了一些很棒的分步指南来学习如何使用这种技术。 Steven 和 Mark 提供了回退以使其在 Outlook 中工作，并且根据我对它的有限经验，它有很好的支持。

如果您对代码不太熟悉，也可以通过切片图像并将它们定位在要偏移的元素周围来创建这种效果。 有点混乱，但它有效。 您必须确保测试、测试、再测试，因为出现问题和图像排列不正确的可能性更高。

我是人造绝对定位的粉丝，因为它允许电子邮件在保持电子邮件实时文本的同时具有显着的偏移，而不必担心排列切片图像，但任何一种方法都可以使用。

网络字体和实时文本

保持品牌标准是使用全图片电子邮件的另一个重要原因，因为您无法让字体随处可见。 我明白了。 但是，与 Helvetica 和 Arial 相比，有更多的后备选项。 鼓励您的公司或您的客户在您的品牌指南中考虑使用标准的后备字体，以便您可以确保您的信息在所有电子邮件客户端中都能传达。

三星通过使用 Trebuchet MS 作为标题的后备字体来保持它的趣味性。 不完全是三星 One 品牌的字体，但仍然比 Helvetica、Arial、ALT 文本或什么都没有：

启用 webfont 和图像的电子邮件	显示后备并关闭图像的电子邮件

当您的电子邮件不依赖图像时，添加具有有趣回退的 Web 字体是帮助您的电子邮件脱颖而出的最快方法之一。 它们很容易添加一次，然后在整个电子邮件设计系统中实施。 一旦您的电子邮件模板设置了网络字体，如果您使用模板化系统，即使是非编码人员也可以从中受益。

带样式的 ALT 文本

通过设置 ALT 文本的样式，即使关闭图像，您也可以使电子邮件保留一些外观。 我们在 Litmus 中使用样式化的 ALT 文本来维护我们徽标的粗略版本，但是如果您必须创建全图像电子邮件，您也可以在这些基于图像的按钮上使用它以使它们脱颖而出。 您可以通过向图像标签添加 CSS 来设置 ALT 文本的样式，并且您可以更改 ALT 文本的背景颜色和字体的大多数方面。 并非所有地方都支持它，但请前往我们的样式化 ALT 文本终极指南，了解它在何处受支持以及如何操作。

图像、空表格单元格和样式化水平线作为设计元素

您不需要拥有整个图像来创建有趣的元素。 有时只需使用图像的一部分来完成它，并将其与表格单元格相结合就可以创造视觉趣味。

为了创建在所有电子邮件客户端中显示的圆角，我将在容器的顶部和底部添加圆角图像。 您可以做类似的事情来创建角度或形状作为电子邮件各部分之间的过渡。 不要使用图像创建整个形状，而是为带有文本的部分使用背景颜色，然后在部分的顶部或底部添加图像以使其脱颖而出。

您还可以设置水平线的样式，以在部分之间创建有趣的过渡或分隔线。 我们在 Litmus 中使用简单的样式来创建一条线，但是您可以尝试使用许多不同的技术来创建仅使用水平线的有趣分隔线。 （让我们知道怎么回事！）。

我们还有一个彩色分隔线，用于分割内容。 这完全是通过背景颜色和表格单元格完成的：

用您的代码发挥创意，看看没有图像您能做什么！

防弹按钮

这是我对全图片电子邮件的最大不满。 如果订阅者无法看到基于图像的操作调用，则他们很难采取行动。 如果其他所有内容都难以实施，请至少开始使用实时文本按钮进行号召性用语。

这是两种不同的电子邮件，一种使用实时文本按钮，另一种是全图像电子邮件，其中一个图像中带有按钮。 左侧的电子邮件比右侧的电子邮件更具可操作性。

带有图像关闭的实时文本按钮的电子邮件（来源： Really Good Emails ）	带有基于图像的按钮且图像关闭的电子邮件（来源： Really Good Emails ）

如果您使用全图片电子邮件的论点是没有打开就不会获得很多点击，因此您不能在关闭图像的情况下拥有大量受众，请查看关闭图像的 CTA 是什么样的。 如果他们不知道他们在点击什么，那么没有多少人会点击。

有几种不同的方法可以创建实时文本按钮，因此请确保使用适合您的受众的方法，并且一如既往：测试，测试，再测试！

转换那些全图片电子邮件

我联系了一些电子邮件开发人员，以帮助我向您展示如何使用其中一些技术将所有图像电子邮件转换为实时文本。 您会注意到，将这些电子邮件转换为实时文本不仅增强了关闭图像的电子邮件版本，还改进了电子邮件的移动和暗模式版本。

S'well 电子邮件转换

Anne K. Tomlin 是Email's Y'all 的创始人。 一位经验丰富的编码员，了解电子邮件怪癖的来龙去脉，她一心要炫耀实时文本可以在电子邮件中产生的不同。

用她自己的话说：全图像电子邮件不会将您的信息发送给默认情况下阻止图像的人以及使用屏幕阅读器或数字助理（Siri、Alexa 等）的任何人。 如果您的目标是转化，那么您甚至没有给这些人转化的机会。 S'well 的电子邮件比普通的只有图片的电子邮件糟糕 10 倍，因为根本没有替代文本。 屏幕阅读器或数字助理会读出：“庆祝大胆的举动、伟大的想法和快乐！ 在你的浏览器中阅读这封电子邮件。 店铺。 故事。 关于我们。 胀。” 然后立即跳转到页脚读出。 多么可怕的经历！ 图像被屏蔽的订阅者会看到一个空白页面。 没有人会看着一个空白页面并想，“我应该在浏览器中检查一下！” 并单击“在浏览器中查看”链接。 您有 5 秒钟的时间来吸引订阅者的注意力，因此如果您有一封全图片电子邮件并且默认情况下这些图片未加载，那么您可能根本就没有发送电子邮件。 事实上，该订阅者可以查看它，因为您根本没有向他们发送任何内容，因此他们应该取消订阅。

原始电子邮件：

安妮的实时文本版本：

我非常喜欢安妮的版本，主要是因为猫，但也因为在移动和黑暗模式下增加了可访问性。 文本不会被困在图像中，因此不会缩小它仍然清晰易读。 黑暗模式版本实际上是黑暗的，如果我在黑暗的房间里看它，它不会是令人眼花缭乱的亮光，此外，任何将手机设置为黑暗模式以减少眼睛疲劳的人都不会遇到他们试图避免的灯光模式。

原版手机版	安妮的手机版
原始暗模式版本	安妮的黑暗模式版本

对于全图像转换...... 【鼓点，请】

多田！ 关闭图像时不会丢失任何内容（可爱的小猫除外）。 订阅者仍然可以采取行动，最重要的是：他们仍然可以阅读您的消息。

看看安妮是怎么做的

Magic Spoon 电子邮件转换

Carin Slater 是电子邮件营销专家，也是 Litmus 所有电子邮件背后的电子邮件开发人员。 等等，是我！ 是的，你知道我对全图片电子邮件的立场。

我喜欢 Magic Spoon 电子邮件（还有 Magic Spoon 麦片，太好吃了），但是当它们以全图片电子邮件的形式出现在我的收件箱中时，我总是很难过。 他们通常很擅长将图像文本作为 ALT 文本包含在内，这样如果没有图像，您仍然可以知道电子邮件中发生了什么，但是这封电子邮件不像他们发送的其他电子邮件那样具有描述性或包容性。 我想我会解决这个问题，因为有一个 GIF 按钮，它真的很有趣，而且如果不使用图像似乎很难做到。

原始电子邮件：

Carin 的实时文本版本：

我不得不做出妥协，因为它在 Windows 上的 Outlook 365 桌面客户端的暗模式下看起来并不完美，因此根据 Magic Spoon 的订阅者打开电子邮件的位置，这可能重要也可能不重要。 由于我使用的是全图像电子邮件而不是设计文件，因此我无法创建暗模式或 GIF 的移动版本，这两者都是我要求的，以便它们可以在以下情况下更换我正在处理原始文件。 尽管存在这些问题，但实时文本版本中的黑暗模式和移动版本得到了改进。 移动版中保留了 GIF 动画，文字更清晰，虽然只有一点点，因为 Magic Spoon 确实创建了一个全图像版本，他们将其替换为移动版（移动版是的，但对电子邮件进行编码是嘘声）两次）。

原版手机版	转换手机版
原始暗模式版本	转换后的暗模式版本

对于全图像版本，我使用了风格化的 ALT 文本来保持页脚中徽标和标语的外观，因此当图像关闭时，电子邮件看起来与图像版本相似。 同样，实时文本版本比全图像版本更具视觉吸引力、可操作性和吸引力。

看看 Carin 是如何做到的

*所有用于转换的电子邮件均从我的收件箱中提取

在任何情况下都让您的电子邮件闪耀

我从多年的电子邮件中学到的一件事是，订阅者总是会做出意想不到的事情。 无论是搜索电子邮件而不是使用文件夹，还是在手机浏览器中打开电子邮件，您都不知道人们将如何体验您的电子邮件。 因此，请尽最大努力确保订阅者无论在何处打开您的电子邮件，都能获得最佳体验。