在 base64中编码图像的效果是什么?

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

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

145017 次浏览

在64号基地会更大。

Base64 uses 6 bits per byte to encode data, whereas binary uses 8 bits per byte. Also, there is a little padding overhead with Base64. Not all bits are used with Base64 because it was developed in the first place to encode binary data on systems that can only correctly process non-binary data.

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

将图像编码到 base64会使其大约30% 。

查看维基百科关于 数据 URI 方案的文章,其中说:

Base64编码的数据 URI 的大小比它们的二进制等价物大1/3。(然而,如果 HTTP 服务器使用 gzip 压缩响应,这个开销将降低到2-3%)

It will be approximately 37% larger:

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

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

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

这是大卫 · 卡尔霍恩的 关于何时进行 base64编码和何时不进行 base64编码的非常有用的概述

Basic answer = gzipped base64 encoded files will be roughly comparable in file size to standard binary (jpg/png). Gzip'd binary files will have a smaller file size.

编码和压缩 UI 图标等有一些好处,但是对于较大的图像这样做是不明智的。

答案是: 看情况。

Although base64-images are larger, there a few conditions where base64 is the better choice.

Base64-图像的大小

Base64使用64个不同的字符,这是2 ^ 6。所以 base64每8位字符存储6位。所以未转换数据到基数64的比例是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 (有时称为“ flate”) ,甚至可能在大小方面取得胜利。但这取决于图像内容。
  • HTTP1.1的请求开销: 特别是对于大量 cookie,每个请求的开销很容易达到几千字节。嵌入 base64图像可以节省带宽。
  • 不要对 SVG 图像进行 base64编码,因为 gzip 在 XML 上比 base64更有效。
  • 编程: 在动态生成的映像上,更容易在一个请求中交付它们,以协调两个相关的请求。
  • Deeplinks: If you want to prevent downloading the image, it is a little bit trickier to extract an image from an HTML page.

转换为 base64的简单意思是:

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

注意: 一切都只是二进制数据。所有的字符串、数字等都只是你记忆中的二进制数据。我们只做 How you read it你把这个读数映射到了什么

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

enter image description here

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

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