弊端主要不在于 base64 编码后比原图要大,
而是因为如果把大图片编码到 html / css 中,会造成后者体积明显增加,明显影响网页的打开速度。
如果用外链图片的话,图片可以在页面渲染完成后继续加载,不会造成阻塞。
如果 base64 是被编码到 css/js 中,是可以缓存的,因为 css/js 文件可以缓存。
使用 base64 的另外一个弊端是 IE 的兼容性问题。IE 8 以下不支持 data url,IE 8 开始支持 data url,却有大小限制,32k(未测试)。
还有一个问题是,如果构建工具比较落后(或者没有构建工具),手动插入 base64 是很蛋疼的,编辑器会卡到哭。
--------------------------------------
下面是我对 base64 + gzip 后文件体积做的实验:
图片信息:JPEG,质量 60%,1000*667,221 KB.
首先使用 base64 命令编码:
base64 IMGTEST.jpg > IMGTEST.jpg.txt
得到 txt 文件大小:294 KB
再使用 gzip 压缩:
gzip IMGTEST.jpg.txt
得到 IMGTEST.jpg.txt.gz 文件大小:222 KB
直接 gzip 压缩原图:
gzip IMGTEST.jpg
得到 IMGTEST2.jpg.gz 文件大小:220 KB
base64 文本文件相比原文件而言,大了一些 (1/3),而经过 gzip 后两者几乎没有区别。