WebP vs AVIF：下一代图片格式完整比较

如果 WebP 已经让 PNG 和 JPG 显得过时，那么 AVIF 正在对 WebP 做同样的事情。AVIF 是目前压缩效率最高的主流图片格式之一，但它也带来了新的相容性挑战。本文深入比较 WebP 和 AVIF 的每个面向，帮助你决定是否该跟上这波技术演进。

什么是 AVIF？

AVIF（AV1 Image File Format）是基于 AV1 视讯编码技术衍生而来的静态图片格式，由开放媒体联盟（Alliance for Open Media，AOM）在 2019 年正式发布。AOM 的成员包括 Google、Apple、Mozilla、Netflix、Microsoft 等科技巨头，这使得 AVIF 从一开始就拥有强大的行业支持。

AV1 编码器在视讯领域已被证明是压缩效率的顶尖选手。AVIF 将这套先进技术应用于静态图片，结果令人印象深刻。

AVIF 的压缩率优势

研究数据显示，AVIF 的有损版本比同等 WebP 平均小 20%；与 JPG 相比，差距可达 50% 以上。无损版本的 AVIF 也比无损 WebP 更小，尽管差距相对较小。

在实际测试中：

• 一张 1920×1080 的高品质照片：JPG 约 500 KB → WebP 约 380 KB → AVIF 约 280 KB
• 同等感知品质下，AVIF 的资料量往往只有 JPG 的一半甚至更少
• 在低品质设定下，AVIF 比 WebP 更能抵抗压缩伪影，尤其在细节丰富的区域

AVIF 优异压缩率的关键在于其更大的变换块大小（最大支援 128×128 像素的编码块）和更先进的运动补偿技术（虽然对静态图片而言不直接适用，但衍生的技术确实更有效率）。

HDR 与色彩深度支援

这是 AVIF 相对于 WebP 的一个重要差异化优势。AVIF 原生支援：

• HDR（高动态范围）：能记录更广的亮度范围，在支援 HDR 的显示器上呈现更丰富的视觉层次
• 10 位元和 12 位元色彩深度：相比 WebP 和 JPG 的 8 位元，能呈现更多色阶，有效避免渐层区域的色带（banding）问题
• 广色域（Wide Color Gamut）：支援 P3 和 Rec. 2020 色彩空间，适合高端显示设备

WebP 则仅支援 8 位元色彩深度和标准动态范围。对于大多数一般网页图片，这个差距不明显；但对于摄影展示、高端电商产品图、影视相关网站，AVIF 的色彩优势相当显着。

透明度支援

AVIF 和 WebP 都完整支援 Alpha 通道透明度。在透明图形的压缩效率上，AVIF 同样占有优势——相同视觉品质下，AVIF 的透明背景图通常比 WebP 更小。

浏览器相容性差距

这是目前选择 AVIF 的最大障碍。截至 2024 年，各浏览器的支援状况如下：

• Chrome：85 版起支援（2020 年 8 月）✓
• Firefox：93 版起支援（2021 年 10 月）✓
• Safari：16.4 版起支援（2023 年 3 月）✓（较晚加入）
• Edge：121 版起支援（2024 年 1 月）✓
• Internet Explorer：不支援 ✗

整体全球支援率约为 92–93%，低于 WebP 的 97%。特别是 Safari 直到 2023 年才开始支援，意味着使用 iOS 或较旧 macOS 的用户可能看不到 AVIF 图片。

另一个问题是编码速度：AVIF 的编码比 WebP 慢得多，这对需要即时生成或动态调整图片的应用程式是一个实际挑战。解码速度也较慢，在低端设备上可能造成可察觉的延迟。

实际使用建议

考虑到相容性问题，最稳健的策略是同时提供多种格式：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述文字">
</picture>

这样的设定让支援 AVIF 的浏览器获得最佳体验，不支援 AVIF 但支援 WebP 的浏览器退回 WebP，完全不支援现代格式的则使用 JPG 作为保底。

各使用场景的格式建议

• 高流量电商网站：值得投入资源同时生成 WebP 和 AVIF 版本，搭配 <picture> 元素分发
• 摄影和艺廊网站：AVIF 的高色彩深度和 HDR 支援使其特别有吸引力
• 一般部落格和内容网站：WebP 已足够，AVIF 的边际收益不一定值得增加工作流程复杂度
• 设计素材储存：继续使用 PNG，AVIF 在创意工具中的支援仍不稳定
• CDN 和图片服务：Cloudflare、Fastly 等主要 CDN 已支援自动提供 AVIF，启用成本很低

未来趋势

从技术演进的角度看，AVIF 代表了静态图片格式的未来方向。随着 Safari 在 2023 年完成支援，主要浏览器的相容性缺口已大幅缩小。编码速度问题也在持续改善——新版 libavif 函式库的速度已比早期版本快数倍。

预计在未来 2–3 年内，AVIF 的全球支援率将追上 WebP 目前的水准。现在开始在基础设施中支援 AVIF，是具有前瞻性的投资。但在相容性完全成熟之前，WebP 仍是更安全的主力选择。

值得一提的是，JPEG XL（JXL）也是另一个竞争格式，在某些指标上甚至超越 AVIF。但 Chrome 在 2022 年撤回了对 JXL 的支援，使其前景不明朗。目前，WebP + AVIF 的组合是最务实的策略。

总结

AVIF 在技术规格上全面领先 WebP，但相容性和工具链成熟度仍是制约因素。最佳策略是：以 WebP 作为广泛相容的主力格式，在支援条件允许时叠加 AVIF。对于追求极致效能的网站，现在就可以开始部署 AVIF；对于一般应用，WebP 已是非常优秀的选择。

在浏览器里直接完成，档案不会离开你的电脑：图片格式转换