图像压缩基准测试 2024 - JPEG、WebP、AVIF 实测对比

基准测试方法论 - 公平比较的条件

图像压缩格式的比较需要严格控制测试条件，确保结果的公平性和可重复性。不同格式的编码器有各自的优化策略，简单地比较"相同质量参数"并不能反映真实性能差异。

测试方法：

• 质量对齐：以 SSIM 值为基准对齐质量，而非使用各格式的质量参数。JPEG quality 80 和 WebP quality 80 的实际质量完全不同
• 测试图像集：使用标准测试图像集 (Kodak、Tecnick、CLIC) 确保可重复性
• 编码器版本：明确记录编码器版本，不同版本性能差异显著
• 编码设置：使用各格式推荐的默认设置，不进行特殊优化

评估维度：

1. 压缩率 (相同质量下的文件大小)
2. 编码速度 (压缩一张图像所需时间)
3. 解码速度 (浏览器渲染时的解压时间)
4. 功能支持 (透明度、动画、HDR 等)

测试环境：

编码测试在 Apple M2 芯片上进行，解码测试在 Chrome 120 中测量。所有测试使用单线程以确保公平比较。测试图像涵盖照片、插画、截图、透明图等多种类型。

测试条件的详细设定：

各格式的质量参数 (JPEG 的 quality、WebP 的 quality、AVIF 的 CRF) 均以 SSIM (Structural Similarity Index) 达到同一数值为前提逐一调整，测试素材按 (1) 照片、(2) 插画与图形、(3) 截图、(4) 透明图、(5) 高频图像 五类各取样本。编码器版本为 JPEG 使用 libjpeg-turbo 3.0、WebP 使用 libwebp 1.3.2、AVIF 使用 libavif 1.0.4 (aom 编码器)。质量搜索范围是 JPEG 60-95、WebP 50-90、AVIF 的 CRF 20-45 且 Speed 6，对每张图像用二分搜索确定最优质量值，使 SSIM 收敛在 0.950±0.002 的区间内。

照片类测试结果 - AVIF 的压倒性优势

在自然照片类图像中，AVIF 展现出明显的压缩效率优势。以 SSIM 0.95 (高质量) 为目标，各格式的平均文件大小对比如下。

SSIM 0.95 目标下的文件大小 (Kodak 测试集平均):

• JPEG (mozjpeg)：基准 100%
• WebP：约为 JPEG 的 70-75% (节省 25-30%)
• AVIF (speed 6)：约为 JPEG 的 45-55% (节省 45-55%)

不同质量级别的表现：

• 低质量 (SSIM 0.85): AVIF 优势最大，比 JPEG 小 60% 以上
• 中等质量 (SSIM 0.92): AVIF 比 JPEG 小约 50%
• 高质量 (SSIM 0.98)：差距缩小，AVIF 比 JPEG 小约 30%

分析：

AVIF 在低至中等质量范围优势最为显著，这恰好是 Web 图像最常用的质量范围。对于追求极高质量 (接近无损) 的场景，各格式差距缩小。WebP 作为中间选择，在兼容性和压缩率之间提供了良好的平衡。

特殊场景：

• 高频纹理 (草地、树叶): AVIF 优势更大，帧内预测对纹理处理更高效
• 大面积平坦区域 (天空、墙壁)：各格式差距较小
• 人像肤色：AVIF 在保持肤色自然度方面表现优秀

照片类的数值明细：

以 SSIM 0.95 为基准、20 张样本的中位数结果为：JPEG (libjpeg-turbo) 以质量 78-82 达标，作为 100% 的基准尺寸；WebP (libwebp) 以质量 72-76 达标，为 JPEG 的 68%；AVIF (aom) 以 CRF 28-32 达标，为 JPEG 的 48%，即削减 52%。图像尺寸的影响同样明显，4,000 px 宽的图像中 AVIF 可缩到 JPEG 的 45%，而 400px 宽的缩略图只到 55% 左右，原因是 AVIF 的块尺寸 (最大 64x64) 在大图上运作更高效。按内容区分，风景照片可达 JPEG 比 42%，人像为 47%。编码时间之比为 JPEG 1x、WebP 3-5x、AVIF 15-25x (Speed 6)。

插画与截图类测试结果

插画、UI 截图和图表等非照片类图像具有不同的特征：大面积纯色、锐利边缘、文字等。这类图像的压缩特性与照片有显著差异。

插画类 (矢量风格、动漫风格):

• PNG (无损)：基准 100%
• WebP 无损：约为 PNG 的 70-80%
• AVIF 无损：约为 PNG 的 60-70%
• WebP 有损 (高质量)：约为 PNG 的 15-25%
• AVIF 有损 (高质量)：约为 PNG 的 10-20%

截图类 (含文字的 UI 截图):

• 文字边缘的锐利度对视觉质量影响极大
• JPEG 在文字周围产生明显的振铃伪影
• WebP 和 AVIF 在保持文字清晰度方面明显优于 JPEG
• 对于含大量文字的截图，PNG 仍是最安全的选择

图表和数据可视化：

• 大面积纯色 + 细线条的组合
• 有损压缩可能导致细线条模糊或颜色偏移
• 建议使用无损格式或极高质量的有损压缩

建议：

对于插画和截图，如果可以接受有损压缩，WebP 和 AVIF 都能提供极高的压缩率。但如果对边缘锐利度和颜色精确度有严格要求，应使用无损模式。WebP 无损在这类图像上的压缩率已经相当优秀。

插画与截图的数值明细：

插画与图形 (SSIM 0.95 基准、20 张中位数)：JPEG 需要质量 85-90 才能压住边缘振铃，作为 100% 基准；WebP 为 JPEG 的 55%；AVIF 为 38%，即削减 62%。截图 (同一基准)：JPEG 需要质量 88-92，WebP 为 42%，AVIF 为 30%，削减幅度达到 70%。无损模式的比较中，WebP 无损比 PNG 小 26%，AVIF 无损再小 10-15%，但考虑浏览器支持率，PNG 加 WebP 的回退组合更稳妥。截图类里 WebP 的削减率为 58%。

透明图与高频图像测试结果

带透明通道 (Alpha) 的图像和高频细节丰富的图像是压缩的特殊挑战。这些场景下各格式的表现差异更为明显。

透明图像 (带 Alpha 通道):

• JPEG 不支持透明，需要额外的遮罩图像或改用其他格式
• PNG-32：基准 100% (无损，含 Alpha)
• WebP (有损 + 无损 Alpha)：约为 PNG 的 30-50%
• AVIF (有损 + 无损 Alpha)：约为 PNG 的 20-40%

Alpha 通道的压缩策略：

• WebP: RGB 有损压缩 + Alpha 无损压缩 (默认行为)
• AVIF: RGB 和 Alpha 可以独立设置质量参数
• Alpha 通道通常包含大面积纯色和锐利边缘，无损压缩效率很高

高频图像 (细密纹理、噪点):

• 高频内容对所有有损格式都是挑战
• JPEG 在高频区域产生严重的块效应和振铃
• WebP 表现中等，细节保留优于 JPEG
• AVIF 的帧内预测对高频纹理处理最为高效

噪点图像的特殊处理：

含有传感器噪点的照片，压缩前进行适度降噪可以显著提高压缩率而不损失有意义的细节。噪点本身是高频随机信号，对压缩算法来说是最难处理的内容。

透明图与高频图像的数值明细：

透明图 (含 alpha、SSIM 0.95 基准、20 张中位数)：PNG (无损) 为 100% 基准；WebP (有损加 alpha) 为 PNG 的 18%，即削减 82%；AVIF (有损加 alpha) 为 12%，削减 88%。电商的白底透明商品图中，单张 500KB 的 PNG 变成 WebP 90KB、AVIF 60KB 是典型情形。高频图像 (纹理、细密图案) 方面，JPEG 需要质量 82-88，WebP 为 JPEG 的 75%，AVIF 为 58%，即削减 42%。需要注意的是，高频图像上把 AVIF 的质量压得过低 (CRF 40 以上) 会出现细节消失的涂抹现象，这是去块滤波作用过强所致，纹理照片建议把 CRF 控制在 25-30。

编码速度与解码速度对比

压缩率只是选择格式的一个维度。编码速度影响服务器处理能力和构建时间，解码速度直接影响用户体验和页面渲染性能。

编码速度 (1920x1080 照片，单线程):

• JPEG (mozjpeg): ~50ms - 最快
• WebP: ~200ms - 中等
• AVIF (speed 6): ~800ms - 较慢
• AVIF (speed 1): ~5000ms - 非常慢 (质量最优)

解码速度 (浏览器内):

• JPEG: ~5ms - 最快，硬件加速广泛支持
• WebP: ~8ms - 接近 JPEG
• AVIF: ~15ms - 较慢，但在可接受范围内

编码速度的实际影响：

• 静态站点构建：编码速度影响构建时间，但只执行一次
• 动态图像处理 (CDN 实时转换)：编码速度直接影响首次请求延迟
• 用户上传图像处理：影响上传后的可用时间

AVIF 编码速度优化：

• 使用 speed 参数在质量和速度间权衡 (1-10，越大越快)
• speed 6 是推荐的平衡点，质量损失极小但速度提升数倍
• 多线程编码可以利用多核 CPU 加速
• 预计算和缓存策略减少实时编码需求

编解码速度的实测值：

编码速度 (1,200 × 800 px 照片、同一质量基准)：JPEG (libjpeg-turbo) 15ms 为 1x 基准；WebP (libwebp、method 4) 65ms，为 4.3x；AVIF (aom、speed 6) 280ms，为 18.7x；AVIF (aom、speed 4) 850ms，为 56.7x；AVIF (aom、speed 8) 120ms，为 8x，但压缩率下降 10-15%。处理 1000 张图像时，JPEG 约 15 秒，AVIF (speed 6) 约 5 分钟，放进 CI/CD 流水线可以接受，却不适合用户上传时的实时转换。解码速度方面，JPEG 8ms 为 1x，WebP 10ms 为 1.25x，AVIF 18ms 为 2.25x；只要加上 decoding="async"，对主线程的影响就能降到最低。内存方面，AVIF 解码时的峰值占用最大，约为 JPEG 的 1.5 倍，在内存吃紧的低价 Android 机上同时解码大量 AVIF 图像有压迫内存的风险。

基于测试结果的格式选择指南

根据基准测试结果，为不同场景提供格式选择建议。核心原则是在浏览器兼容性、压缩效率和处理成本之间找到最优平衡。

推荐策略 (2024 年):

• 首选 AVIF：压缩率最优，主流浏览器已支持 (Chrome、Firefox、Safari 16.4+)
• 回退 WebP：兼容性更广，压缩率优于 JPEG
• 最终回退 JPEG: 100% 兼容性保障

使用 picture 元素实现渐进增强：

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

按场景选择：

• 照片为主的网站: AVIF > WebP > JPEG，优先压缩率
• 电商产品图: WebP (兼容性优先) 或 AVIF + WebP 双格式
• 需要透明的图标/Logo: WebP 或 AVIF (替代 PNG)
• 截图和文档图: PNG (无损) 或 WebP 无损
• 动画: WebP 动画 (替代 GIF) 或 AVIF 序列

CDN 自动格式选择：

现代 CDN (Cloudflare、CloudFront + Lambda@Edge) 支持根据浏览器 Accept 头自动选择最优格式。服务端内容协商可以免去 picture 元素的复杂性，同时确保每个用户获得其浏览器支持的最优格式。

优先级与判断线：

用 picture 元素构建 3 级回退链是基本形，从 PNG 迁移可获得 80-88% 的尺寸削减。纹理与高频图像把 AVIF 的 CRF 限制在 25-30，或者直接选 WebP；动画则用 WebP 动画或 MP4。着手顺序建议为 (1) 透明图 (PNG 换成 WebP/AVIF 的削减效果最大)、(2) 主视觉与 LCP 图像 (直接改善 LCP)、(3) 照片整体 (数量多因而累积效果大)、(4) 插画与截图 (已用 WebP 且足够时优先度低)。当用户群的 AVIF 支持率超过 90% 时，全面迁移到 AVIF 就有了正当性。