关于html5:为什么图片转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 }$$那么长。

总结

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

援用

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

http://www.ruanyifeng.com/blo...