WebP vs AVIF 实测：体积、画质、编码速度与兼容性

以一张 4000×3000、785KB 的 JPG 照片为基准，缩到 2000px 宽后分别编码（画质 75）：WebP 约 215KB，AVIF 约 175KB。AVIF 比 WebP 再小约 20%，这个比例在照片类内容上比较稳定；截图、纯色图上两者差距缩小。

另一个值得知道的数据：AVIF 在低体积区间优势更明显。目标 50KB 以下时，AVIF 保留的纹理细节明显多于同体积 WebP——对缩略图、头像这类小体积场景，AVIF 的领先幅度比 20% 更大。

AVIF 的压缩效率来自更复杂的 AV1 编码，代价是计算量：同一张图，AVIF 编码耗时通常是 WebP 的 3-6 倍。单张压缩无感，但批量处理几百张、或在构建流程里自动生成多尺寸时，耗时会累积成真实成本。

实践建议：构建期预处理（一次性成本）可以大胆用 AVIF；用户实时上传的在线压缩，WebP 的响应速度更友好。

全球约有百分之几的用户停留在 Safari 16.4 之前的版本（老 iPhone 无法升级系统）。面向大众消费者的网站，这部分用户不能忽略。

• 求稳：WebP。兼容性与编码速度都好，体积比 JPG 小 25%-35%
• 求极致且受众设备新：AVIF，体积再小约 20%
• 两者都要：<picture> 标签同时提供，浏览器自动选能解码的最优格式
• 仍在用 JPG/PNG 的网站：先迁到 WebP 是投入产出比最高的一步