将图像转换为 Base64 而不是简单地使用图像本身是否存在“收益递减规律”？答案

【问题标题】：Is there a "law of diminishing returns" for converting images to Base64 as opposed to simply using the images themselves?将图像转换为 Base64 而不是简单地使用图像本身是否存在“收益递减规律”？
【发布时间】：2020-02-12 08:40:09
【问题描述】：

假设我的网站上有一些图标（32x32、64x64、128x128 等），那么将它们转换为 Base64 是有意义的，对吧？

现在假设我在我的网站上使用了一些 2MB、3MB、4MB 甚至更大的高分辨率图像。将这些较大的图像转换为 Base64 是否有意义，或者只是继续将它们用作 .jpg/.png/.gif/etc. 是否“更聪明”？

如果有这样的“法则”、“经验法则”等，那到底是什么底线？

编辑：虽然这篇文章被标记为重复，但链接的“原创”来自 10 多年前；自那时以来，浏览器技术、计算机和网络本身都发生了重大变化。当今技术的答案是什么？

【问题讨论】：

Base 64 encode vs loading an image file的可能重复
为什么这样做有意义？浏览器不缓存 Base64 字符串，而文件是。
你在 base64 中使用它们的目的是什么？嵌入页面？
@RobMac 是的...嵌入页面中。
你介意我把这个问题改写成“递减规律吗

标签： html base64

【解决方案1】：

问题的答案是肯定的，这取决于。

如果我们将问题改写为：收益递减规律是否适用于使用 base64 在页面中嵌入图像？

a) 是的，法律适用

b) 这取决于：图像数量和大小，以及您的设置（即 HTTP (HTTP/2?) 连接类型等）

原因是更多的图像需要更多的连接意味着更多的握手，除非您使用保持活动连接或 HTTP/2 流。如果图像更大并且需要更多的计算才能从 base64 转换回二进制（加上解压缩），那么节省的带宽会带来 CPU 开销。

一般来说，如果您有很多图像（例如图标），您可以嵌入为 base64。但在这种情况下，您还有以下选择：

a) Image Atlas：将所有小图像转换为单个图像（一次加载）并仅显示您在页面中需要的部分。

b) 转换为替代格式，例如字体或 SVG，然后再次呈现您需要的内容。示例：Open Iconic。

【讨论】：

感谢您提供的信息丰富的回答！我想问一下关于使用精灵表（图像图集）的问题，感谢您将其包含在您的回答中。