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

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

PNG8——256色 + 支持透明

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

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

 

 

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

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

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

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

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

 

 

图片压缩的几种方法

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

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

webp