前端开发中,使用base64图片的弊端是什么?

小天天天天    前端    999+ 次    2022-03-28 10:28:17


弊端主要不在于 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 后两者几乎没有区别。


如果你觉得本篇文章对您有帮助,请打赏作者

上一篇: 一文搞懂高并发性能指标:QPS、TPS、RT、并发数、吞吐量

下一篇: CentOS-8中“Failed to download metadata for repo 'AppStream'”的解决方法

最新评论

暂无评论

热门文章

最新评论

网站数据

网站文章数:481

今日UV/PV/IP:1/1/1

昨日UV/PV/IP:23/30 /23

TOP