114

如果我将图像(jpg 或 png)转换为 base64,那么它会更大,还是具有相同的大小?会大多少?

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

4

7 回答 7

154

大约会大 37%:

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

资料来源:http ://en.wikipedia.org/wiki/Base64

于 2012-07-09T20:13:00.597 回答
18

这是 David Calhoun对何时进行 base64 编码以及何时不进行的非常有用的概述。

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

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

于 2013-08-02T20:55:23.703 回答
18

在base64中它会更大。

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

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

于 2012-07-09T20:11:54.707 回答
12

答案是:视情况而定。

尽管 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 上更有效。
  • 编程:在动态生成的图像上,更容易在一个请求中交付它们以协调两个依赖请求。
  • 深层链接:如果您想阻止下载图像,从 HTML 页面中提取图像有点棘手。
于 2017-07-18T16:47:27.243 回答
9

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

请参阅有关数据 URI 方案的维基百科文章中的详细信息,其中指出:

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

于 2012-07-09T20:12:03.320 回答
3

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

于 2012-10-22T19:17:55.120 回答
0

转换为 base64 意味着:

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

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

这个6位序列有一个表示标准(如下图),由Base64定义

在此处输入图像描述

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

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

于 2021-08-07T15:32:37.903 回答