2012-07-09 234 views
58

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

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

+1

唯一一次你会想要做这样的事情是,如果你被限制为纯文本资源,并且出于某种原因无法使用原始图像格式。 – Wug 2012-07-09 20:13:02

+0

这里有一个很好的答案:http://stackoverflow.com/questions/1533113/calculate-the-size-to-a-base-64-encoded-message – Steed 2013-04-04 13:28:22

+0

base64使deeplinks不可能。这可以是一个优点。 – damoeb 2015-02-25 14:23:25

回答

88

这将是大约37%的情况:

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

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

+16

不大于137%,占原始大小的137%:-)大37%(根据您的来源)。 – 2012-07-09 20:14:08

+2

我会说这几乎是原始尺寸的4/3。 – kiwixz 2014-08-28 17:16:34

+0

将图像转换为base64的图像大小是否有任何限制? – 151291 2016-12-13 12:50:34

4

它会在base64中变大。

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

这意味着编码后的图像将大约增加25%,并且还会增加填充的常量开销。

5

将图像编码为base64会使其大约增加30%。

见维基百科文章有关Data URI scheme,在那里它指出在细节:

Base64编码数据的URI是在尺寸上大于它们的二进制等效1/3大。 (然而,如果HTTP服务器压缩使用gzip响应这种开销减少到2-3%)

2

它肯定会花费你更多的空间&带宽,如果你想使用base64编码图像。但是,如果您的网站有很多小图片,您可以通过将图片编码为base64并将其放入html中来缩短页面加载时间。通过这种方式,客户端浏览器不需要与图像进行很多连接,但是将会使用html。

+0

这将不会是一个问题,一旦HTTP 2真的通过。 – Philip 2016-11-23 16:29:46

+0

@Philip确实如此,但我确实喜欢HTML文件中包含所有资源的可移植性因素。这将有助于在拥有众多网络的地区进行移动网页缓存。 – aalaap 2017-04-18 11:47:55

+0

@aalaap问题是如果你在页面上做了一个更改,那么你需要重新加载包括图像在内的所有内容。如果你的资产是分开的,那么你可以在这些资产上有更高的年龄,并且它将被存储在缓存中,并且不会在其自身的页面上缓存过期时重新加载。 – Philip 2017-04-19 15:05:03

11

这里是大卫卡尔霍恩的a really helpful overview of when to base64 encode and when not to

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

外卖 =编码和gzip你的用户界面图标等有一些优势,但对于较大的图像这样做是不明智的。

0

的base64图像的大小

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

实施例:

周围64KB 48KB的图像需要为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图像可能会节省带宽。
  • 不要base64编码SVG图像,因为gzip在XML上比在base64上更有效。
  • 编程:在动态生成的图像上,更容易在一个请求中传递它们以协调两个相关请求。
  • 深层链接:如果要防止下载图像,从HTML页面提取图像有点麻烦。

所以答案是:这取决于。