AVIF 图片格式完全指南：比 WebP 再小 30% 的下一代图片格式

AVIF：图片压缩的新王者

AVIF（AV1 Image File Format）基于 AV1 视频编码技术，是 WebP 之后的下一代图片格式。

格式	编解码器	同质量体积	浏览器支持
JPEG	libjpeg	基准	全部
WebP	VP8	-25~35%	97%+
AVIF	AV1	-50~60%	92%+
PNG	deflate	3-5x JPEG	全部

关键数据：同等 SSIM 质量下，AVIF 比 WebP 再小 20-30%，比 JPEG 小 50-60%。

---

为什么 AVIF 这么小？

AV1 编码的优势

1. 帧内预测：利用图片内部的空间冗余
2. 变换编码：支持 4×4 到 64×64 的变换块
3. 量化矩阵：更精细的频率域量化
4. Film Grain 合成：分离胶片颗粒，用参数描述而非像素存储

有损 vs 无损

模式	体积对比	适用场景
有损 (CQ 30)	JPEG 的 40%	照片、截图
有损 (CQ 50)	JPEG 的 25%	缩略图、预览
无损	PNG 的 50-60%	图标、UI 素材
有损 + Alpha	PNG 的 30%	需透明度的照片

---

浏览器兼容性（2026 年）

浏览器	AVIF 支持	版本
Chrome	✅	85+
Firefox	✅	93+
Safari	✅	16+
Edge	✅	85+
Samsung Internet	✅	15+
IE	❌	不支持

覆盖率 92%+，可放心用于生产环境。

降级策略

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="照片" loading="lazy">
</picture>

浏览器按顺序选择第一个支持的格式。

---

使用工具库转换 AVIF

操作步骤

1. 打开 图片格式转换工具
2. 上传图片（支持 JPG、PNG、WebP、GIF）
3. 选择输出格式为 AVIF
4. 调整质量参数：
   • 高质量 (CQ 20-30)：几乎无损，体积减 40-50%
   • 均衡 (CQ 35-50)：适合大多数场景，体积减 50-60%
   • 高压缩 (CQ 55-70)：缩略图/预览，体积减 60-80%
5. 下载转换结果

转换效果参考

原图	原始大小	AVIF (CQ 35)	压缩率	SSIM
风景照片 (4K)	8.2MB	1.1MB	87%	0.95
人像照片	3.5MB	0.5MB	86%	0.94
UI 截图	1.2MB	0.15MB	88%	0.97
图标 (PNG+Alpha)	45KB	12KB	73%	1.00

---

AVIF 的特殊能力

Alpha 通道（透明度）

AVIF 支持有损 + Alpha 通道，这是 JPEG 不具备的：

PNG (透明) 45KB → AVIF (透明, CQ 35) 12KB → 体积减 73%

HDR / 宽色域

AVIF 支持 PQ 和 HLG 两种 HDR 传递函数，以及 BT.2020 宽色域：

特性	JPEG	WebP	AVIF
色深	8-bit	8-bit	8/10/12-bit
色域	sRGB	sRGB	sRGB / BT.2020
HDR	❌	❌	✅ PQ/HLG
Alpha	❌	✅	✅

动画

AVIF 支持动画序列（AVIS），类似动画 WebP：

动画 GIF 2.5MB → 动画 WebP 0.8MB → 动画 AVIF 0.5MB

---

命令行转换

使用 libavif (avifenc)

# 安装
# macOS: brew install libavif
# Ubuntu: apt install libavif-bin

# 基础转换
avifenc input.jpg output.avif

# 指定质量 (0-63, 越小质量越高)
avifenc -q 30 input.jpg output.avif

# 无损压缩
avifenc --lossless input.png output.avif

# 指定速度 (0-10, 越慢压缩越好)
avifenc -q 35 -s 6 input.jpg output.avif

使用 ImageMagick

# 转换为 AVIF
magick input.jpg -quality 65 output.avif

# 批量转换
magick mogrify -format avif -quality 65 *.jpg

---

Nginx 自动转换

# 动态将 JPEG 转为 AVIF 返回
map $http_accept $avif_suffix {
  "~*image/avif" ".avif";
}

server {
  location ~* ^/.+\.(png|jpg|jpeg)$ {
    add_header Vary Accept;
    try_files $uri$avif_suffix $uri =404;
  }
}

客户端支持 AVIF 时，自动返回 .avif 版本（需预生成）。

---

最佳实践

1. 使用 <picture> 降级：AVIF → WebP → JPEG 三级降级
2. 质量参数选 35-50：大多数场景的最佳平衡点
3. 预生成而非动态转换：构建时生成，避免服务端 CPU 开销
4. 照片用 AVIF，图标用 SVG：矢量图不适合 AVIF
5. Alpha 图片用 AVIF：替代 PNG，体积减 70%+
6. CDN 配置自动转换：Cloudflare Image Resizing / CloudFront 支持按 Accept 头自动返回 AVIF