按用途选择合适的图片格式
发布于 · 更新于 阅读约 1 分钟
JPG、PNG、WebP 和 AVIF 适用的图片并不相同。选哪个取决于图片的内容：照片、带文字的截图，还是透明背景的标志。
参考资料怎么说
根据 MDN 文档，JPEG 适合照片而不适合线条清晰的图画，PNG 保留每个像素的精确值，适合截图、图表和标志，WebP 的压缩效果优于前两者并支持透明，AVIF 压缩得更小，同样支持透明。
同样的图片，四种格式
测试使用三张自制图片：一幅接近照片的 2,400 × 1,600 像素场景、一张 1,400 × 900 像素的截图和一个 900 × 900 像素的透明标志，三张起初都是 PNG。
| 图片 | 原始 PNG | JPG | WebP |
|---|---|---|---|
| 照片 | 2,36 MB | 1,08 MB | 1,02 MB |
| 截图 | 67 KB | 115 KB | 49 KB |
| 透明标志 | 9 KB | 35 KB（白色背景） | 14 KB（保留透明） |
可以得出什么
对照片来说，JPG 和 WebP 能把大小减掉一半以上。对截图或标志来说，JPG 比原来的 PNG 还大，参考资料也不建议在边缘清晰的图像上使用它：PNG 或 WebP 更合适。把 PNG 再转成 PNG 并不会变小：照片从 2.36 MB 变成了 3.28 MB。
AVIF
AVIF 导出取决于浏览器。不支持时，工具会如实告知，并且不生成文件。
验证
- 把得到的大小与原始大小对照一下。
- 放大查看文字边缘和渐变。
- 保留原始图片。
想知道哪种格式到处都能打开，请参阅 哪种图片格式到处都能打开。