各浏览器支持版本线
截至 2026 年,全球范围内 AVIF 可用率已超过 93%(caniuse 数据),不支持的主要残留是 iOS 15 及更早的老 iPhone 与旧版安卓。国内环境下微信内打开网页的场景需要特别留意 iOS 老设备。
| 浏览器 | 最低支持版本 | 发布时间 | 备注 |
|---|---|---|---|
| Chrome / Edge | 85+ | 2020 年 8 月 | 安卓同步支持 |
| Firefox | 93+ | 2021 年 10 月 | 动图 113+ |
| Safari (macOS/iOS) | 16.4+ | 2023 年 3 月 | iOS 16 早期版本不支持 |
| 微信内置浏览器 | 跟随系统 WebView | — | 安卓新机基本支持,iOS 看 Safari |
AVIF 的实际收益
以本站基准实测(画质 75):相机照片 AVIF 比 JPEG 小约 30%-39%,带透明通道的插画类图片甚至能小 80% 以上。对图片流量占比高的页面(相册、电商、资讯头图),切换到 AVIF 能直接降低 LCP 时间。
代价是编码速度慢:同参数下 AVIF 编码耗时通常是 WebP 的 3-8 倍。对用户实时上传压缩的场景影响有限(秒级),但批量构建管线里要预留时间。
安全上线:picture 回退方案
不要让不支持 AVIF 的用户看到裂图。用 picture 元素声明回退链,浏览器自动选择第一个能解码的格式:
- <picture><source srcset="img.avif" type="image/avif"><source srcset="img.webp" type="image/webp"><img src="img.jpg" alt="..."></picture>
- 三层回退覆盖了从最新浏览器到任何老设备的全部情况
- 代价是要维护三个版本的文件——用工具从同一张原图分别导出即可
决策建议
- 新站点、技术受众为主:直接上 AVIF + WebP 回退,收益最大
- 大众用户、微信场景多:保留 JPG 兜底的三层方案
- 个人图片分享:先压成 WebP(100% 现代浏览器支持),有体积洁癖再上 AVIF
- 老 iPhone 用户占比可在网站统计后台查 User-Agent 再定
把图片转成 AVIF 对比体积
AVIF 压缩