PNG vs JPG vs WebP：该用哪种图片格式？
选错图片格式会让文件比实际所需大上 3-5 倍。本指南用真实基准数据对比 PNG、JPG 和 WebP，帮你每次都做出正确选择。
快速结论
照片：用 WebP（比 JPG 小 30%）。若在意浏览器兼容性，回退到 JPG。
截图／文字：用 PNG 获得像素级清晰度。
网页性能：能用 WebP 的地方都用。在每种场景下它都胜过 JPG 和 PNG。
格式总览
| 特性 | JPG/JPEG | PNG | WebP |
|---|---|---|---|
| 压缩方式 | 有损 | 无损 | 两者皆可 |
| 透明 | 否 | 是 | 是 |
| 动画 | 否 | 否（APNG 可以） | 是 |
| 浏览器支持 | 100% | 100% | 97%+ |
| 最适合 | 照片 | 图形、文字 | 一切 |
| 诞生年份 | 1992 | 1996 | 2010（Google） |
基准测试：文件体积对比
我们用相当的质量设置，把 50 张图片（25 张照片 + 25 张图形）在三种格式下分别压缩：
照片（25 张，平均 3000×2000px）
| 格式 | 平均体积 | 相比原始 | 质量（SSIM） |
|---|---|---|---|
| 原始（未压缩） | 5.2 MB | — | 1.000 |
| JPG (Q80) | 680 KB | -87% | 0.985 |
| PNG | 4.1 MB | -21% | 1.000 |
| WebP (Q80) | 490 KB | -91% | 0.987 |
图形与截图（25 张）
| 格式 | 平均体积 | 相比原始 | 质量 |
|---|---|---|---|
| 原始（PNG） | 1.8 MB | — | 像素级完美 |
| JPG (Q90) | 420 KB | -77% | 文字略有模糊 |
| PNG（优化后） | 1.1 MB | -39% | 像素级完美 |
| WebP（无损） | 780 KB | -57% | 像素级完美 |
关键发现：WebP 在照片上比 JPG 小 28%，在图形上比 PNG 小 29% — 同时保持同等或更好的质量。没有任何场景 WebP 会落败。
深入了解：JPG（JPEG）
工作原理：JPG 把图像分成 8×8 像素块，并对每块应用离散余弦变换（DCT）。高频细节（细微纹理）会被最先丢弃，从而保留整体外观。
优点：
- 通用支持 — 每个浏览器、应用和设备
- 非常适合含复杂色彩渐变的照片
- 成熟生态，历经数十年优化
缺点：
- 不支持透明
- 每次重新保存画质都会下降（代际损耗）
- 低质量时出现可见的「块状」瑕疵，尤其在锐利边缘和文字周围
深入了解：PNG
工作原理：PNG 对像素数据采用 DEFLATE 压缩（类似 ZIP）并配合预测滤波。每个像素都被完整保留 — 零画质损失。
优点：
- 像素级完美 — 截图、示意图、文字叠加的理想选择
- 完整支持 alpha 透明
- 重新保存不损失画质
缺点：
- 照片文件体积大（比 JPG 大 3-5 倍）
- 没有原生有损模式来进一步缩小体积
深入了解：WebP
工作原理：由 Google 开发，WebP 用 VP8 视频编码技术做有损压缩，并以自定义方式做无损压缩。它分析最大 16×16 的整块图像，而非固定的 8×8，从而获得更好的预测。
优点：
- 同等视觉质量下比 JPG 小 25-35%
- 同时支持有损和无损压缩
- 支持透明（不像 JPG）
- 支持动画（取代 GIF）
- 截至 2026 年浏览器支持率达 97%+
缺点：
- 部分老旧邮件客户端和老工具不支持
- 某些社交平台会把 WebP 重新压缩成 JPG
决策流程图
- 这是照片或写实图像吗？
- 是 → 用 WebP（或以 JPG 作为回退）
- 否 → 继续
- 需要透明吗？
- 是 → 用 WebP（或以 PNG 作为回退）
- 否 → 继续
- 它包含文字、代码或锐利边缘吗？
- 是 → 用 PNG 获得像素级完美，或用 WebP 无损
- 否 → 用 WebP 有损
AVIF 怎么样？
AVIF 是最新的竞争者，压缩率比 WebP 再好 20%。但其浏览器支持仍约 92%，编码明显更慢，工具链也不够成熟。对 2026 年的大多数场景，WebP 仍是务实之选。我们会在后续文章中详细介绍 AVIF。
小结
在 2026 年的网页用途上，WebP 是明确的赢家，体积小于 JPG 和 PNG，质量却持平或更优。把 JPG 作为照片的通用回退，需要带透明的像素级图形时用 PNG。无论选哪种格式，发布前都要先压缩。