全部文章
解析2026/04/24

AVIF 是什么？下一代图片格式完全解读

AVIF 是最新获得广泛浏览器支持的图片格式，比 WebP 和 JPEG 更小、画质更好。本文讲清它的原理、兼容性以及适合的使用场景。

AVIF 是最近一波获得主流浏览器广泛支持的图片格式，相比老格式带来了实打实的压缩提升。如果你最近开始注意到网页上出现 .avif 文件，这篇就是给你的。

AVIF 是什么？

AVIF 全称 AV1 Image File Format。它基于由 Alliance for Open Media（成员包括 Google、Apple、Mozilla、Netflix、Amazon 等）开发的 AV1 视频编码。

AVIF 在 2019 年成为正式标准，2022–2023 年间在主流浏览器中获得广泛支持。

AVIF 和 JPG、WebP 比较

AVIF 最大的优势是压缩效率。同等视觉画质下，AVIF 通常：

  • 比 JPEG 小约 50%
  • 比 WebP 小约 20%

意思是页面加载更快、带宽成本更低，画质却看不出下降。

JPEGWebPAVIF
压缩方式有损有损 / 无损有损 / 无损
透明否支持支持
HDR 支持否否支持
同画质体积最大中等最小
浏览器支持通用~97%~95%

AVIF 还支持完整 alpha 通道（和 PNG、WebP 一样）以及 HDR 和宽色域——JPEG 在这两块都吃力。

浏览器支持

截至 2024 年，AVIF 在以下浏览器获得支持：

  • Chrome 85+
  • Firefox 93+
  • Safari 16+
  • Edge 121+

为兼容老浏览器，常见做法是用 HTML 的 <picture> 标签同时提供 AVIF 和 JPEG / WebP 兜底：

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

什么时候该用 AVIF？

适合 AVIF 的场景：

  • 你在做或优化一个网站，想把图片体积压到尽可能小
  • 你的构建流程能自动生成 AVIF（Next.js、Astro、Cloudflare Images 和大多数 CDN 都支持）
  • 你要分发产品图、Hero 图，或任何会显著影响加载速度的图片

继续用 JPG 或 WebP 的场景：

  • 你需要广泛兼容性，又不想写兜底代码
  • 图片要通过邮件、即时通讯、不支持 AVIF 的软件分享
  • 编码速度重要——AVIF 的编码比 JPEG 慢得多

AVIF 互转工具

下面这些都在浏览器内完成，不上传文件：

全部文章