optimization-guides

WebP vs AVIF vs JPEG:2025 图像质量与体积实测对比

我们测试了 3 种最流行的网页图像格式。查看原始数据:哪种格式的文件体积最小?哪种格式能保持最佳质量?AVIF 真的准备好进入主流了吗?这是一份面向开发者的深度评测。

Shawn
2025年12月21日
2 分钟阅读
图像压缩网页性能WebPAVIF技术指南
WebP vs AVIF vs JPEG:2025 图像质量与体积实测对比

在 2025 年,如果还在给用户发送老旧的 JPEG 图片,就像是还在给他们寄录像带一样。虽然能用,但效率低下、臃肿且已经过时了。

网页技术一直在进步。首先是 Google 推出的 WebP,它承诺(也确实做到了)节省 30% 的体积。现在,AVIF 作为一个新的挑战者出现了,它声称在保持相似质量的前提下,压缩率更高。

但口说无凭。作为一名开发者,我不相信营销文案,我只相信数据。

因此,为了这次评测,我不只是读了规范说明。我准备了 50 张高分辨率源图片(包括复杂的摄影作品、扁平插画和屏幕截图),并使用 BulkResizeImages.online 和其他命令行工具进行了全方位的实测。

以下是关于以下问题的最终答案:2025 年网页的最佳图像格式是什么?


结论 (TL;DR)

如果你只有 30 秒时间,以下是你需要知道的重点:

  • 全场最佳 (获胜者): WebP。它得到了超过 97% 的浏览器支持,压缩性能极佳,且解码速度快。它是 99% 网页项目的安全、稳健且省心的默认选择。
  • 最佳压缩效果: AVIF。它通常比 WebP 还要小 15-20%。但是,它的压缩(编码)过程更长,且在旧设备上的支持稍显逊色。
  • 出局者: JPEG。除非你还在严格支持 Internet Explorer 11(没必要吧?),否则在技术上已经没有理由再将 JPEG 作为主要格式了。

第一轮:文件体积实测

我们选取了一张标准的 1920x1080 照片(一个包含丰富色彩和细节的复杂街景)。原始 PNG 格式的大小为 3.2 MB

我们将它压缩到相同的“视觉质量”水平(大致相当于 JPEG 的 80 质量)。

| 格式 | 最终文件体积 | 相比原始体积缩小 | 相比 JPEG 缩小 | | :--- | :--- | :--- | :--- | | 原始 PNG | 3.2 MB | 0% | - | | JPEG | 245 KB | 92% | 0% | | WebP | 156 KB | 95% | -36% | | AVIF | 112 KB | 96% | -54% |

数据分析

数据不会撒谎。AVIF 的体积不到同等质量 JPEG 的一半。

想象一下,你经营着一家电子商务商店,分类页面上有 100 张图片。

  • 如果使用 JPEG 加载:总计约 25 MB 的载荷。
  • 如果使用 AVIF 加载:总计约 11 MB 的载荷。

这就是用户留下来浏览和用户因为“页面太慢”而流失之间的巨大差别。


第二轮:低比特率下的视觉质量

文件体积并不是全部。如果图片看起来模糊不清、满是色块,节省那点体积就不值得了。这就是所谓的“代损”(Generation Loss)。

我们对这些格式进行了极限测试,要求 800px 宽的图片目标体积仅为 25 KB

  • JPEG: 完全崩坏。天空中出现了巨大的“块状”伪影(方格),色彩变得平淡。文字变得模糊不可辨。
  • WebP: 表现尚可。在锐利的边缘有一些轻微的模糊,但没有块状伪影。色彩依然准确。
  • AVIF: 令人惊叹。它保留了 WebP 模糊掉的纹理细节。看起来和 50KB 的版本几乎一模一样。

本轮获胜者: AVIF。它的压缩算法(源自 AV1 视频编解码器)在剔除人眼难以察觉的数据方面非常聪明,而不是简单地将像素压成色块。


第三轮:浏览器支持与兼容性

这是关键。如果用户的 iPhone 打不开,图片体积再小也没用。

  • JPEG: 100% 支持。(显而易见)
  • WebP: 约 97-98% 的支持率。在所有现代浏览器上都能完美运行。即使是长期观望的 Safari,也已经支持了好几年。
  • AVIF: 约 93% 的支持率。它在所有现代版本的 Chrome、Firefox 和 Safari 上都能运行。但是,它依赖于较新的操作系统。一些非常旧的 Android 手机或无法更新的老款 iPhone 可能会遇到闲难。

建议

对于 2025 年,策略很简单:WebP 是新的基准。

它的支持率已经足够高,以至于在大多数情况下,你甚至不需要为普通用户提供 JPEG 备份。如果你在构建一个前卫的作品集网站,建议使用 AVIF。对于其他所有人来说,WebP 是最完美的选择。


如何亲自验证?

你不需要实验室就能看到这些结果。

  1. 打开 BulkResizeImages.online
  2. 拖入你最重的一张横幅图。
  3. 将格式设为 JPEG,质量设为 80。记录下体积。
  4. 将格式切换到 WebP,质量同样设为 80。记录下体积。

你会持续看到 30-40% 的大幅体积缩减。

结语

格式之争已尘埃落定,JPEG 输了。

  • 停止 从 Photoshop 导出 JPEG。
  • 开始 将 WebP 作为所有网页图片的默认格式。
  • 尝试 如果你是性能偏执狂,可以实验一下 AVIF。

你的服务器带宽会感谢你,你的用户(尤其是那些使用移动网络链接的用户)更会感谢你。

最后更新:2025年12月21日
WebP vs AVIF vs JPEG:2025 图像质量与体积实测对比 - Blog - BulkResizeImages.online