AVIF vs WebP vs JPEG：实测结论

2MB的JPEG转成WebP只要480KB，再转成AVIF直接掉到310KB。在视觉观感几乎没区别的情况下，体积差了这么多，这对我这种对页面加载速度有强迫症的人来说简直是救星。

为了搞清楚到底怎么选，我拿了100张图（50张实拍照片 + 50张截图/设计稿）跑了一遍压力测试，结果挺有意思：

• 照片类（JPEG源）： AVIF 确实是目前的压缩之王。同样视觉质量下，AVIF 比 JPEG 小了 60% 以上，比 WebP 也要小一大截。如果一个电商页面有6张图，用 AVIF 能比 JPEG 少加载 3MB 左右，在 4G 网络下这直接决定了用户是秒开还是跳出。
• 截图/图形类（PNG源）： 这块比较纠结。虽然 WebP 和 AVIF 能把体积压到极低，但如果你追求像素级精准（比如带细小文字的 UI 稿），无损压缩的 PNG 依然是最稳的。如果只是普通插图，WebP q80 足够了，体积能缩减 7 倍。

不过 AVIF 也有个很明显的坑：编码速度慢得惊人。

我实测了一下，单张图压缩，JPEG 只要 0.3s，AVIF 却要 2.5s。如果是批量处理，AVIF 的耗时是 WebP 的 3 倍，是 JPEG 的 8 倍。

这就导致了一个实操上的选择逻辑：
如果是静态网站，在构建阶段（Build time）预先压好 AVIF 没问题，因为用户端加载快就行；但如果是处理用户实时上传的 UGC 内容，WebP 是更合理的平衡点，否则服务器 CPU 压力太大。

对于追求极致性能的页面，建议用 <picture> 标签做多格式回退，让浏览器自动选最合适的：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="description">
</picture>

总的来说，目前的最佳实践就是：追求兼容性和速度选 WebP，追求极致体积且能接受慢速编码选 AVIF。