用base64编码图像有啥效果？

Posted 2023-02-23

【中文标题】用base64编码图像有啥效果？

【英文标题】：What is the effect of encoding an image in base64?用base64编码图像有什么效果？

【发布时间】：2012-07-09 06:44:46

【问题描述】：

如果我将图像（jpg 或 png）转换为 base64，那么它会更大，还是具有相同的大小？会大多少？

是否建议在我的网站上使用 base64 编码的图像？

【问题讨论】：

您唯一想做的事情是如果您被限制为纯文本资源，并且由于某种原因无法使用原始图像格式。

这里有一个很好的答案：***.com/questions/1533113/…

base64 使深度链接成为不可能。这可能是一个加号。

@Wug - 知道这是一个迟到的回复，而且事情已经发生了变化，但绝对是您可以通过发送 bas64 来提高性能的时候。通过带有 base64 编码图像（小图像）的 websocket 发送消息比单独请求每个图像的性能更高。

这是个好问题。我一直在寻找“保存二进制图像还是 base64 编码？”的好答案？我找到了几个很好的答案like this one

【参考方案1】：

大约会大 37%：

非常粗略，Base64 编码的二进制数据的最终大小等于原始数据大小的 1.37 倍

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

【讨论】：

不，不是大 137%，是原始大小的 137% :-) 大 37%（根据您的来源）。

我会说这几乎是原始大小的 4/3。

图片转base64有大小限制吗？

@Blender 但在我的情况下，当我将 70kb 位图转换为字符串时，它变为 500kb。它不是 37%。我已将 5mb 图像压缩为 70kb，然后将该压缩图像转换为变为 500kb 的字符串.

@KJEjava48：你是如何将其转换为字符串的？

【参考方案2】：

这是 David Calhoun 的 a really helpful overview of when to base64 encode and when not to。

基本答案 = gzip 压缩的 base64 编码文件的文件大小与标准二进制文件 (jpg/png) 大致相当。 Gzip 的二进制文件将具有更小的文件大小。

外卖 = 对 UI 图标等进行编码和 gzip 压缩有一些优势，但对于较大的图像这样做是不明智的。

【参考方案3】：

base64 会更大。

Base64 使用每字节 6 位来编码数据，而二进制使用每字节 8 位。此外，Base64 有一点填充开销。并非所有位都与 Base64 一起使用，因为它最初是为了在只能正确处理非二进制数据的系统上对二进制数据进行编码而开发的。

这意味着编码后的图像将大 33%-36% 左右（33% 来自不使用每字节 2 位，加上可能的填充占剩余 3%）。

【讨论】：

8/6 是 1.333，而不是 1.25。正如此处其他答案所指出的，1.25 不正确

@ishahak 是的，已更正。我确实对接受的答案发表了评论，应该仔细检查我自己的答案。

【参考方案4】：

答案是：视情况而定。

虽然 base64 图像更大，但在某些情况下 base64 是更好的选择。

base64 图像的大小

Base64 使用 64 个不同的字符，即 2^6。所以 base64 每 8 位字符存储 6 位。所以从未转换的数据到base64数据的比例是6/8。这不是精确的计算，而是粗略的估计。

例子：

一张 48kb 的图片需要大约 64kb 作为 base64 转换后的图片。

计算：(48 / 6) * 8 = 64

Linux 系统上的简单 CLI 计算器：

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

或者使用图片：

$ cat my.png|base64|wc -c

Base64 图像和网站

这个问题更难回答。一般来说，使用base64的图像越大，意义越小。但请考虑以下几点：

html 文件或 CSS 文件中的许多嵌入图像可以具有相似的字符串。对于 PNG，您经常会发现重复的“A”字符。使用 gzip（有时称为“deflate”），甚至可能在大小上取得胜利。但这取决于图片内容。 HTTP1.1 的请求开销：特别是在使用大量 cookie 的情况下，每个请求很容易产生几千字节的开销。嵌入 base64 图像可能会节省带宽。 不要对 SVG 图像进行 base64 编码，因为 gzip 在 XML 上比在 base64 上更有效。 编程：在动态生成的图像上，更容易在一个请求中交付它们以协调两个相关请求。 Deeplinks：如果要阻止下载图像，从 HTML 页面中提取图像会有点棘手。

【参考方案5】：

将图像编码为 base64 会使其大 30% 左右。

请参阅***文章中有关 Data URI scheme 的详细信息，其中指出：

Base64 编码的数据 URI 的大小比对应的二进制文件大 1/3。 （不过，如果 HTTP 服务器使用 gzip 压缩响应，这个开销会减少到 2-3%）

【参考方案6】：

如果您想使用 base64 编码图像，肯定会花费更多空间和带宽。但是，如果您的网站有很多小图像，您可以通过将图像编码为 base64 并将它们放入 html 来减少页面加载时间。这样，客户端浏览器就不需要对图像进行大量连接，而是将它们保存在 html 中。

【讨论】：

然而，一旦 HTTP 2 真正通过，这将不是问题。

@Philip 没错，但我确实喜欢将所有资源都包含在 HTML 文件中的可移植性因素。这将有助于在网络参差不齐的地区进行移动网络缓存。

@aalaap 问题在于，如果您在页面上进行了一次更改，那么您需要重新加载包括图像在内的所有内容。如果您将资产分开，您可以在这些资产上拥有更高的年龄，它将存储在缓存中，并且不会在缓存过期时重新加载它自己的页面。

【参考方案7】：

转换为base64的意思是：

解析二进制数据，以 6 位块读取，然后将其转换为某种表示形式

注意：一切都只是二进制数据。所有的字符串、数字等都只是你记忆中的二进制数据。 你如何阅读它和你把阅读映射到什么是我们所做的一切。

这个6位序列有一个表示标准（如下图），由Base64定义

如果传入流是 000000 -> A，​000001 -> B，依此类推。

现在字符本身的表示需要 8 位。因此，您的数据大小已增加到原始值的 4/3，因为您现在每个字符多占用 2 位。