什么是 AVIF 格式，比 WebP 更好吗

AVIF 的起源：AV1 视频技术的衍生

AVIF（AV1 Image File Format）是基于 AV1 视频编解码器的图片格式，由开放媒体联盟（Alliance for Open Media，AOMedia）于 2019 年发布。AV1 是由 Amazon、Apple、ARM、Cisco、Facebook、Google、Intel、Microsoft、Mozilla、Netflix 等主要科技公司联合开发的开源、免版税视频编解码器，旨在取代 HEVC/H.265。AVIF 将 AV1 的单帧提取为静态图片格式，继承了 AV1 优秀的压缩效率。

AVIF 的发布背景很重要：HEIC（基于 HEVC 的图片格式，Apple iPhone 默认格式）虽然也有极高的压缩效率，但受专利限制，开源项目和 Web 标准无法自由使用。AVIF（基于免版税的 AV1）解决了这个问题，为 Web 提供了一个高效、开放、无专利限制的下一代图片格式。

AVIF vs WebP vs JPG：压缩效率对比

在相同视觉质量下，AVIF 的压缩效率显著优于 WebP 和 JPG。根据多项独立测试的平均结果：与 JPG（质量 85）相比，相同视觉质量的 AVIF 文件约小 50%；与 WebP（质量 80）相比，相同视觉质量的 AVIF 文件约小 20–30%。这意味着如果一张 JPG 是 100KB，同等质量的 WebP 约 70KB，而 AVIF 约 50KB。

AVIF 在低质量设置（高压缩）下的优势尤为突出。JPG 在低质量时会产生明显的块状伪影，而 AVIF 即使在很高的压缩率下也能保持相对平滑、自然的外观，这使 AVIF 特别适合需要极小文件大小的场景（如移动端缩略图、社交媒体预览图）。

AVIF 的独特功能

AVIF 不仅仅是"压缩更好的 WebP"，它还支持一些 JPG 和 WebP 不具备的高级功能：（1）10 位和 12 位颜色深度（JPG/PNG/WebP 为 8 位），提供更精细的色彩过渡，消除渐变中的色带（banding）问题；（2）HDR（高动态范围）内容，可以存储高亮度、高对比度的 HDR 图片；（3）宽色域（Wide Color Gamut，WCG），支持 Display P3 等宽色域色彩空间；（4）动画支持（类似 WebP 动画）；（5）透明度（Alpha 通道）。

AVIF 的浏览器支持现状

截至 2024 年，AVIF 的浏览器支持已经相当不错，但仍不如 WebP 广泛：Chrome（桌面和移动）自版本 85（2020 年）完整支持；Firefox 自版本 93（2021 年）完整支持；Safari 自版本 16（macOS Ventura，2022 年）和 iOS 16 支持；Edge（Chromium）自版本 121（2024 年）完整支持。总体支持率约为 90–93%，这意味着仍有约 7–10% 的用户使用不支持 AVIF 的浏览器（主要是旧版 Safari）。

AVIF 的主要缺点

AVIF 并非完美。最大的缺点是编码速度极慢：编码一张高质量的 AVIF 图片，比编码同等质量的 JPG 慢 10–100 倍，比 WebP 慢 5–20 倍。这使得实时编码（如用户上传图片时动态转换）不实际，需要预先批量编码。解码速度也比 JPG 稍慢，虽然差距随着硬件加速的普及正在缩小。

AVIF 的编码速度问题可以通过调整编码速度参数来缓解（牺牲一些压缩效率换取更快的编码速度），但即使在最快模式下，AVIF 的编码速度也远低于 WebP。另外，AVIF 的工具链生态系统还不如 WebP 成熟，某些图片处理软件和 CDN 对 AVIF 的支持还不完整。

何时使用 AVIF vs WebP

使用 AVIF 的场景：大型照片为主的网站（新闻摄影、摄影作品集），压缩效率的提升最有价值；需要 HDR 或宽色域图片展示的内容；Netflix、YouTube Thumbnails 等有大量图片服务需求的平台（它们有资源进行批量 AVIF 编码）。坚持使用 WebP 的场景：需要快速转换（如用户上传的图片实时处理）；工具链对 AVIF 支持不完整；需要更广泛的浏览器兼容性（特别是 iOS 15 及以下用户占比较高时）。

三级格式策略：AVIF + WebP + JPG

<!-- 最优的三级格式策略 -->
<!-- Optimal three-tier format strategy -->
<picture>
  <!-- 最佳压缩，约90%浏览器支持 -->
  <source srcset="photo.avif" type="image/avif">
  <!-- 良好压缩，约97%浏览器支持 -->
  <source srcset="photo.webp" type="image/webp">
  <!-- 通用回退，100%支持 -->
  <img src="photo.jpg" alt="Photo" loading="lazy">
</picture>

这个三级策略让支持 AVIF 的浏览器（约 90%）获得最优质的体验，支持 WebP 但不支持 AVIF 的浏览器（约 7%）使用 WebP，而剩余约 3% 使用 JPG。这是目前生产环境中兼顾性能和兼容性的最佳实践。