电子邮件像素艺术：最稀有和最酷的防御设计策略

图像屏蔽很常见，一些电子邮件客户端默认禁用图像，一些订阅者关闭图像以保存移动数据或出于其他原因。 因此，电子邮件营销人员需要使用防御性设计技术来确保在禁用图像时传达他们的信息。

防御性设计也有助于电子邮件可访问性，包括三个关键策略：

1. 尽可能多地使用 HTML 或实时文本，而不是将所有文本嵌入到图像中
2. 将 ALT 文本添加到您的图像中——或者更好的是，添加样式的 ALT 文本
3. 在表格单元格上使用背景颜色

让我们专注于最后一个策略。

图像被阻止时发生的一件大事是您的电子邮件失去了其结构。 电子邮件变平了，一切都开始变得模糊起来。 使用 HTML 文本并设置 ALT 文本的大小和颜色可以帮助创建结构和层次结构，但背景颜色更强大。

向表格单元格添加背景颜色会创建横幅、内容块，并且对于制作防弹按钮至关重要。 这封 Twitter 电子邮件演示了当图像被阻止时表格单元格上的背景颜色如何保持电子邮件设计的完整性。

这很好，但是背景色的表格单元格可以做更多——更多。 除了与 HTML 文本一起使用以创建不受图像阻止影响的电子邮件内容之外，表格单元格背景颜色还可用作图像的后备。

为此，您可以从一系列嵌套表格中创建马赛克，并将背景颜色应用于表格单元格。 然后将图像切片，使每个切片都完美地融入马赛克的表格单元格中。 这样，当叠加图像被遮挡并消失时，彩色表格单元格的底层马赛克就会出现。

电子邮件像素艺术的例子

为了展示电子邮件马赛克的强大功能，这里有几个示例，每个示例都显示了左侧启用图像而右侧禁用图像的电子邮件：

Mothercare在这封电子邮件中为他们的婴儿车创建了像素艺术，这也充分利用了样式化的 ALT 文本贯穿始终。

Pizza Express在这封触发式生日电子邮件中使用了像素艺术，其中还包括个性化图像和相应的个性化样式的 ALT 文本。

PlayStation New Zealand使用电子邮件马赛克来创建汽车人的象征，巧妙地演绎了变形金刚的“伪装机器人”口号。

Benton Lingerie捕捉了母亲节电子邮件信息的情感，使用电子邮件像素艺术创造了一个大的粉红色心形。

设计和战略考虑

在创建电子邮件马赛克之前，请考虑以下设计和策略问题：

1. 电子邮件像素艺术可能会变重，如果电子邮件超过 102KB，可能会导致您的电子邮件在 Gmail 中被剪切。 所以保持简单，专注于最小可行的像素艺术图像。

例如，Benton Lingerie 的像素化心脏可能会随着表格单元格数量的两倍或三倍而变得更加轮廓。 但他们的执行显然是一颗心，因此非常有效。

2. 电子邮件像素艺术可能需要大量额外工作，因此通常最好将它们保留用于大容量或高影响力的电子邮件。 这意味着可能将它们用于新产品发布、网络星期一活动和类似大型活动的关键广播电子邮件。 但这也意味着考虑将它们用于高容量触发电子邮件，例如上面的 Pizza Express 生日电子邮件。

同样，您可以考虑将它们用于大容量电子邮件元素，例如您的徽标或页脚元素。 如果您这样做，请将它们作为部分实现，以便您可以更改或更新徽标或页脚的所有实例的像素艺术。

无论您选择哪种方法，您都希望确保获得额外设计工作的影响。

3. 电子邮件像素艺术并不总是与响应式设计兼容。 根据您对响应式电子邮件进行编码的方式，电子邮件马赛克可能无法从桌面版本转换为移动版本。 在您的移动版本中隐藏和堆叠电子邮件内容可能会破坏您的电子邮件像素艺术。 在设计电子邮件马赛克时一定要考虑到这一点。

4. 电子邮件像素艺术不必尝试替换被阻止的图像。 正如我们在 PlayStation 和 Benton Lingerie 示例中看到的那样，电子邮件像素艺术可能与电子邮件中的图像完全不同。 不要觉得您总是必须创建英雄图像的 8 位版本。 有时，传达图像的精神同样有效——而且可能更容易编码，而交付更少。

5. 某些电子邮件更有可能阻止图像。 阻止电子邮件中的图像的可能性并不统一。 在电子邮件关系的开始和接近结束时，图像阻塞的可能性都较高。

对于您向订阅者发送的第一封电子邮件，他们可能会阻止陌生发件人的图像。 这意味着您可能希望为您的欢迎电子邮件和交易电子邮件投入更多精力进行防御性设计。

对于关系中迟到的电子邮件（即在相当长的一段时间不活动之后），图像可能会被阻止，因为它们位于订阅者的垃圾邮件文件夹中。 这意味着您可能希望在重新参与电子邮件和重新许可电子邮件中投入额外的防御性设计工作。

在这两种情况下，除了大量使用 HTML 文本和样式化 ALT 文本之外，额外的努力可能包括电子邮件像素艺术。

优化图像阻塞 Litmus Builder 可让您轻松编码电子邮件并在 70 多种电子邮件应用程序和设备中预览它们。 只需单击一下即可打开和关闭图像，以完善您的电子邮件像素艺术。 建立伟大的电子邮件 →

如何制作电子邮件像素艺术

考虑到这些因素，创建电子邮件像素艺术的最佳方式是什么？

首先，我们建议：

• 图像到表格转换器
• 电子邮件优化狗
• 图像-HTML 应用程序

但是，您可能会发现这些方法并非在所有情况下都有帮助。 通常情况下，我们希望您希望手动构建您的电子邮件像素艺术。

如果这是您要走的路线，以下是您需要采取的主要步骤：

1. 在方格纸或您选择的设计软件中勾勒出最小可行的电子邮件像素艺术图像。
2. 使用 Photoshop 或其他设计软件中的切片工具将图像划分为必要的块大小，以创建电子邮件马赛克并将它们保存为单独的图像。 使用文件命名约定，可以轻松地将整个图像拼凑在一起。
3. 使用嵌套在表格中的一系列表格，在您需要适应您的设计的位置创建块。
4. 为确保您的切片图像无缝地组合在一起，请为您的表格指定 cellpadding="0"、cellspacing="0" 和 border="0"。
5. 将所需的 bgcolor 应用到每个表格单元格。
6. 在禁用图像的情况下预览您的电子邮件，以确保它按预期呈现。

这是来自 Action Rocket 的 EmailWeekly 时事通讯的电子邮件像素艺术的一个很好的例子。 在 Litmus Builder 界面中选择“切换图像”以查看关闭图像的电子邮件。

罕见且出乎意料的策略

电子邮件营销人员了解设计图像的必要性。 我们知道，根据 Litmus 对近 3,000 名营销人员的 2018 年电子邮件现状调查，83% 的品牌总是或经常在其电子邮件图像中使用 ALT 文本。

然而，虽然添加 ALT 文本非常简单，但创建电子邮件像素艺术绝非如此。 因此，近 77% 的品牌从不使用电子邮件马赛克。

对于勇敢的品牌来说，这是一个机会。 这种策略的罕见性意味着它是一种通过提供意想不到的东西来给订阅者带来惊喜和愉悦的有效方式——而且越来越多的品牌正在迎头赶上。 超过 23% 的品牌至少很少使用电子邮件像素艺术，高于 2017 年的 18%。

想要更多这样的资源吗？

订阅 Litmus Weekly 以在收件箱中获取每周的电子邮件灵感、提示和技巧。

上榜→