WebP vs PNG vs JPG 全面对比

格式特性快速对比表

特性 / Feature          JPG        PNG        WebP
压缩类型 / Compression  有损 lossy 无损 lossless 两者 both
透明度 / Transparency   否 No      是 Yes      是 Yes
动画 / Animation        否 No      否 No*      是 Yes
照片压缩效率            ★★★★★    ★★☆☆☆    ★★★★★+
图形压缩效率            ★★☆☆☆    ★★★★☆    ★★★★★
浏览器兼容性            ★★★★★    ★★★★★    ★★★★☆
软件兼容性              ★★★★★    ★★★★★    ★★★☆☆
(*APNG 支持动画，但支持有限)
(*APNG supports animation but with limited support)

这个对比表展示了三种格式的核心差异。在 Web 性能优化场景中，WebP 在几乎所有指标上都优于 JPG 和 PNG（除了软件兼容性），这也是为什么 Google 将 WebP 支持作为 Core Web Vitals 优化的重要推荐。

文件大小实测对比

以一张 1920×1080 的风景照片为基准测试：原始未压缩 BMP 约 6MB；PNG（最高压缩）约 3.2MB；JPG（质量 85）约 450KB；有损 WebP（质量 75）约 310KB；无损 WebP 约 2.8MB。对于照片类图片，有损 WebP 是最优选择，比 JPG 再小约 30%。

以一个 800×600 的 UI 截图（含文字和图标）为基准：PNG 约 85KB；JPG（质量 90）约 120KB（伪影明显，不实用）；无损 WebP 约 65KB；有损 WebP（质量 80）约 45KB。对于 UI 和图形内容，无损 WebP 比 PNG 小约 24%，有损 WebP 甚至更小（虽然可能有轻微质量损失）。

画质对比分析

在相同文件大小的条件下，WebP 的画质通常优于 JPG。这是因为 WebP 使用了更先进的预测编码和自适应量化技术。特别是在低质量（高压缩）设置下，WebP 产生的伪影比 JPG 少得多——JPG 在低质量时会出现明显的块状效应和振铃效应，而 WebP 的伪影更加平滑和自然。

对于无损模式，WebP 和 PNG 的画质完全相同（都是无损），差异只在文件大小上。无损 WebP 比 PNG 小约 20–26%，是提升无损图片传输效率的理想选择。

兼容性对比

JPG 和 PNG 有着无与伦比的兼容性：几乎所有设备、所有操作系统、所有软件（文字处理、演示文稿、图片查看器、打印系统）都支持这两种格式。WebP 的浏览器支持已经非常好（97%），但在以下场景仍有兼容性问题：旧版 Photoshop（需要插件）、Windows 7/8 的系统图片查看器、某些打印系统和文档管理系统、一些嵌入式设备和 IoT 应用。

各格式的最佳使用场景

JPG 的最佳场景：发邮件分享的照片、在不确定兼容性的平台上使用的图片、打印用途、需要广泛软件支持的工作文件。PNG 的最佳场景：需要透明背景的图形、UI 设计稿和截图、Logo 和图标、需要无损精度的技术图纸、跨软件工作流中的中间文件。WebP 的最佳场景：网站所有图片（性能优化首选）、Web 应用的图标和 UI 元素（支持透明度）、需要动画效果的场景（代替部分 GIF 使用）。

如何在网站中同时支持三种格式

<!-- 最佳实践：提供 WebP + JPG/PNG 回退 -->
<!-- Best practice: provide WebP + JPG/PNG fallback -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo" loading="lazy">
</picture>

<!-- 带透明度的图形 / Graphic with transparency -->
<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Logo">
</picture>

<!-- CSS 背景图的 WebP 回退 -->
<!-- WebP fallback for CSS background -->
<style>
.hero { background-image: url('hero.jpg'); }

/* 使用 CSS 特性检测 / Using CSS feature detection */
.webp .hero { background-image: url('hero.webp'); }
</style>

对于 CSS 背景图的 WebP 回退，需要在 JavaScript 中检测 WebP 支持并在 html 元素上添加 .webp 类名，或使用 Modernizr 等特性检测库。在 Next.js、Nuxt.js 等现代框架中，这些工作通常由框架自动处理。

未来趋势：AVIF 的崛起

AVIF（AV1 Image File Format）是比 WebP 更新的格式，基于 AV1 视频编解码器。它在压缩效率上再次超越 WebP：比有损 WebP 小约 20–30%，比 JPG 小约 50%，同时支持 10/12 位色深、HDR、宽色域、动画和透明度。Chrome、Firefox 和 Safari（15+）已经支持 AVIF，这意味着它正在快速成为下一代主流 Web 图片格式。