每个 Web 开发人员都面临过这个问题：该图像应该是 JPEG、PNG 还是 WebP？错误的选择可能意味着文件比所需的大 5-20 倍。这是一份权威的、有数据支持的指南。
概览
| 特点 | JPEG | PNG | 网页P |
|---|---|---|---|
| 压缩 | 仅有损 | 无损 | 两者 |
| 透明度 | ❌没有 | ✅ 阿尔法 | ✅ 阿尔法 |
| 动画 | ❌没有 | ⚠️ APNG | ✅ 是的 |
| 浏览器支持 | 100% | 100% | 97%+ |
| 照片文件大小 | 基线 | 5–10 倍大 | 缩小 25–35% |
| 图形文件大小 | 经常可以 | 基线 | 小26% |
| 最适合 | 电子邮件，遗留 | 截图、标志 | 一切网络 |
何时使用 JPEG
在以下情况下，JPEG 仍然是正确的选择：
- 电子邮件通讯 - 电子邮件客户端的 WebP 支持不一致
- 不接受 WebP 上传的旧版 CMS 平台
- 社交媒体上传，平台无论如何都会重新编码
对于标准 Web 使用，JPEG 已被 WebP 有效取代。
何时使用 PNG
PNG 是理想的选择：
- 像素完美保真度 - 屏幕截图的文本必须保持清晰
- 带有硬边的透明度 - 尽管 WebP 也可以处理这个问题
- 源/档案副本 - 无损意味着质量不会随着时间的推移而下降
切勿使用 PNG 来拍摄照片。保存为 PNG 的照片可能比保存为 WebP 的相同图像大 10-20 倍。
何时使用 WebP
WebP 是 2026 年几乎所有网页图像的正确默认设置：
- 照片：在同等视觉质量下，比 JPEG 小 25–35%
- 图形： 比具有完全 Alpha 透明度的 PNG 小 26%
- 动画：比 GIF 小得多，但质量更好
有了超过 97% 的全球浏览器支持，针对 WebP 的兼容性争论基本上消失了。
底线：如果您现在正在构建网站，请将 WebP 设为默认设置。仅将 JPEG 用于电子邮件和传统兼容性。仅将 PNG 用于屏幕截图或存档无损副本。
现实世界基准
| 测试图像 | JPEG (q80) | PNG | WebP (q80) | WebP 保存与 JPEG |
|---|---|---|---|---|
| 风景照片（1920×1080） | 285 KB | 2.1 MB | 195 KB | -32% |
| 产品拍摄（800×800） | 95 KB | 520 KB | 62 KB | -35% |
| UI截图（1440×900） | 180 KB | 210 KB | 125 KB | -31% |
| 透明徽标 | N/A | 45 KB | 28 KB | -38% vs PNG |
结论
JPEG、PNG 与 WebP 的争论在网络使用方面有一个明显的赢家：WebP。它结合了两全其美的优点——有损压缩（如 JPEG）和透明度（如 PNG）——其格式比这两种格式都小得多。将其设为默认值，您将可以更快、更轻量地交付页面，而不会牺牲质量。