解析发布于 更新于
AVIF 是什么?下一代图片格式完全解读
了解 AVIF 的格式能力、压缩差异,以及分享或发布前需要检查的兼容性条件。
AVIF 是基于 AV1 的图片格式。如果你在网站上看到 .avif 文件,下面介绍其格式能力,以及使用前应该做的检查。
AVIF 是什么?
AVIF 全称 AV1 Image File Format。它基于由 Alliance for Open Media(成员包括 Google、Apple、Mozilla、Netflix、Amazon 等)开发的 AV1 视频编码。
AOM 规范定义了格式能力,但并非每个编码器或查看器都实现了所有能力。
AVIF 和 JPG、WebP 比较
AVIF 可能减小体积,但结果取决于图像内容、编码器和参数。请在相同尺寸下比较下载文件并检查细节,不保证固定压缩比例或不可见的画质损失。
| JPEG | WebP | AVIF | |
|---|---|---|---|
| 压缩方式 | 有损 | 有损 / 无损 | 有损 / 无损 |
| 透明 | 否 | 支持 | 支持 |
| HDR 支持 | 否 | 否 | 支持 |
| 体积 | 取决于图像和参数 | 取决于图像和参数 | 取决于图像和参数 |
| 浏览器支持 | 检查目标查看器 | 检查目标查看器 | 检查目标查看器 |
AVIF 还支持完整 alpha 通道(和 PNG、WebP 一样)以及 HDR 和宽色域——JPEG 在这两块都吃力。
浏览器支持
请在目标浏览器、操作系统和应用中测试 AVIF。支持静态图不代表所有 HDR 或动画变体都可用;用代表性文件验证,并为不支持的客户端提供兜底。
为兼容老浏览器,常见做法是用 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 互转工具
下面这些都在浏览器内完成,不上传文件:
- JPG 转 AVIF —— 把现有照片转到现代格式
- PNG 转 AVIF —— 输出有损静态 AVIF,解码后的像素可能改变。需要像素精确一致时保留 PNG。
- AVIF 转 JPG —— 转回通用兼容格式
- AVIF 转 WebP —— 给还没用 AVIF 的网站做兜底
来源与维护
来源核对日期:2026-10-30。格式能力及应用支持不等于本站输出能力,请同时查看工具当前的选项与限制。