web浏览器常见图片
| 缩写 | 详解 | 优点 | 缺点 | 浏览器支持（caniuse.com/ 查询图片支持度） | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | IE | Firefox | Opera | Safari | ||||||||
| APNG | juejin.cn/post/684490… | 支持全彩和透明，无杂边问题 | 浏览器支持稍不足 | ✔️ | ✔️ | ❌ | ✔️ | ✔️ | ✔️ | ||||
| AVIF | zhuanlan.zhihu.com/p/355256489 | 性能好；压缩效果好；支持更高色深、动画帧、透明度； | 浏览器支持度低；不支持渐进式渲染注； | ✔️ | ❌ | ❌ | ✔️（只支持静态图） | ✔️ | ✔️ | ||||
| GIF | 图片大小较小 | 压缩效果不加；不支持透明度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |||||
| JPEG | 联合图像专家小组图像 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ||||||
| PNG | 精确再现原图像 | 图片较大 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |||||
| WebP | 压缩效果好；支持更高色深和透明度 | 不支持渐进式渲染 | ✔️ | ✔️ | ❌ | ✔️ | ✔️ | ✔️ |
渐进式渲染：juejin.cn/post/701631…
选择合适的图像格式
| 使用场景 | 最佳选择 | 回退方案 | 理由 |
|---|---|---|---|
| 照片 | WebP 或 JPEG | JPEG | webP压缩效果好蛋浏览器兼容性差 |
| 图标 | SVG、无损 WebP 或 PNG | PNG | 图标小，使用无损格式避免小图丢失细节 |
| 截图 | 无损 WebP 或 PNG；如果不担心压缩伪影，则使用 JPEG 文件 | PNG 或 JPEG；GIF 用于颜色数较少的屏幕截图 | 无损格式的截图更利于文字清晰展现 |
| 示意图、绘图和图表 | SVG | PNG |
提供回退图像： 元素实现图片的兼容性回退。元素定义图像的显示位置及默认版本回退。
<picture>
<source srcset="diagram.svg" type="image/svg+xml" />
<source srcset="diagram.png" type="image/png" />
<img src="diagram.gif" width="620" height="540" alt="数据通道示意图" />
</picture>
