使用 base64 编码图像的优缺点 [关闭]

Posted 2023-03-05

【中文标题】使用 base64 编码图像的优缺点 [关闭]

【英文标题】：Advantages and disadvantages of using base64 encoded images [closed]

【发布时间】：2012-07-28 23:40:19

【问题描述】：

我正在考虑为我正在开发的网站使用 base64 编码图像以优化加载时间。

无论如何，在开始之前，我想知道：这样做的优点和缺点是什么？

目前，我没有看到任何缺点，但我也注意到它不是一种经常使用的技术，这让我怀疑我是否没有错过什么。

谷歌搜索了这个主题后，我没有找到任何明确的东西，所以我决定在这里问。

【问题讨论】：

不确定您要优化什么。你认为 base64 会比 PNG 或 JPEG 压缩更多吗？从逻辑上讲，您最终会得到四倍大的图像，因此改进不大。

更高的图像尺寸，但我没有第二次请求获取图片。在 html 内部发送。所以没有标题了。

我也发现这很有用，但我仍在思考。 davidbcalhoun.com/2011/…

@zozo 非常相似的问题：***.com/questions/1124149/… 可能，你可以在这里得到一个确切的解决方案..

【参考方案1】：

HTML 页面的响应时间也会增加，因为图像在正常情况下会异步加载。即使图像加载较晚，您也可以开始看到文字。

如果仅在 CDN 中缓存媒体，则会失去 CDN 的另一个优势

这种优势将会丧失。

【讨论】：

如果只是通过base64上传图片你怎么看？因为我想和 json 对象一起发送。

【参考方案2】：

How much faster is it to use inline/base64 images for a web site than just linking to the hard file? 的这篇文章中已经提到了以下一些缺点

大多数形式的缓存都被打败了，如果经常查看图像可能会造成很大的伤害 - 例如，显示在每个页面上的徽标，通常可以由浏览器缓存。 更多 CPU 使用率。

【讨论】：

关于缓存...页面可以自己缓存。这里的缺点是每次都处理数据。

同意，但在徽标示例的情况下，网站上可能会有不同的许多页面，这些页面在第一次访问时不会被缓存，但所有这些页面上缓存的徽标图像都可以每次都从第一页的缓存中使用。

@zozo 如果页面上的内容更新，则内容和图像都需要重新下载和解析。

【参考方案3】：

符合 MIME 的 Base64 编码二进制数据的实际长度是 通常约为原始数据长度的 137%，尽管时间很短 消息的开销可能会高得多，因为 标题。非常粗略，Base64 编码的二进制数据的最终大小是 等于原始数据大小的 1.37 倍 + 814 字节（对于标头）。

也就是说，解码后数据的大小可以用这个公式来近似：

bytes = (string_length(encoded_string) - 814) / 1.37

来源：http://en.wikipedia.org/wiki/Base64#MIME

【参考方案4】：

它只对非常小的图像有用。 Base64 编码文件比原始文件大。优点在于不必打开另一个连接并向服务器发出 HTTP 请求以获取图像。这种优势很快就会消失，因此只有大量非常小的单个图像才有优势。

【讨论】：

一些企业 CMS（如 RedDot）也需要 CSS 图像来“连接”——一个 4 次点击过程。根据您的平台，这可能会节省时间。

您好@PhonicUK 先生，您能解释一下为什么我们使用数据 url 时不需要另一个连接吗？毕竟我们需要下载图像才能将其更改为base 64。如果您能解释一下，我将不胜感激。谢谢！

因为数据嵌入在页面本身中。

此外，Google 不会索引 base64 编码图像，导致 SEO 优化不佳。