AVIF vs WebP vs JPEG：2026 年应该用哪种格式？
今天最值得关注的三种图片格式之实用对比：体积、质量、浏览器支持，以及不同场景下的合理默认。
二十年里 JPEG 是唯一合理的答案。今天画面更微妙了。WebP 几乎到处都支持，AVIF 在更高质量下给出更小文件，JPEG 仍然在纯兼容性上获胜。"什么时候用哪个"现在是日常判断题。
这篇文章按真正重要的维度（体积、质量、浏览器支持、透明度、编码速度）比较这三种格式，并告诉你常见情况下选哪个。
速答版
- 2026 年网页用照片：提供 AVIF，回退到 WebP，再回退到 JPEG。
- 要发给任何人、任何设备的照片：JPEG。
- UI 素材、截图、有硬边缘的插图：PNG（如果想更小，再用 WebP 无损）。
- 需要透明度：在意体积选 WebP，在意兼容选 PNG。
- 动画：WebP（或 APNG）；AVIF 动画工具链仍在成熟。
同质量下的体积
对一张有代表性的 4 MB 照片，以感知等质量（SSIM ~0.97）编码：
| 格式 | 体积 | vs JPEG |
|---|---|---|
| JPEG (q=75, MozJPEG) | ~640 KB | 100%（基线） |
| WebP (q=75, 有损) | ~430 KB | ~67% |
| AVIF (q=63, libavif) | ~270 KB | ~42% |
具体数字会因图像变化，但顺序一致。AVIF 胜 WebP，WebP 胜 JPEG。差距在自然照片上最大，在硬边平面图形上最小。
2026 年中浏览器支持
- JPEG：到处都支持，毫无悬念。
- WebP：所有现代浏览器，包括 Safari（自 iOS 14、macOS Big Sur 起）。边缘情况：非常老的 Android WebView、远古企业 IE 安装；两者全球占比都接近 0。
- AVIF：Chrome、Edge、Firefox、Opera、Safari（自 16.4 起）。综合现代浏览器 AVIF 覆盖率约占全球流量 95%。
公开网站的安全模式是 <picture> 加三个 source：AVIF 在前、WebP 在中、JPEG 作 <img> 兜底。浏览器会挑第一个它支持的。
透明度、动画、色深
- JPEG：8 位、无透明、无动画。
- WebP：8 位、有损与无损、alpha 通道、支持动画。
- AVIF：8/10/12 位、有损与无损、alpha 通道、动画、HDR。
对 HDR 摄影或依赖平滑渐变的图形（晚霞、易出现 banding 的背景），AVIF 10/12 位的优势是真实可见的。
编码速度与工具支持
AVIF 在 2026 年最大的实操短板是编码速度。参考编码器（libaom）慢，单线程编 12 MP 照片要 5–10 秒。更快的编码器（libavif 用 rav1e、SVT-AV1）拉近了大部分差距。解码到处都很快。
JPEG 和 WebP 用成熟的工具链可以毫秒级编码。对成千上万张的批处理这很重要；对一次几张则差异不可见。
多数桌面图像编辑器（Photoshop、GIMP、Affinity）现在都能读写三者。Microsoft Office 与许多企业查看器仍会在 AVIF 上摔。所以给同事发图，JPEG 仍是稳妥选择。
决策矩阵
| 场景 | 推荐 | 原因 |
|---|---|---|
| 公开网页 hero 图 | AVIF + WebP 兜底 | 体积最小，95% 用户支持 |
| 邮件附件 | JPEG | 收件人邮件客户端 / 手机可能不支持 AVIF |
| 文档用 UI 截图 | PNG 或 WebP 无损 | 硬边缘；有损会模糊 |
| 带透明度的 logo | WebP（或 PNG 求最大兼容） | alpha 通道 + 体积小 |
| 图库 | AVIF 主版本 + JPEG 副本 | 面向未来的主版本，可分发的副本 |
| 动画表情包 | WebP 动画（或 GIF 求最大兼容） | 比 GIF 小，支持广 |
在浏览器里转
AinnoBox 在本地处理这三种格式，不上传。常用快捷入口：
- 图片转换：在以上格式间互转。
- 图片压缩：用 Squoosh 编解码器以目标质量重新编码。
- WebP 转 JPG：系统拒绝 WebP 时的快速修复。
- HEIC 转 JPG：iPhone 照片要发去其他平台时。
结论
对公开网站，AVIF + WebP + JPEG 三路兜底；带宽节省真实，支持已成熟。对发给特定个人或不可控平台的图，JPEG 仍是阻力最小的路。无损格式（PNG、WebP 无损）仍是 UI 素材和硬边缘内容的正确答案。