先来一个牛人制作的各种图片的清晰度对比工具：
https://jakearchibald.com/2020/avif-has-landed/demos/compare/?show=f1&img=/c/f1-good-a14c8cc5.avif
JPEG XL、AVIF 是下一代图片格式的最终选手，唯一的变量是尚在实验阶段的 WebP 的下一代格式 WebP 2。之后很长一段时间应该不会有新的参赛选手了。
图片格式由不同的利益团体主导。
JPEG XL 背后是国际标准化组织 (ISO)和 国际电信联盟 (ITU)
AVIF 是 Netflix 和 AOMedia（开放媒体联盟）
WebP 2 是谷歌。虽然主导方各异，但新格式的特性目标基本都一致：
- 更高的有损压缩率
- 支持无损压缩
- 广色域
- HDR
- 图层覆盖 (overlays) 允许图像具有多个层。可以在照片背景上保持文本和形状图层的有不同的压缩率，这对广告、UI 这类图片非常有用，可以避免照片观感可以接受但文字糊成一片的情况。
- 动画
- Alpha 透明通道
- 并行编解码
总结
| * | AVIF | JPEG XL | WebP 2 |
|---|---|---|---|
| 最大色深 | 12 位 | 24 位 | 12 位 |
| 最大图像尺寸 | 65536 x 65536 | 单侧 10 亿（几乎无限） | ？ |
| 无损压缩 | ☆☆☆ | ★★★ | ★★★ |
| 高质量有损压缩 | ★★★ | ★★☆ | ★★☆ |
| 低质量有损压缩 | ★★★ | ★☆☆ | ★★☆ |
| 图层 | 支持 | 支持 | 不支持 |
| 编码速度 | ☆☆☆ | ★★★ | ☆☆☆ |
| 浏览器支持 | Chrome、Firefox | Chrome 需手动开启 | – |
- AVIF 有损压缩效果最好，无损压缩非常糟糕。编码速度很慢。
- JPEG XL 无损压缩效果最好，有损压缩较 AVIF 有些许差距。编码速度快。
- WebP 2 无损压缩效果优秀，有损压缩的上限达到了 AVIF 的水平，但下限很低，不稳定。编码速度很慢。
最好的方案是把 AVIF 用在有损压缩，在照片、纹理、广告等场景使用。把 JPEG XL 用在无损压缩，在 UI 设计、存档等场景使用。非常看好 JPEG XL ，虽然它的有损压缩不如 AVIF，但比起 JPEG 来说有了非常大的进步，而其无损压缩又有优势，并且在最大图像尺寸、色彩深度上有决定性的优势（在传统的摄影、印刷领域）。另外还是唯一可以无损转换旧有 JPEG 图片到新格式的格式，迁移旧数据不需有所顾虑。只待浏览器支持度能赶上 AVIF 了。
到底选哪个？结论？
AVIF 确实在大多数情况下都有很好的表现，而且与 JPEG 或 PNG 相比，WebP 具有更好的支持和更好的压缩性能。因此，当你优化网站上的图片时，毫无疑问你应该考虑 WebP 的支持。