结论先行：AVIF 是基于 AV1 视频编码的下一代图片格式，比 JPEG 小 50%、比 WebP 小 20%，同时支持无损压缩、HDR、宽色域和透明通道。以一张 1920×1080 照片为例，JPEG 质量 85 约 420KB，AVIF 同等画质仅 210KB。AVIF 采用 AV1 帧内编码技术（分区预测+变换编码+环路滤波），压缩效率远超 JPEG 的 DCT。截至 2026 年，Chrome、Firefox、Safari、Edge 均已原生支持 AVIF，全球浏览器覆盖率约 96%。下面从技术原理讲起，给出四格式实测对比和迁移指南。
如果你对 Web 图片格式对比还不太熟悉，建议先阅读WebP vs PNG vs JPG：Web 图片格式怎么选？。
一、AVIF是什么
AVIF（AV1 Image File Format）是开放媒体联盟（AOMedia）于 2019 年发布的图片格式，基于 AV1 视频编码器的帧内编码技术。AV1 本身是为下一代视频（8K/120fps）设计的开源编码标准，免授权费，其帧内编码工具同样适用于静态图像压缩。AVIF 就是把 AV1 的帧内编码封装为独立的图片容器格式。
| 特性 | AVIF | WebP | JPEG | PNG |
|---|---|---|---|---|
| 发布年份 | 2019 | 2010 | 1992 | 1996 |
| 底层编码 | AV1帧内 | VP8帧内 | DCT | DEFLATE |
| 有损压缩 | 支持 | 支持 | 支持 | 不支持 |
| 无损压缩 | 支持 | 支持 | 不支持 | 支持 |
| 透明通道 | 支持 | 支持 | 不支持 | 支持 |
| HDR/宽色域 | 支持(12位) | 不支持(8位) | 不支持(8位) | 不支持(8/16位) |
| 动画支持 | 支持 | 支持 | 不支持 | APNG扩展 |
| 授权费 | 免费开源 | 免费开源 | 免费 | 免费 |
AVIF 相比上一代 WebP 的核心进步在于：支持 12 位色深和 HDR（高动态范围），WebP 仅支持 8 位 SDR；压缩率更高（同等画质小 10%–30%）；支持更丰富的编码工具（方向性预测、块分割更灵活）。代价是编码速度较慢——AVIF 编码耗时约为 WebP 的 3–5 倍。
二、AVIF技术原理详解
AVIF 的压缩流水线分三个核心阶段：分区预测、变换编码、环路滤波。每个阶段都继承了 AV1 视频编码的先进工具，这是 AVIF 压缩效率远超 JPEG 的根本原因。
1. 分区预测
AV1 将图像划分为编码块（最大 128×128），每个块可以递归细分为更小的子块（最小 4×4），根据图像内容自适应选择分区方式。预测编码用已重建的像素预测当前块，只编码残差（实际值与预测值的差异）。
| 预测类型 | 原理 | 适用区域 | vs JPEG |
|---|---|---|---|
| 帧内预测 | 用相邻已编码像素预测 | 平滑区域/渐变 | JPEG无预测，全量编码 |
| 方向性预测 | 56种方向角度预测 | 边缘/纹理方向 | JPEG无方向预测 |
| 调色板预测 | 用颜色调色板索引 | 文字/图标/动画 | JPEG无此工具 |
| 块复制 | 复制图像内其他区域 | 重复纹理 | JPEG无此工具 |
2. 变换编码
预测后的残差用变换编码从空间域转到频域，量化高频系数实现压缩。AV1 支持多种变换类型，比 JPEG 的单一 DCT 更灵活。
| 变换类型 | 块大小 | 适用场景 | 优势 |
|---|---|---|---|
| DCT | 4×4到64×64 | 通用 | 经典变换，能量集中 |
| ADST(非对称离散正弦变换) | 4×4到32×32 | 方向性边缘 | 对边缘残差更优 |
| 恒等变换 | 4×4到32×32 | 无损/低损 | 跳过变换，直接量化 |
| 递归变换 | 组合 | 复杂纹理 | 两级变换提升能量集中 |
3. 环路滤波
量化后的重建图像会产生块效应和振铃效应，AV1 用多级环路滤波修复这些伪影。这是 AVIF 在低码率下画质明显优于 JPEG 的关键。
| 滤波阶段 | 作用 | 处理顺序 | 效果 |
|---|---|---|---|
| CDEF(方向性去块滤波) | 去除块边界伪影 | 第1级 | 平滑块边界 |
| LR(环路恢复滤波) | 维纳滤波/自引导滤波 | 第2级 | 恢复细节纹理 |
| 超分辨率重建 | 从低分辨率帧重建 | 第3级 | 提升高频细节 |
关于图片压缩的整体方案，可以参考图片压缩指南：JPG/PNG/WebP 格式对比。
三、实战案例：四格式实测对比
用同一张测试图片对比 AVIF、WebP、JPEG、PNG 四种格式的体积、画质和编码耗时。测试样本：1920×1080 自然风景照片，24 位真彩色，原始 BMP 约 5.93MB。
文档特征： 1920×1080，24位彩色，含天空渐变、树叶纹理、建筑边缘，原始 BMP 5.93MB。
体积与画质对比（目标 SSIM 0.92）：
| 格式 | 参数 | 文件体积 | vs原始 | SSIM画质 | vs JPEG |
|---|---|---|---|---|---|
| PNG(无损) | DEFLATE最高 | 4.82MB | -18.7% | 1.000 | +938% |
| JPEG | 质量85 | 420KB | -92.9% | 0.921 | 基准 |
| WebP | 质量80 | 298KB | -95.0% | 0.923 | -29.0% |
| AVIF | 质量55(CRF) | 210KB | -96.5% | 0.925 | -50.0% |
结果： 在同等画质（SSIM 0.92+）下，AVIF 仅 210KB，比 JPEG 小 50%，比 WebP 小 29.5%。PNG 无损画质最高但体积最大（4.82MB），不适合照片类内容。AVIF 在树叶纹理和天空渐变区域表现尤其突出——JPEG 在低码率下会出现明显色块，AVIF 几乎无可见伪影。
编码耗时对比：
| 格式 | 编码耗时 | 解码耗时 | 速度评价 | 适用场景 |
|---|---|---|---|---|
| JPEG | 18ms | 8ms | 极快 | 实时编码 |
| WebP | 65ms | 15ms | 快 | Web实时 |
| AVIF | 280ms | 22ms | 慢(编码)/快(解码) | 预生成 |
| PNG | 120ms | 12ms | 中 | 无损场景 |
AVIF 的编码耗时是 JPEG 的 15 倍、WebP 的 4 倍，这是因为 AV1 的分区预测和变换选择需要大量率失真优化计算。但 AVIF 的解码速度仅比 JPEG 慢 2 倍——浏览端体验影响很小。建议 AVIF 图片在服务端预生成（构建时编码），而非实时编码。
四、浏览器兼容性与迁移策略
AVIF 的浏览器兼容性在 2023 年后已基本成熟，但仍需为旧浏览器提供回退方案。下表列出主流浏览器的支持情况。
| 浏览器 | 支持版本 | 发布时间 | 全球占比 | 支持状态 |
|---|---|---|---|---|
| Chrome | 85+ | 2020年9月 | 65% | 原生支持 |
| Safari | 16.4+ | 2023年3月 | 18% | 原生支持 |
| Edge | 92+ | 2021年 | 5% | 原生支持 |
| Firefox | 93+ | 2021年10月 | 3% | 原生支持 |
| Opera | 71+ | 2020年 | 2% | 原生支持 |
| IE | 不支持 | — | <1% | 需回退 |
全球浏览器对 AVIF 的支持率约 96%，不支持的仅剩 IE 和极旧版本的浏览器。迁移策略推荐用 HTML5 的 picture 标签实现渐进增强。
| 迁移方案 | 实现方式 | 兼容性 | 维护成本 | 推荐度 |
|---|---|---|---|---|
| picture标签 | source多格式+img回退 | 100% | 低 | ★★★★★ |
| 仅AVIF | 直接用avif | 96% | 极低 | ★★★☆☆ |
| Accept头协商 | 服务端按Accept返回 | 100% | 中 | ★★★★☆ |
| 仅JPEG | 不迁移 | 100% | 极低 | ★☆☆☆☆ |
推荐的 picture 标签写法：
<picture><source srcset="photo.avif" type="image/avif"><source srcset="photo.webp" type="image/webp"><img src="photo.jpg" alt="风景照"></picture>
浏览器会按优先级选择第一个支持的格式：支持 AVIF 就用 AVIF（最小），否则尝试 WebP，最后回退 JPEG。这样既享受 AVIF 的压缩优势，又保证旧浏览器正常显示。关于 Web 图片优化的完整方案，可以参考Web 图片优化：性能提升 50% 实战。
五、不同场景的格式选型建议
AVIF 虽好但不是所有场景都适合，不同场景的图片格式选型需要综合考虑压缩率、兼容性、编码速度和功能需求。
| 场景 | 推荐格式 | 理由 | 体积参考 |
|---|---|---|---|
| 电商商品图 | AVIF(主)+JPEG(回退) | 追求极致体积，提升加载速度 | JPEG 420KB→AVIF 210KB |
| 新闻资讯 | WebP(主)+JPEG(回退) | 编码快，兼容性好 | JPEG 420KB→WebP 298KB |
| HDR摄影 | AVIF | 唯一支持12位HDR的主流格式 | 无损HDR仅AVIF可选 |
| UI图标/截图 | PNG | 无损要求，边缘锐利 | 不影响体积 |
| 社交媒体 | AVIF或WebP | 体积小，分享快 | 两种均可 |
| 邮件嵌入 | JPEG | 邮件客户端兼容性优先 | 不推荐AVIF(兼容差) |
| 视频封面 | AVIF | AV1视频天然配套 | 比JPEG小50% |
| 实时生成(验证码等) | JPEG | 编码速度优先 | 18ms vs AVIF 280ms |
一个通用原则：静态内容预生成选 AVIF（体积最优），实时生成选 JPEG/WebP（速度优先），无损要求选 PNG，HDR 内容选 AVIF（唯一选择）。用智压通 SmartSlim 批量转换时可自动生成多格式（AVIF+WebP+JPEG），一次处理覆盖所有兼容场景。
五、常见问题FAQ
Q1：AVIF是什么格式？
AVIF（AV1 Image File Format）是基于 AV1 视频编码的图片格式，由开放媒体联盟（AOMedia）于 2019 年发布。AVIF 利用 AV1 的帧内编码技术压缩静态图像，比 JPEG 小 50%、比 WebP 小 20%，同时支持无损压缩、HDR、宽色域和透明通道。AVIF 是开源免授权费的下一代图片压缩标准，已被 Chrome、Firefox 等主流浏览器原生支持。
Q2：AVIF比JPEG小多少？
在同等画质（SSIM 0.9 以上）下，AVIF 比 JPEG 小约 50%。例如一张 1920×1080 照片：JPEG 质量 85 约 420KB，AVIF 同等画质约 210KB。对比 WebP，AVIF 在中等画质下小约 20%，在高画质下优势更明显（小 30% 以上）。AVIF 的压缩优势来自 AV1 更先进的预测编码和变换工具，尤其在纹理复杂区域表现突出。
Q3：AVIF浏览器兼容性怎么样？
截至 2026 年，AVIF 已获主流浏览器支持：Chrome 85+（2020 年 9 月）、Firefox 93+（2021 年 10 月）、Edge 92+（2021 年）、Safari 16.4+（2023 年 3 月）。全球浏览器支持率约 96%。不支持的旧浏览器可通过 picture 标签提供 JPEG/WebP 回退。建议用 <picture><source srcset='img.avif' type='image/avif'><img src='img.jpg'></picture> 实现渐进增强。
Q4：AVIF和WebP哪个更好？
综合来看 AVIF 优于 WebP。压缩率：AVIF 比 WebP 小 10%–30%；功能：AVIF 支持 HDR 和 12 位色深，WebP 仅支持 8 位 SDR；编码速度：WebP 快于 AVIF（AVIF 编码较慢）；兼容性：WebP 支持率约 98%，AVIF 约 96%。如果追求极致压缩率和 HDR 支持选 AVIF，如果追求编码速度和广泛兼容选 WebP。推荐用 picture 标签同时提供两种格式。
总结
AVIF 是下一代图片压缩标准，基于 AV1 帧内编码，比 JPEG 小 50%、比 WebP 小 20%，还支持 HDR、12 位色深和透明通道。技术上的领先来自分区预测（56 种方向预测）、多种变换编码（DCT/ADST/恒等变换）和多级环路滤波（CDEF+LR）。代价是编码速度较慢（约为 WebP 的 4 倍），适合预生成场景而非实时编码。
迁移策略推荐 picture 标签多格式方案：AVIF 优先、WebP 次选、JPEG 回退，兼顾压缩率和 100% 兼容性。记住三点：一是 AVIF 编码慢但解码快，适合服务端预生成；二是 HDR 内容只有 AVIF 可选（WebP/JPEG 不支持）；三是用 picture 标签同时提供三种格式，让浏览器自动选最优。