@程序员，一文掌握 Web 应用中的图片优化技巧！(17)_：@程序员

1、让css文件的体积失去控制

当你把图片转换为Base64字符串之后，字符串的体积一般会比原图更大，一般会多出接近3成的大小，如果你一个页面中有20张平均大小为50kb的图片，转它们为Base64后，你的CSS文件将可能增大1.2mb的大小。这样将严重阻碍浏览器的关键渲染路径：

CSS文件本身就是渲染阻塞资源，浏览器首次加载时如果没有全部下载和解析完CSS内容就无法进行渲染树的构建，而Base64的嵌入则是雪上加霜，这将把原先浏览器可以进行优化的图片异步加载，变成首屏渲染的阻塞和延迟。

或许有人会说，Webpack的url-loader可以根据图片大小决定是否转为Base64(一般是小于10kb的图片)，但你也应该担心如果页面中有100张小于10kb的图片时，会给CSS文件增加多少体积。

2、让浏览器的资源缓存策略功亏一篑

假设你的Base64URL会被你的应用多次复用，本来浏览器可以直接从本地缓存取出的图片，换成Base64URL，将造成应用中多个页面重复下载1.3倍大小的文本，假设一张图片是100kb大小，被你的应用使用了10次，那么造成的流量浪费将是:(100 * 1.3 * 10) - 100 = 1200kb。