前言
60%的网站流量来自图片，图片优化可以大幅影响网站流量。
一、现有web图片格式
| 图片格式 | 支持透明 | 动画支持 | 压缩方式 | 浏览器支持 | 相对原图大小 | 适应场景 |
|---|---|---|---|---|---|---|
| baseline-jpeg | 不支持 | 不支持 | 有损 | 所有 | 由画质决定 | 所有通用场景 |
| progressive-jpeg | 不支持 | 不支持 | 有损 | 所有 | 由画质决定 | 所有通用场景, 渐进式加载 |
| gif | 支持 | 支持 | 无损 | 所有 | 由帧数和每帧图片大小决定 | 简单颜色，动画 |
| png | 支持 | 不支持 | 无损 | 所有 | 由png色值位数决定 | 需要透明时 |
| webp | 支持 | 不支持 | 有损 | Chrome、Opera | 由压缩率决定 | 复杂颜色及形状，浏览器平台可预知 |
| apng | 支持 | 支持 | 无损 | Firefox、Safari、iOS Safari | 由每帧图片决定 | 需要半透明效果的动画 |
| svg | 支持 | 支持 | 无损 | 所有(IE8以上) | 由内容和特效复杂度决定 | 简单图形，需要良好的放缩体验，需要动态控制图片特效 |
| bpg | 支持 | 支持 | 有损 | 不支持，需要js解码 | 由画质决定 | jpeg上需要极限优化的场景 |