AVIF vs WebP
两者都能存照片，但取舍不同。以下是它们真正的差别，以及该怎么选。
一句话结论
AVIF 压得更狠，WebP 支持面更广、编码快得多。如果你的站点本来就做多格式回退，AVIF 放第一、WebP 放第二。
这个问题从哪来
这是本站唯一一个双方都称得上现代、结论也确实接近的对比。你不像面对 HEIC 那样是被逼到这里的 —— 你是在选，通常是为一个网站，通常是因为性能检测报告让你别再发 JPEG 了。有意思的地方在于，答案并不是简单的「选新的那个」。
逐项对比
| 属性 | AVIF | WebP |
|---|---|---|
| 压缩方式 | 有损 | 有损 |
| 透明通道 | 支持 | 支持 |
| 典型文件大小 | 约为同等 JPEG 的 40-55% | 约为同等 JPEG 的 65-75% |
| 兼容性 | 所有现代浏览器支持；部分老旧桌面软件尚未跟进 | 所有主流浏览器和绝大多数应用都支持 |
| 常见来源 | 为减小页面体积而优化的网站 | 为减小页面体积而优化的网站 |
真正的差别在哪
AVIF 确实更小，但不是每张图都更小
同等观感下，AVIF 通常比 WebP 再小 20~30%，而且差距在照片类内容上最明显 —— 天空、皮肤、虚化背景这种大片平滑渐变，它能压住不出色带。但在图标、UI 精灵图这类又小又锐利、色块平坦的素材上，优势几乎消失，WebP 有时反而更小。
编码开销差一个数量级
AVIF 编码很慢 —— 同一张图常常要花 WebP 十倍以上的 CPU 时间。在浏览器里的工具上，这直接体现为等待。在要处理上千张素材的构建流水线上，它会变成一条实打实的成本。WebP 的编码器成熟且快，这是它至今遍地都是的重要原因。
兼容性的下限是 Safari 15，不是泛指的「老浏览器」
WebP 从 2020 年起就进了所有主流浏览器。AVIF 来得晚，实际下限卡在 Safari —— 桌面版 16 才支持，iOS 也是 16。如果你的统计里 iOS 15 还占着可观比例，那就是需要走回退的那批人。2026 年对多数受众来说这个比例已经很小，但「很小」是应该查出来的数字，不是拍脑袋假设的。
该用哪个
这些情况用 AVIF
以照片为主、体积压力最大的场合 —— 首屏大图、相册、任何大到 25% 的节省能折算成几百 KB 的图。
这些情况用 WebP
要广兼容的分发、编码时间算成本的构建流水线，以及 AVIF 体现不出优势的小块纯色 UI 素材。
一个常见的坑
拿「同一个质量数值」比体积，是没有意义的
AVIF 编码器的质量 80 和 WebP 编码器的质量 80 是两套互不相干的刻度。那种把两边都设成 80 再报体积的对比，量的是编码器默认值，不是压缩效率。唯一公平的比法是在观感相同的前提下比，而这要么靠感知指标，要么靠你自己盯着那张图看。