AVIF 格式详解 — 比 WebP 小 30%，但要靠 `<picture>` 才能上生产
Tomoda Hinata工具作者与维护者发布于 2026年4月26日约 4 分钟阅读
AVIF（AV1 Image File Format）是把 AV1 视频关键帧装进 HEIF 容器，相同观感比 WebP 还小 20–30%。但 Outlook 桌面、Edge 邮件、部分老 Android Webview、macOS Mail 内联预览仍然解不出来 —— 单独使用不安全，要在 `<picture>` 里给出 WebP 兜底。
本指南使用的工具
AVIF 在技术上是什么？
AVIF 把一帧 AV1 帧内编码图像（I 帧）放进 HEIF 容器（与 iPhone HEIC 同容器）。AV1 是 VP9、HEVC 的开源继任者，由 AOM 设计为免授权费。视频级编码工具集（可变块大小、先进变换、高级熵编码）远比 JPG（1992 年的 DCT）和 WebP（VP8 帧内）丰富，这就是再省 20–30% 的来源。
浏览器支持 — AVIF 在哪里失败？
原生解码：Chrome 85、Firefox 93、Safari 16.4、Edge 121。2026 全球流量约 92%。剩下 8%：Outlook 桌面（Word 渲染，无 AVIF 解码器）、Edge 邮件预览、未升级 Webview 的老 Android 应用、macOS 13 之前的 Mail.app、长尾的小众/物联网浏览器。
`<picture>` 兜底写法
第一行 `<source srcset="hero.avif" type="image/avif">`，第二行 `<source srcset="hero.webp" type="image/webp">`，最后 `<img src="hero.jpg" alt="...">`。浏览器自上而下评估，挑第一个能解的；`<img>` 是最终兜底。无需 JS。
AVIF 何时值得？
三个甜点：高流量内容站的首屏（节省字节直接降 LCP）、电商商品画廊（累计带宽）、摄影作品集（小体积下的画质）。三个不值得：低流量博客（编码成本盖过节省）、邮件模板（Outlook 看不到）、临时社交上传（平台再编码）。
编码成本与构建 vs 运行时
Q60 编码大约是同输入 JPG Q82 的 10×。100 张商品图工作站 2–3 分钟。10 秒预算的边缘函数会超时。在构建时或后台压，不要放在用户上传路径。解码很快，主流浏览器 50ms 内即可。
操作步骤
约 2 分钟选源文件
尽量用原图（PNG/RAW/TIFF）。只有 JPG 也行 —— AVIF 对中等 JPEG 输入比 WebP 友好。
打开 AVIF 转换器
拖入文件。默认质量 60 是照片胜过 WebP 的甜点。
编码
每张 5–15 秒 —— 比 WebP 慢，但比本地装 cwebp+cavif CLI 省事。
接 `<picture>` 兜底
站点上：AVIF 优先，WebP 兜底，JPG 作 `<img>` 源。
| 格式 | 文件大小 | 编码耗时（M2） | 2026 浏览器覆盖 |
|---|---|---|---|
| JPG 质量 82 | 245 KB | 0.1 秒 | 100% |
| WebP 质量 82 | 165 KB | 0.4 秒 | 98% |
| AVIF 质量 60 | 115 KB | 4.2 秒 | 92% |
常见问题
AVIF 支持透明？
支持，包括 10 位 alpha。
有动画 AVIF 吗？
有（AVIS），但兼容性不如静态 AVIF；动画推荐 WebP。
支持 HDR？
支持 —— 10/12 位 AVIF 可携带 HDR10 元数据。
怎么提供多个分辨率？
`<picture>` 配每个 `<source>` 的 srcset/sizes。
AVIF 会替代 JPG 吗？
可预见的未来不会。JPG 的全场景兼容无可替代。
编码慢是浏览器的问题？
不是。AV1 编码本身就贵。
立即试用
Ultra-light images with the modern AVIF format
AVIF Converter本文包含 AI 翻译，如发现错误欢迎告知。