版权声明：欢迎转载，转载请注明出处 https://blog.csdn.net/Nate__River/article/details/82181917
前端性能优化学习笔记二
图片的区别
jpg：有损压缩，压缩率高，不支持透明
png：支持透明，浏览器兼容好
- png8 —— 256色 + 支持透明
- png24 —— 2^24色 + 不支持透明
- png32 —— 2^24色 + 支持透明
webp：压缩程度更好，在ios webview有兼容性问题
svg：矢量图，代码内嵌，相对较小，图片样式相对简单的场景
CSS雪碧图
把一个页面中用到的图标整合到一张单独的图片中以达到减少网站的request请求
Image inline
将更小的图片转换为base64内嵌到html当中
矢量图iconfont
使用iconfont中的图标
图标解决方案
对于一个项目，我们会选择一个iconfont图标库全局使用，而某些图标是矢量图无法实现的，这时候我们根据情况使用base64或者雪碧图的解决方案