WebP 与 AVIF：2026 年该用哪种图片格式？
@SoNiceInfo 发布于 2026年9月22日 (更新于 2026年9月24日)
WebP 与 AVIF 之争，简单的答案是两种都导出，再用 <picture> 元素提供。 AVIF 放第一，WebP 放第二，JPEG 或 PNG 作为最后的备用：支持的浏览器会得到最小的文件，其他浏览器也能正常显示图片。 如果只能提供一种格式，看重兼容性和编码速度就选 WebP，追求最大的缩小幅度以及 HDR 和 10/12 位色深就选 AVIF。
WebP 与 AVIF 对比表
WebP 是 Google 基于 VP8 视频编解码器开发的图片格式；AVIF 是基于 AV1 视频编解码器的图片格式。 两者都支持有损和无损压缩、透明以及动画，区别在于压缩效率、位深和编码速度。
| 特性 | JPEG | WebP | AVIF |
|---|---|---|---|
| 压缩率（有损，相同画质） | 基准 | 小约 25–35% | 小约 50% |
| 无损压缩 | 不支持 | 支持（比 PNG 小约 26%） | 支持 |
| 透明 / 动画 | 不支持 | 支持 | 支持 |
| 10 位 / 12 位色深 | 不支持 | 不支持（8 位） | 支持 |
| HDR / 广色域 | 不支持 | 有限 | 完全支持 |
| 编码速度 | 快 | 快 | 明显较慢 |
| 最大尺寸 | 65,535 × 65,535 px | 16,383 × 16,383 px | 可处理比 WebP 更大的图片 |
| 渐进式显示 | 支持 | 不支持 | 不支持 |
| 浏览器支持 | 全部 | 所有主流浏览器（Safari 需 macOS 11 / iOS 14 或更高版本） | 所有主流浏览器（Safari 需 macOS 13 / iOS 16 或更高版本） |
压缩率数据是根据已发表的对比研究得出的经验值，会因图片内容和编码器设置而异。
实测示例：把一张 JPEG 转换为 WebP 和 AVIF
以下是我在 Mac 上用命令行编码器转换一张 1600×1064 px 的 JPEG 照片（230 KB）的结果。
# WebP (cwebp 1.6.0)
cwebp -q 80 in.jpg -o out.webp # 230 KB -> 112 KB
# AVIF (avifenc 1.4.2)
avifenc -q 60 -s 6 in.jpg out.avif # 230 KB -> 108 KB两者都不到原 JPEG 的一半大小。 不过请注意，这只是一张图片的结果，而且两种质量设置并没有按视觉画质对齐。 不同编码器的质量数值含义各不相同，所以在实际网站上，可靠的做法是先亲眼对比转换后的图片，再确定设置。
什么时候选择 WebP
- 需要照顾较旧的浏览器和操作系统版本：Safari 从 macOS 11 / iOS 14 起就能显示 WebP，覆盖范围比 AVIF 更广。
- 经常转换大量图片：编码速度快，构建和上传的时间都能保持较短。
- 想让无损的 Logo、截图和线稿更小：无损 WebP 比 PNG 小约 26%。
- 要替换 GIF 动图：WebP 动画支持全彩，而且得到广泛支持。
要在 Mac 上把整个文件夹的 PNG、JPG、HEIC 或 GIF 文件转换为 WebP，可以免费开始使用 Mac 版 WebP 批量转换应用 WebP Converter.。
什么时候选择 AVIF
- 想让传输大小尽可能小：在以照片为主的页面上，画质相当时比 JPEG 小约 50% 是合理的预期。
- 要提供 HDR 或广色域照片：10 位和 12 位色深可以避免 8 位 WebP 在平滑渐变中出现的色带。
- 在意低码率下的画质：高压缩时产生的块状伪影更少。
- 只需提前转换一次：编码慢的影响就小得多。
要批量把 PNG、JPG 和 HEIC 文件转换为 AVIF，可以试试 Mac 版 AVIF 批量转换应用 AVIF Converter.。它同样可以免费开始使用。
用 picture 元素同时提供 AVIF 和 WebP
在 <picture> 中从上到下列出 <source> 元素，浏览器会选择第一个它支持的格式。 最后的 <img> 是备用，因此在任何环境中都能显示图片。
<picture>
<source type="image/avif" srcset="/images/photo.avif" />
<source type="image/webp" srcset="/images/photo.webp" />
<img src="/images/photo.jpg" alt="Describe the photo" width="1600" height="1064" loading="lazy" />
</picture>设置 width 和 height，可以防止图片加载时发生布局偏移（CLS）。 对于首屏中作为 LCP 元素的图片，不要添加 loading="lazy"。
WordPress 的支持情况
WordPress 从 5.8 版起支持上传 WebP，从 6.5 版起支持上传 AVIF。 之前以 JPEG 或 PNG 上传的图片不会被自动替换，所以现有素材仍需转换后再替换。 处理 AVIF 还要求服务器的图像库支持 AVIF。
如何在 Mac 上转换为 WebP 和 AVIF
最快的途径是使用 GUI 应用。拖放图片或整个文件夹即可批量转换，导出前还能亲眼检查转换前后的画质。 这三款应用的转换都在你的 Mac 上完成，无需上传任何内容。
- 想要 WebP：Mac 版 WebP 批量转换应用 WebP Converter.
- 想要 AVIF：Mac 版 AVIF 批量转换应用 AVIF Converter.
- 想一次得到 WebP 和 AVIF：Mac 版图片批量转换应用 Image Tool+，可同时导出多种格式
在命令行中，用 Homebrew 安装 cwebp 和 avifenc。
brew install webp libavif详细步骤请参阅单独的文章。
所有转换都在你的 Mac 上完成
按用途推荐
- 摄影师和作品集网站：把 AVIF 放在第一位。对于平滑渐变以及 HDR 或广色域照片，AVIF 的 10 位 / 12 位色深可以减少色带。再提供 WebP 作为备用。
- 博客和企业网站：WebP 是稳妥的默认选择：支持范围更广，编码也快。只为首屏的大图额外提供 AVIF，可以进一步减少传输大小。
- 电商网站：用
<picture>元素同时提供两种格式。商品数量多时，AVIF 的编码时间会累积起来，因此比较实际的分工是：大部分商品图片用 WebP，主视觉和精选图片用 AVIF。 - Logo、截图和线稿：使用无损 WebP（比 PNG 小约 26%），或者保留 PNG。
常见问题
Q. 该用 WebP 还是 AVIF？
两种都导出，再用 picture 元素提供：AVIF 第一，WebP 第二，JPEG 或 PNG 作为最后的备用。 如果只能选一种，看重兼容性和编码速度就选 WebP，追求最大的文件缩小幅度以及 HDR 和 10/12 位色深就选 AVIF。
Q. AVIF 比 WebP 小多少？
根据经验，在画质相当的情况下，WebP 比 JPEG 小约 25–35%，AVIF 比 JPEG 小约 50%。 实际差距在很大程度上取决于图片和编码器设置。AVIF 往往在照片和平滑渐变上占优，而小图标和简单图形可能几乎没有差别。
Q. 在不支持 AVIF 的浏览器中会怎样？
如果 img 标签只指向 AVIF 文件，在不支持 AVIF 的浏览器中什么都不会显示。 使用 picture 元素并按 AVIF、WebP、JPEG 的顺序列出 source，浏览器会选择第一个它支持的格式，所有访问者都能看到图片。
Q. AVIF 有哪些缺点？
编码明显比 WebP 或 JPEG 慢，不支持渐进式显示，较旧的操作系统和应用可能无法打开。 在每次构建都要转换大量图片的工作流程中，编码时间会变得很明显。
Q. 如何在 Mac 上把图片转换为 WebP 或 AVIF？
在命令行中，WebP 用 cwebp，AVIF 用 avifenc，两者都可以通过 Homebrew 安装。 如果想在 GUI 中批量转换且不上传任何内容，WebP Converter. 和 AVIF Converter. 各自负责一种格式，Image Tool+ 则能在一个应用中导出两种格式。
总结
- 默认使用
<picture>元素，按 AVIF → WebP → JPEG/PNG 的顺序提供。 - 如果只提供一种：看重兼容性和编码速度选 WebP，看重文件大小和 HDR / 10–12 位色深选 AVIF。
- 缩小幅度因图片而异，确定设置前请先检查转换后的画质和文件大小。