为什么图片转Base64会多出30%的数据量

背景

由于最近在准备🐧厂的面试,被问及是否知道为什么url-loader将图片转换成Base64后,会有增加33%的数据量。因此,我开始从晚上搜集这方面的资料,但遗憾的是,大多的博文的关注点基本都是在实际应用(Webpack,前端优化…)或者是Base64如何进行编码,没有很清晰的阐述为什么会多出33%的数据量的过程和原因。因此,我希望可以通过这篇博文补充这方面的讯息。

为什么会多出30%的数据

当我们把3个Byte的数据转换成为Base64的字符时,根据Base64的规则,3个Byte的字符会转换成24个二进制位。Base64一位只有6个位二进制位,因此会产生4个Byte的字符。

但是现代计算机系统当中,一个字符要有8个二进制位来存储因此,4个字符对应的6个二进制位都要补充2个0,来转换成8个二进制位的字符存储到计算机当中。因此3个Byte(24位二进制位)的数据要用4个Byte(32位二进制位)来存储。并且32位中只有24位是用来存储数据的,剩下8位都是无用的补充位。

因此我们可以很简单的计算出输出:输入 = 4:3 (33% 数据冗余). 与此同时,我们同样可以总结出,输入n Bytes,输出就有(下图)那么长。

{\textstyle 4\left\lceil {\frac {n}{3}}\right\rceil }

总结

核心思路,原来三个Byte的数据,转换成Base64后,要用四个Byte来存储。多了1/3(33%)的数据要存储,所以数据量会增多。

把照片打包进bundle.js中,看来还是要因地制宜的。url-loader默认数值应该是8192bit(1024 byte),增大33%后就是增加了300byte。因此,url-loader主要还是用于打包只有几个像素的小文件比较适合。不会对整体的加载速度有过多的影响。

引用

https://en.wikipedia.org/wiki/Base64

http://www.ruanyifeng.com/blog/2008/06/base64.html

作者: 7gugu

I'm a phper!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注