前端性能优化成神之路—图片相关的优化

图片PNG8/PNG24/PNG32之间的区别

PNG8——256色 + 支持透明

PNG24——2^24色 + 不支持透明

PNG32——2^24色 + 支持透明

不同格式的图片常用的业务场景

jpg有损压缩,压缩率高,不支持透明,大部分不需要透明图片的业务场景

png支持透明,浏览器兼容好,大部分需要透明图片的业务场景

webp压缩程度更好,在ios webview有兼容性问题,安卓全部

svg矢量图,代码内嵌,相对较小,图片样式相对简单的场景,比如一些字体图标等

扫描二维码关注公众号,回复: 5643062 查看本文章

图片压缩的几种方法

css雪碧图:把网站上用到的一些图片整合到一张单独的图片中,可以减少网站的HTTP请求数量,缺点是整合的图片比较大的时候加载比较慢,如果这张图片没加载出来的时候,里面所有需要的图片都会显示不出来

Image inline:将图片的内容内嵌到html中,可以减少网站的HTTP请求数量

webp

猜你喜欢

转载自www.cnblogs.com/LO-ME/p/10589690.html