快速结论：按流水线选，不要按格式热度选
对 2026 年的大多数网站来说，从 JPG、PNG 升级到一个"单一现代格式"，最稳的一步就是换 WebP。当流水线能同时输出 WebP 或 JPEG 回退时，AVIF 才是更好的首选。
后半句正是很多 AVIF vs WebP 对比会跳过的部分。最好的格式不是基准测试里那张最小的图，而是你的 CMS、CDN、构建流程、访客的浏览器分布和图像类型能稳定送达的那个。
作为实操起点，可以这样想：
- 用 WebP：想要一个简单的现代格式、快速批量转换、广泛的支持，以及在旧浏览器、邮件客户端、CMS 插件、App 内嵌浏览器里少踩坑时。
- 带回退地用 AVIF：图像已经是一大块性能成本，你能在构建时或通过图片 CDN 编码，也能在上线前肉眼验证效果时。
- 保留 JPEG 或 PNG 回退：图像必须在任何地方都能打开，包括旧 Safari / iOS、封锁的企业浏览器、爬虫、邮件客户端、第三方平台。
AVIF vs WebP 一览
| 维度 | WebP | AVIF |
|---|---|---|
| 最佳默认用途 | 大多数网站的单一现代格式 | 多格式流水线里的首选 source |
| 压缩 | 比 JPEG/PNG 小；靠谱的全能型 | 照片上通常比 WebP 还小 |
| 浏览器支持（2026 年 7 月） | Can I use 上约 96 % 全球用户支持 | Can I use 上约 93 % 全球用户支持 |
| 编码速度 | 对本地和批量工作流足够快 | 更慢；更适合构建时、CDN 或离线处理 |
| 解码风险 | 在各家浏览器里都非常成熟 | 通常没问题，但大 hero 图要在低端设备上测 |
| 透明通道 | 支持 | 支持 |
| 动画 | 支持，且使用广泛 | 格式支持，但工具/浏览器工作流不太可预期 |
| 色深与 HDR | 面向 8 位的 Web 传输 | 对高位深、HDR、广色域工作流更合适 |
| 最擅长的图像类型 | 商品照、博客配图、截图、缩略图、通用 Web 素材 | 图片密集页、大 hero、图库、高流量静态素材 |
它们从哪里来
WebP 由 Google 开发，2010 年发布。有损模式基于 VP8 视频编码，无损模式使用一套单独的压缩方法。Google 的 WebP 文档指出，WebP 支持有损压缩、无损压缩、透明和动画，且被主流浏览器原生支持。
AVIF 是 AV1 Image File Format 的缩写，基于开放视频编码 AV1。web.dev 把 AVIF 描述为一种较新的位图格式，目标是覆盖 Web 上常见的图像需求，比如透明、动画，以及相比更老的格式获得更好的"每字节质量"。
现实层面的差异其实是"年龄"。WebP 用了十多年慢慢渗进浏览器、CMS 插件、设计软件、图像库和构建系统里。AVIF 早已不算新奇，但更容易碰上编码慢、缺少导出选项，或者某个平台仍然要求回退的情况。
压缩效率
在相近视觉质量下，AVIF 在摄影类图像上通常比 WebP 更小。但这并不代表每张 AVIF 都会小 30 %、40 % 或 50 %。真实数字取决于编码器、质量设置、图像内容，还有你如何判断"同样质量"。
差距最明显的场景：
- 带天空、肤色、阴影和渐变的大 hero 照片；
- 每 1 KB 都会在很多图里被反复分发的图库；
- 移动端页面——传输更少直接改善 LCP 和流量。
差距通常会收窄的场景：
- 小缩略图——请求开销和缩放成本比编码效率更重要；
- 截图、UI 图和带清晰文字的示意图；
- 噪点或纹理特别丰富的图像；
- 无损图形——PNG 或无损 WebP 有时更合理。
真实项目请拿一个有代表性的文件夹去测，而不是一张挑好的样图。一个强健的测试集通常包含：hero 照片、商品图、人像、截图、插画、缩略图。都按你实际发布的尺寸比较文件大小和视觉效果。
2026 年的浏览器支持
两种格式的支持都很广，但并不完全相当。2026 年 7 月核对时，Can I use 显示 WebP 全球用户支持约 96.15 %，AVIF 约 93.42 %。两者都能在现代 Web 上正常投产，但也不能算等同。
剩余的差距在这些地方最要紧：
- 老 iPhone 和 iPad，尤其是 iOS 15 及更早；
- 老版本桌面端 Safari；
- 浏览器版本被冻结的企业机器；
- App、自助终端、老的 Android WebView 内嵌浏览器；
- 那些不完全像正常浏览器的邮件客户端和第三方平台。
对 WebP，很多站点用 "WebP + 老客户端 JPEG 回退" 就够了。对 AVIF，安全的生产配置仍然是 AVIF 优先、WebP 其次，JPEG 或 PNG 兜底。
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="使用中的产品照片">
</picture>
顺序有意义。浏览器会选自己支持的第一个 source，所以想让支持 AVIF 的浏览器拿到 AVIF，就得把它放在 WebP 之前。
编码速度
真正维护一个站点时，你最能感受到差异的地方就是编码速度。
WebP 对本地转换、批量工具、CMS 工作流和简单的静态站点构建都足够快。AVIF 会明显更慢，因为编码器要花更多工夫去找一个更小的结果。虽然有更快的 AVIF 预设，但一般要拿一部分压缩率作交换。
它会在四个地方咬人：
- 静态构建： 30 张图的博客没问题。原始素材 2000 张的旅行网站，AVIF 生成很容易变成一笔实打实的构建成本。
- 用户上传： 用户上传后期待秒出预览时，AVIF 编码会让延迟和 CPU 成本明显上升。
- 无服务器函数： 慢编码会撞上超时或成本上限。
- 本地工作流： 手动把一个文件夹在上传前转好，用 WebP 更省心。
一个好用的判断标准：编码一次、分发很多次的场景交给 AVIF；追求速度、简单和可重复批量转换的场景交给 WebP。
不同图像类型下的视觉质量
AVIF vs WebP 不是一个覆盖整站的决定。
| 图像类型 | 更好的第一选择 | 原因 |
|---|---|---|
| 大 hero 照片 | AVIF + WebP 回退 | AVIF 能显著减轻首屏上最重的素材 |
| 博客正文照片 | WebP，或在自动化情况下 AVIF + 回退 | WebP 简单；如果构建流程已经在生成多种变体，AVIF 值得上 |
| 电商产品照 | 基线用 WebP，再测 AVIF | 产品细节必须干净——重点比较边缘、面料、标签和颜色 |
| 截图或 UI 图 | WebP 或 PNG | 低品质 AVIF 会让小字和硬边缘变软 |
| logo 或图标 | SVG 或 PNG/WebP | 位图 AVIF 不适合矢量类图形 |
| 动图 | WebP 或视频 | 动画 AVIF 的工具和平台工作流还不够成熟 |
| 社交分享图 | JPEG 或 WebP | 很多社交/即时通讯平台反正会重压 |
高级能力
AVIF 支持一些 WebP 并不同样瞄准的能力。对普通的 sRGB Web 图像，这些可能无关紧要；但在摄影、HDR 内容和高端显示流水线中，它们就有意义了。
- 高位深： AVIF 能承载超过 Web 常见 8 位的位深。
- HDR 和广色域： 如果流水线能保留这些信号，AVIF 更契合。
- AV1 生态： AVIF 继承了 AV1 生态的一部分能力，包括高效的帧内压缩。
如果整条流水线不能把这些信号保留下来，就别为这些能力去选 AVIF。当源图就是普通 sRGB JPEG，再经过一个会剥掉元数据和色彩信息的 CMS 之后，真正的实惠通常只是文件更小，而不是"HDR 魔法"。
工具链成熟度
WebP 是那个"无聊而成熟"的选项——这是一句夸奖。浏览器、设计软件、图像库、构建插件、CMS 插件和 CDN 都把它支持得很好。出问题时，调试通常也比较轻松。
AVIF 的支持已经好很多了，但棱角还比较容易碰到：
- CMS 能上传 AVIF，却没生成所有缩略图尺寸；
- 某个插件生成了 AVIF，却没写回退标签；
- CDN 只在特定套餐或特定 Accept 头下才启用 AVIF；
- 本地浏览器里的编码，有的浏览器能跑，有的浏览器就是失败；
- 为每张图都生成 AVIF，构建可能明显变慢。
在大站上真正切到 AVIF 之前，把这条真实的流水线走通并验证：上传、缩放、生成变体、渲染 HTML、部署、爬取，然后分别在 Safari、Chrome、Firefox 和一台低端手机上打开结果看看。
该怎么选
2026 年的大多数 Web 项目，务实的选择是 WebP。当流水线准备好之后，AVIF 才是那张追求性能的牌。
遇到以下情况用 WebP
- 想要一个几乎哪里都能跑的现代图像格式。
- 需要快速的本地或浏览器端转换。
- 站点规模不大，图像传输不是最大的性能瓶颈。
- CMS 或电商平台无法产出干净的 AVIF 回退。
- 图像里有大量截图、示意图、UI 截图或小缩略图。
- 图像会被发到邮件、集市或第三方平台，AVIF 支持情况不确定。
遇到以下情况用 AVIF（配 WebP 或 JPEG 回退）
- 图像占据了页面重量或 LCP 的主导。
- 你有大量大照片、图库、hero 图或多媒体密集的落地页。
- 你能在构建时、通过 CDN 或在离线流水线里编码。
- 工具链能自动输出 AVIF、WebP 和 JPEG/PNG 回退标签。
- 你能在真实图像上检查画质，而不是只信一次基准测试。
- 你的读者大部分用现代浏览器。
遇到以下情况保留 JPEG 或 PNG
- 图像要撑得住老客户端、邮件、文档或下载场景。
- 你需要一份用于编辑或归档的母版文件。
- 图像是 logo、图标、示意图或截图，无损输出很关键。
- 平台反正会对上传做一次重压缩。
如何在自己的站上比 AVIF 和 WebP
不要只靠通用基准下结论，用你自己的图像来测。
- 挑 10 到 20 张真实图像：hero 照片、商品照、缩略图、截图，以及任何带文字的图。
- 用合理的质量设置分别导出 WebP 和 AVIF。第一轮可以先对比 WebP 80–85、AVIF 60–75，再按肉眼微调。
- 按最终渲染尺寸看输出，不要只在 100 % 缩放下看。
- 仔细看人脸、天空、渐变、面料、产品标签、文字和硬边缘。
- 比整页图像总重量，而不是只看一张。
- 前后各跑一次 Lighthouse 或你惯用的性能工具。
- 通过在浏览器里关闭 AVIF 支持，或换个不支持 AVIF 的设备打开页面，测一遍回退渲染。
如果 AVIF 只在一张缩略图上省了几 KB，那就别搞这套复杂度；如果它能从 LCP hero 里砍掉几百 KB，那就带上回退标签用起来。
用 PhotoTools 做快速转换
当你需要在图像进入网站前，手动检查或准备一下文件时，PhotoTools 就派得上用场。
- 需要一个能覆盖大多数现代网站、纯浏览器本地的快速导出时，用 JPG 转 WebP 转换器。
- 想在真正搭流水线之前先把 AVIF 版和 WebP 版对比一下时，用 JPG 转 AVIF 转换器。
- 一个 AVIF 文件需要发给打不开它的工具、客户或平台时，用 AVIF 转 JPG 或 PNG。
转换器基于浏览器原生的 Canvas API 在本地跑。用来做快速批处理和"不上传"工作流很方便，但它并不是大型网站上自动化 CDN 或构建流水线的替代品。
参考的资料
本文在 2026 年 7 月 18 日核对过以下最新的格式与支持指引：Google 的 WebP 文档、web.dev 的 AVIF 指南、Chrome Lighthouse 关于现代图像的建议、Can I use AVIF 和 Can I use WebP。