前端性能优化 --- 图片优化

前端性能优化学习笔记二

图片的区别

jpg：有损压缩，压缩率高，不支持透明
png：支持透明，浏览器兼容好

• png8 —— 256色 + 支持透明
• png24 —— 2^24色 + 不支持透明
• png32 —— 2^24色 + 支持透明

webp：压缩程度更好，在ios webview有兼容性问题
svg：矢量图，代码内嵌，相对较小，图片样式相对简单的场景

CSS雪碧图

把一个页面中用到的图标整合到一张单独的图片中以达到减少网站的request请求

Image inline

将更小的图片转换为base64内嵌到html当中

矢量图iconfont

使用iconfont中的图标

图标解决方案

对于一个项目，我们会选择一个iconfont图标库全局使用，而某些图标是矢量图无法实现的，这时候我们根据情况使用base64或者雪碧图的解决方案