WebP 已经足够普及，AVIF 的压缩率更高但编码慢得多。选哪个不是技术先进性的问题，而是三个具体变量的权衡：内容类型、编码成本、兼容兜底。

一、内容类型决定收益

  • 照片、渐变多的合成图：AVIF 优势最大，同画质常比 JPEG 小 50% 以上，比 WebP 再小 20%–30%。
  • UI 截图、带文字的图：WebP 和 AVIF 都能无损，但 AVIF 的无损模式编码极慢，收益不明显，PNG 依然够用。
  • 小尺寸图标：直接用 SVG。位图格式再怎么优化，也比不过几 KB 的矢量。
  • 需要二次编辑的素材：保留 PNG / 原始格式。有损格式一旦压过，后期没法恢复。

二、编码耗时是隐性成本

同样一张 2000px 的照片，WebP 编码通常几十毫秒，AVIF 可能要几百毫秒到几秒。如果图片是用户上传后即时生成的，AVIF 会让接口明显变慢；如果是离线预处理后上传到 CDN，那点耗时完全可以接受。

所以判断标准很简单：图片在服务端按需生成，选 WebP；图片提前处理好放 CDN，可以上 AVIF。

三、兜底方案必须提前写

用 picture 标签按顺序回退，浏览器会挑第一个认识的格式，不会额外请求：

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="描述" width="1200" height="800" loading="lazy">
</picture>

注意两点：一是每个 source 都要写明 type，否则浏览器会盲目下载第一个；二是 img 上写清 width 和 height，否则加载时会跳版，这个体验问题在移动端尤其明显。

透明通道的坑

JPG 不支持透明，把带透明区域的 PNG 转成 JPG，透明部分会变成黑色或白色（取决于编码器）。需要透明就用 WebP 或 PNG。如果只是想要「白底」，转之前先合成一张白底再编码，不要依赖浏览器默认行为。

实践建议：主图用 picture 给 AVIF / WebP / JPG 三档，界面截图和图标保留 PNG 与 SVG，不要为了「统一格式」把图标也换成 AVIF。

需要快速对比体积效果，可以把同一张图分别用格式转换导出 WebP 和 JPG，看实际字节数再决定。