多次使用 base64 嵌入图像答案

【问题标题】：Use a base64 embedded image multiple times多次使用 base64 嵌入图像
【发布时间】：2011-11-02 19:39:28
【问题描述】：

我在一个 HTML 文档中有几个小图像，我希望它们可以移植，例如发送电子邮件时仍然有效。我使用以下，效果很好：

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

问题是，我想在文档中多次使用同一张图片，但又不想重复整个 base64 数据字符串。我在电子邮件中看到数据被编码一次，但引用了很多。 HTML 可以吗？

【问题讨论】：

标签： html base64

【解决方案1】：

如果你可以使用 CSS，你可以把它作为一个类放在那里。

然后只需将类添加到您想要的元素中。

【讨论】：

如果可以避免的话，我不想使用 CSS（仅仅是因为需要进行大量的重新设计）。但是，这是一个选项，我发现这个问题有帮助：stackoverflow.com/questions/1207190/embedding-base64-images
您无需重新设计。您可以仅将 css 用于图像。类似 .repeatimage { background:url(data:...);显示：内联块；宽度：10px； height:10px;}，在 html 中使用。不适用于所有电子邮件客户端，但数据 url 将在更少的电子邮件客户端中工作。

【解决方案2】：

将您的网络服务器配置为 zgip (/deflate) 您的内容。 Deflate 应该检测到重复的字符串并压缩到与仅包含一次时大致相同的大小。这样你就不会浪费带宽。不适用于电子邮件或文件系统中的纯 html 文件。

【讨论】：