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

时间 2019-11-17

标签前端性能优化之路图片相关栏目系统性能繁體版

原文原文链接

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

PNG8——256色 + 支持透明html

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

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

不一样格式的图片经常使用的业务场景浏览器

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

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

webp压缩程度更好，在ios webview有兼容性问题，安卓所有网站

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

图片压缩的几种方法htm

css雪碧图：把网站上用到的一些图片整合到一张单独的图片中，能够减小网站的HTTP请求数量，缺点是整合的图片比较大的时候加载比较慢，若是这张图片没加载出来的时候，里面全部须要的图片都会显示不出来

Image inline：将图片的内容内嵌到html中，能够减小网站的HTTP请求数量

webp