WebP和AVIF到底差多少？我拿1000张图实测了一下

网站图片优化这事，从PNG到JPG到WebP，现在又多了个AVIF。什么时候该换？换了能省多少？吹得再好听不如跑一遍数据。

实测环境：从自己网站扒了1000张原始JPG图片（产品图、截图、插图混合），用ImageMagick和libavif分别转WebP和AVIF，同一质量参数（quality=75），比三样东西：文件大小、转换时间、浏览器兼容。

先说结论：AVIF比WebP平均再小28%。对于图片多的网站，这差距意味着每月省几十G流量。

具体数据：

1000张原始JPG总大小：487MB
转WebP（quality 75）：174MB，压缩率64%
转AVIF（quality 75）：125MB，压缩率74%
AVIF比WebP再省了49MB，也就是28%。

单张200KB的JPG转WebP约70KB，转AVIF约50KB。20KB的差距看着不大，但你的页面如果有10张图，那就是200KB的差距——对LCP（最大内容绘制）影响不小。

但AVIF有自己的毛病。转换速度慢。1000张图，WebP转了47秒，AVIF转了3分12秒。四倍的差距。如果是一次性批量转还能忍，如果是用户上传后实时转换——建议用WebP，AVIF的延迟你等不起。

浏览器兼容方面，2026年AVIF覆盖率已经到了93%（Can I Use数据），主流浏览器全支持。但有7%的老设备（比如iOS 15及以下）看不到AVIF，需要fallback。

实用方案——用picture标签：

<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" >
</picture>

浏览器按顺序尝试，不支持AVIF就降级到WebP，再不行用JPG兜底。对用户完全透明。

我的建议：新站直接用WebP，别纠结。如果你的站日均PV超过5000、图片占比高，再考虑上AVIF+picture标签方案。流量小了换算不来——AVIF的转换成本和维护复杂度换那28%的压缩率，你要算一下值不值。

标签： WebP AVIF 图片优化 网站性能 Core Web Vitals