图像压缩基准测试 2024 - JPEG、WebP、AVIF 实测对比
基准测试方法论 - 公平比较的条件
图像压缩格式的比较需要严格控制测试条件,确保结果的公平性和可重复性。不同格式的编码器有各自的优化策略,简单地比较"相同质量参数"并不能反映真实性能差异。
测试方法:
- 质量对齐: 以 SSIM 值为基准对齐质量,而非使用各格式的质量参数。JPEG quality 80 和 WebP quality 80 的实际质量完全不同
- 测试图像集: 使用标准测试图像集 (Kodak、Tecnick、CLIC) 确保可重复性
- 编码器版本: 明确记录编码器版本,不同版本性能差异显著
- 编码设置: 使用各格式推荐的默认设置,不进行特殊优化
评估维度:
- 压缩率 (相同质量下的文件大小)
- 编码速度 (压缩一张图像所需时间)
- 解码速度 (浏览器渲染时的解压时间)
- 功能支持 (透明度、动画、HDR 等)
测试环境:
编码测试在 Apple M2 芯片上进行,解码测试在 Chrome 120 中测量。所有测试使用单线程以确保公平比较。测试图像涵盖照片、插画、截图、透明图等多种类型。
照片类测试结果 - 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 在保持肤色自然度方面表现优秀
插画与截图类测试结果
插画、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 无损在这类图像上的压缩率已经相当优秀。
透明图与高频图像测试结果
带透明通道 (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 的帧内预测对高频纹理处理最为高效
噪点图像的特殊处理:
含有传感器噪点的照片,压缩前进行适度降噪可以显著提高压缩率而不损失有意义的细节。噪点本身是高频随机信号,对压缩算法来说是最难处理的内容。
编码速度与解码速度对比
压缩率只是选择格式的一个维度。编码速度影响服务器处理能力和构建时间,解码速度直接影响用户体验和页面渲染性能。
编码速度 (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 加速
- 预计算和缓存策略减少实时编码需求
基于测试结果的格式选择指南
根据基准测试结果,为不同场景提供格式选择建议。核心原则是在浏览器兼容性、压缩效率和处理成本之间找到最优平衡。
推荐策略 (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 元素的复杂性,同时确保每个用户获得其浏览器支持的最优格式。