对比
AVIF vs WebP
AVIF 和 WebP 都面向网页图片，并支持有损、无损选项及透明度。应使用相同图片比较画质、大小、编码速度和环境支持；也可以按需提供多种格式。
应该选择哪种格式？
用具有代表性的图片和相近设置分别测试，测量视觉效果、传输大小、编码时间及目标环境支持。两者并非总有一方更优。
适用于 AVIF
网页图像交付 · 优化照片 · 透明网页图像
- 平衡质量与传输大小
- 已确认支持 AVIF 的交付环境
适用于 WebP
网页图像交付 · 照片 · 透明网页资源
- 减少网页图像传输量
- 需要透明度或动画的资源
基本信息
| 项目 | AVIF | WebP |
|---|---|---|
| 扩展名 | .avif | .webp |
| MIME 类型 | image/avif | image/webp |
| 常见用途 | 网页图像交付 · 优化照片 · 透明网页图像 | 网页图像交付 · 照片 · 透明网页资源 |
| 打开方式 | 兼容的网页浏览器可在页面中显示 AVIF。对于本地文件，请确认查看器或编辑器支持 AVIF。 | 请使用兼容的浏览器、图像查看器或图像编辑器打开 WebP 文件。 |
| 导出或转换 | 将 JPEG 或 PNG 转换为 AVIF 时，请保留源图像并检查质量设置和透明度。转换到其他格式时，输出格式不支持的功能或元数据可能无法保留。 | 将 WebP 导出为 JPEG 时不会保留透明度，且输出为有损格式。导出为 PNG 时，请决定静态图像是否足够，并在需要时单独处理动画。 |
按用途选择
平衡质量与传输大小
网页图像交付 · 优化照片 · 透明网页图像
AVIF已确认支持 AVIF 的交付环境
网页图像交付 · 优化照片 · 透明网页图像
AVIF减少网页图像传输量
网页图像交付 · 照片 · 透明网页资源
WebP需要透明度或动画的资源
网页图像交付 · 照片 · 透明网页资源
WebP关键点 1
AVIF 基于 AV1 图像编码，可用于评估网页图片优化方案。
进一步了解差异关键点 2
WebP 同样面向网页，支持有损或无损压缩、透明度和动画。
进一步了解差异进一步了解差异
依据实际测试结果，以及浏览器、CMS 和图片处理链路的支持情况来选。若受众需要，可保留回退方案或同时提供多种格式。
- 两种格式都能表示透明度；动画支持取决于工具和分发方式。
- 压缩结果和编码负担会随图片内容及设置而变化。
- 应按预期显示尺寸比较同一素材，而不是仅凭格式名称判断。
常见问题
AVIF 一定比 WebP 小吗？
不一定。结果取决于图片内容、编码器、设置和目标画质。请用实际要发布的图片测试。