前端性能优化：图片相关优化笔记
图片相关基础知识
有损压缩 —— 一张JPG图片的解析过程
Raw Image Data -> Color Transform -> Down sampling -> Forward DCT -> Quantization -> Encoding
源数据 -> 颜色转换 -> 颜色采样（区分高频低频颜色变化） -> 对高频颜色进行压缩DCT -> 质量控制 -> 编码
png8/png24/png32之间的区别
- png8 256色 支持透明
- png24 2^24色 不支持透明
- png32 2^24色 支持透明
颜色选择需要看具体的业务场景 文件大小 色彩丰富程度
每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要
不同格式图片常用的业务场景
jpg有损压缩，压缩率高，不支持透明 大部分不需要透明图片的业务场景
png支持透明，浏览器兼容性好 大部分需要透明图片的业务场景
webp压缩程度更好，在ios webview有兼容性问题 安卓全部
svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景 图片样式相对简单的业务场景
图片压缩
CSS雪碧图
减少HTTP请求数(1) 整张图较大时也会存在加载慢的现象
Image inline base64
将图片的内容内嵌到html中 -> 减少网站的HTTP请求数(0)
在安卓下使用webp
webp 优势在于更好的图像压缩压缩算法带来的更小图片体积。同时具备有损和无损压缩模式、alpha透明及动画特性，在jpg和png上转化效果都很优秀、统一和稳定