如何成功地将图像嵌入 HTML 以在 webmail 客户端中显示？答案

【问题标题】：How to successfully embed images in HTML for display in webmail clients?如何成功地将图像嵌入 HTML 以在 webmail 客户端中显示？
【发布时间】：2017-08-07 17:37:22
【问题描述】：

我正在尝试使用以 base 64 数据 URL 编码的图像在 HTML 中进行签名。这是一个例子：

<img src="data:image/png;base64,iVBORw0KGgoAAAAN...kJggg==">

它在 Mac 或 Thunderbird 等邮件软件中运行良好，但不适用于 gmail、outlook、roundcube、hotmail 等 webmail ...

你知道如何让它工作吗？我真的很想把那些图片直接放在源代码中，这样更实用。

【问题讨论】：

由于我使用的是 base 64 图像，这里是代码（有点长）：pastebin.com/atqBMzi9 我还删除了所有信息，如链接、名称等，因为这是私有的。编辑：我正在使用透明图像，并使用 css 样式修改背景图像。
这可能更适合webapps.stackexchange.com 这不是一个编程问题，您只是想在网络邮件签名中使用原始 HTML。对于 Gmail，它没有必要，因为为签名提供了所见即所得的编辑器。
好的，但我怎样才能使它成为适用于每个接收者网络邮件的东西？
接收者？这是一个完全不同的问题。
好吧，我正在为一家公司做这个签名。他们在 MAC 上使用 Mail，所以它现在可以为他们工作，但是他们向很多人发送邮件，他们不知道所有客户都使用哪种邮件服务。所以我希望这个签名兼容所有邮件服务:)

标签： html format base64 webmail

【解决方案1】：

简单的答案？

你不能。 Gmail、outlook 等将忽略 base64 图像。

Look at this site to learn more about this

因此，根据我们的结果，显然不值得在您的电子邮件中使用嵌入图像。您将要做的就是强迫人们下载他们无法查看的编码图像。

【讨论】：

哦，废话：（我会尝试另一种方式。我只是把源网址然后上传我的图片到我的服务器上。
还是这样吗？

【解决方案2】：

我使用的是嵌入式 SVG，原因如下：

看起来不错（矢量图形非常适合用于徽标）。
没有附件（即使是作为所谓的隐藏电子邮件附件邮寄的图像在许多电子邮件客户端中也是可见的）。
没有额外的 http 请求（离线工作，下载后）。
没有“是否要加载图像..”问题。
我没关系，如果它不显示在 Gmail 和 Outlook 中。这是一种优雅的退化。

但如果您真的想在 Gmail 和 Outlook 中显示图像，则需要通过 HTTP 加载这些图像。

来自 CSS-tricks 的人在电子邮件中提供了一个很好的 SVG 指南：https://css-tricks.com/a-guide-on-svg-support-in-email/

最终解决方案如下：

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}

<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">

但我个人不喜欢这样，因为我不希望客户端询问用户是否要加载额外的资源。

【讨论】：