关于如何在电子邮件模板中添加背景图像的 4 条提示

已发表: 2020-12-14

电子邮件背景图片

每个人都在消息中使用电子邮件背景图像。 它们非常引人注目，以正确的方式使用它们非常重要。 所以，让我们开始我们在电子邮件中使用背景图像的指南。 你会发现：

  • 为什么需要在时事通讯中使用图片；

  • 如何使用 HTML 代码插入背景图片；

  • 如何使用 CSS 添加背景图像。

电子邮件的背景是什么？

时事通讯背景是用作电子邮件中所有其他元素的环绕的图像。 与其像英雄形象那样成为主要焦点，它更经常是微妙的，并且与活动的其他内容相辅相成。

在 HTML 中添加电子邮件的背景图像需要更改时事通讯的代码。 如果您对自定义编码一无所知 - 正确的方法是使用已加载到您的电子邮件软件 Atomic Email Sender 中的免费现成模板。 选择您喜欢的内容，添加内容并发送广告系列。

无论您是熟悉 HTML 和 CSS 的高级用户，还是有一些使用这些代码的技能，我们的文章都会为您提供一些关于如何在 HTML 中创建背景图像的提示。

为什么使用电子邮件背景

电子邮件 HTML 背景图像的主要好处是您可以获得额外的分层可能性，并且您可以将关键信息以及其他图片或号召性用语放置在电子邮件背景图像之上。

就美而言，获得一份设计精美的时事通讯总是件好事。 此外，您可以使用动画 GIF 作为时事通讯的背景图像。


通过电子邮件发送背景图片
动画电子邮件背景

保持简单：电子邮件后台的基本设计

请记住，背景图像应该简单，并且没有可以抢镜的大声图案。 HTML 电子邮件背景颜色不应太亮，以免引起比电子邮件通讯的主要信息更多的关注。 请记住，时事通讯背景只是对内容的补充，以使电子邮件看起来更漂亮。 最好的时事通讯背景图像具有安静的风格，并且可以包含图形元素（纹理、渐变、图案等）。

如果您不是设计专业人士，我们建议您不要冒险并避免来自艺术背景。 极简主义现在很流行，您可以成功地将其应用到您的电子邮件活动中。 电子邮件最佳实践中的图像之一是电子邮件的渐变背景。 使用颜色并根据电子邮件的内容选择具有平滑过渡的渐变背景。 可以使用 CSS 来完成。 因此，您会得到一个电子邮件背景，它可以很好地替代 PNG、JPG 或 GIF 图片的背景。


电子邮件模板背景图片
渐变电子邮件背景

通讯图片的最佳尺寸和格式

电子邮件的图像格式

当您选择或创建用于电子邮件活动的图像时，请确保以正确的格式保存它们 - PNG、JPG 或 GIF。 每种图像格式都有自己的特殊性，例如保存为 PNG 的图像保持透明度。

大小事项！

与您的 ESP 保持联系很好，现在是时候向您的 ESP 询问图像大小和重量的限制。 看，一些 ESP 会压缩太大或重量太大的图像——所有这些都会影响图像的质量和信息的总体印象。 如果您的图像太大，则电子邮件可能会被防火墙或电子邮件过滤器阻止，并且您的电子邮件活动将无法到达收件人。

由于理想的电子邮件模板大小在 600-650 像素之间波动，因此最好使用大小完全相同的背景图像。 这涉及保存为 PNG 和 JPG 文件的图像。

最佳 Outlook 和 Gmail 背景图像大小是否不同？ 不，接收者使用哪个客户端来阅读新闻通讯并不重要。 Gmail 和 Outlook 电子邮件背景图像的完美尺寸均为 600-650 像素。

要将 GIF 图像用作背景图像并覆盖整个内容区域，请将其大小保持为 1280 像素宽。 想要强调除 Outlook 2007-2013 之外的几乎所有电子邮件客户端都支持 GIF 文件 - 他们的用户只会看到动画 GIF 文件中的第一帧。 这就是为什么把最重要的框架放在第一位的原因。 一般情况下，动画 GIF 中的帧数不应超过 10 个单位。

为了方便管理电子邮件，请使用电子邮件工作室。 我们还有一个很棒的电子邮件列表管理器，用于管理电子邮件列表。 使用电子邮件提取器，您可以收集用于发送信件的电子邮件地址。

让您的电子邮件适合移动设备使用

请记住，人们使用移动设备打开的电子邮件超过一半。 在创建电子邮件设计时，您应该考虑这一点。 准备简讯手机版，图片尺寸更小，避免邮件加载时间过长等问题。 如何让邮件在智能手机上正确显示？ 使用 CSS 调整每个特定智能手机屏幕的背景图片。 收件人将感谢优质设计，节省时间和交通！

如何在电子邮件中添加背景图片？ 让我们了解如何在我们的电子邮件发送软件 - Atomic Mail Sender 中使用背景图像。

如何添加背景图片 - Atomic Mail Sender Rocks

添加背景图像有四种主要方法：

  • 使用表格属性在 HTML 中插入背景图片
  • 使用内联 CSS
  • 使用嵌入式 CSS
  • 使用防弹背景

让我们想象一下，您已经有一个 HTML 电子邮件模板，并且只想向其添加背景图像。 由于时事通讯因业务分支而异，编码也各不相同，我们将从 Atomic Mail Sender 现成的模板中选取一个，向您展示后台实施的主要原则。

1.表格属性作为HTML添加背景图片的方式

如果您查看由表格设计的电子邮件模板，您会看到包含其他较小表格块的第一个主表格。 这就是我们需要的——第一个打开的表格和属性background 。

提及的属性可以应用于整个表格（标签 <table>）或表格单元格（标签 <td>）。

背景属性包含托管背景图像的 URL。

例如：

<td width="100%" align="center" bgcolor="#fcd539" border="0" cellspacing="0" cellpadding="0" background="https://path-to-image/title.png"></td>

对于不支持背景图像的客户端，您确实需要提及背景颜色 (bgcolor) 以及 ALT 文本。 谨慎选择背景颜色。 所有内容元素和消息文本都应在后台清晰可读。 有些读者不打开图像，这就是为什么使用 ALT 文本很好。 不要只使用您可能用于 SEO 需求的普通替代文本。 想象一下，这是图像的唯一替代方法，并将您的 ALT 文本用作号召性用语。 让它们听起来很好听！ 您将从中受益。 读者可以打开图像以查看图像，或者只需点击链接即可查看报价。

前：


背景图像_1
没有背景的电子邮件

后：


背景图像_2
带有图案背景的电子邮件

没有背景图像但有背景颜色：


background_image_3
纯背景的电子邮件

如果您没有网站，我们建议您将用作背景的图像保存在免费服务或公共服务器上。 始终键入背景图像文件的绝对路径。

所以，这就是如何使用 HTML 代码添加背景图像。 现在让我们转到下一种插入方式。

2. 如何使用内联 CSS 代码作为背景图片

操作原理同上，修改第一个打开表格或表格单元格的代码。 不同之处在于您使用style属性。

HTML 代码示例：

<td width="100%" align="center" border="0" cellspacing="0" cellpadding="0"></td>

  • 添加以下属性： background-repeat: no-repeat; 到桌子上，使背景图像不再重复。 所以，它不会是这样的： 背景图像_4 它将显示如下： background_image_5 不重复的背景图片
  • 背景尺寸：封面； - 这个重要的属性允许用您的图像覆盖所有可用的时事通讯空间。 当您的通讯空间和需要调整大小的图像受到限制时，对于移动电子邮件活动特别有用。 背景图像_6

最好有一个链接指向您的电子邮件信息的 WEB 版本。 有时无法看到图像，这可能是由于错误或电子邮件客户端错误而发生的。 最好有一个指向电子邮件 WEB 版本的链接。 让它听起来像“查看图像有问题？单击此处获取 WEB 版本”

3. 嵌入式CSS表格用于背景图片创建

首先，您需要在电子邮件消息的头部添加一个 css <style> 标签。 确保现有 HTML 代码中没有其他背景属性，否则它们会覆盖背景图像。

CSS 代码示例如下：

<style> .bgImage { background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-size: cover; } </style>

然后我们直接进入电子邮件模板中的嵌入式 CSS。 使用该类设置与您在电子邮件头中编写的 css 样式的对应关系。

<td class="bgImage"></td>

4. 电子邮件中的防弹背景图片

背景图像的防弹原则将 HTML 属性使用与 Microsoft 的矢量标记语言 (VML) 相结合。 这种方法有助于创建具有背景的电子邮件模板，该模板将显示在每个电子邮件客户端中。

今天有一个免费的服务器可以自动生成防弹后台代码。 转到 https://backgrounds.cm/ 并尝试一下。

只需指定所需背景图片的 URL，指定备用颜色并选择此规则应应用于新闻通讯的整个正文还是仅应用于表格中的一个单元格。 因此，您可以准备好将 HTML 代码插入到模板中。

背景图像如何在电子邮件客户端中显示

有一个问题：某些电子邮件客户端可能不支持背景图片。 例如，旧版本的 Android。 此外，无论您如何努力，某些版本的 Gmail 客户端都不会完全显示带有图像的电子邮件模板。 在创建时事通讯时请务必牢记这一点。 为了更容易理解问题，请使用此表。


background_image_7

来源：https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email

为了使您在电子邮件活动中的工作更加有效，我们开发了用于从您计算机上的文本中提取电子邮件的软件。 然后，使用自动电子邮件批量发件人，您可以进行群发邮件。 发送所有电子邮件后，使用电子邮件跟踪器软件方便地跟踪它们。

更多提示

  • 推荐的电子邮件宽度 - 600 像素（最大 650 像素）。 这是保证您的电子邮件信息将在每台设备和每台电子邮件客户端上正确显示的保证。
  • 推荐的电子邮件高度取决于内容长度，但最多不应超过 200 像素。
  • 推荐字体大小 – 14px，行距 1,5。
  • 文本颜色应与背景颜色形成对比。

说实话，没有精确的规则可以确定电子邮件元素的大小，因此您可以尝试形状和大小，但不要让模板对用户来说太不寻常和陌生。

如何使用 Atomic Mail Sender 在电子邮件中添加背景图像？

好吧，您了解了时事通讯的背景以及如何设置它们。 但是在什么工具中可以测试这些知识并获得可视化结果呢？ 将 Atomic Mail Sender 用于这些目的。 这个工具有一个内置的 HTML 编辑器。 因此，编写代码，直观地评估结果并立即从同一程序发送时事通讯。 让我们来看看。


电子邮件 html 背景图片 在 Atomic Mail Sender 中具有渐变背景的时事通讯
html电子邮件中的背景图片
Atomic Mail Sender 中的 HTML 编辑器

在 Atomic Mail Sender 程序中使用任何背景的代码和发送电子邮件。

背景图像是装饰电子邮件模板的好方法。 但不要仅用图像替换电子邮件内容。 不要创建完全基于图像的电子邮件。 这仍然是一个实际的电子邮件营销错误。 有时您打开一封电子邮件，您看到的只是带有红十字的正方形。 当然，我不允许所有发件人的图片，这意味着我肯定会错过这封电子邮件，即使这不是诈骗或垃圾邮件。 确保您的电子邮件在没有图像的情况下看起来内容丰富且有用。

使用 Atomic Mail Sender 免费电子邮件模板获取灵感，并创建带有闪亮背景图像的自有品牌电子邮件。 如果您在下面的评论中有任何问题，请告诉我们。

在我们的软件列表中，还有用于收集电话号码的电话号码提取器、用于查找有关电子邮件所有者的信息的 whois 电子邮件查找和用于检查电子邮件地址的电子邮件电子邮件验证器，使用在线电子邮件检查器进行在线操作。

想要创建彩色邮件并使用相同的工具发送它们？ 下载 Atomic Mail Sender 的测试版，并通过美观的时事通讯让收件人高兴！