WebP 对比 PNG 对比 JPEG — 哪种图片格式最佳？
WebP 对比 PNG 对比 JPEG
每个 Web 开发人员都面临同样的问题：我应该使用哪种图片格式？JPEG 获得普遍支持，但缺乏透明度。PNG 保留每一个像素，但会产生大文件。WebP 提供现代效率，但需要检查浏览器支持。AVIF 以编码速度为代价将压缩推得更远。
本指南将这些格式进行正面比较，让你能够自信地做出选择。
文件大小对比
文件大小往往是决定性因素。以下是一张典型的 1 MB 照片在四种格式下的对比：
JPEG： 质量 80 时为 100 到 200 KB。对照片内容具有出色的压缩效果，在此设置下伪影几乎不可见。
WebP（有损）： 在同等视觉质量下为 65 到 140 KB。比 JPEG 小 25% 到 35%，且可见伪影更少。这是采用 WebP 最有力的理由。
AVIF： 在同等视觉质量下为 50 到 100 KB。比 JPEG 小最多 50%。AVIF 通过计算成本更高的编码实现这一点，但节省的效果无与伦比。
PNG： 同一张照片为 500 KB 到 3 MB。PNG 并非为照片内容设计——无损算法试图保留每一个像素，包括传感器噪点，导致文件大得多。
对于图形、截图和纯色图片，情况有所不同：
PNG： 典型的 8 位色深图标或徽标为 10 到 100 KB。对于颜色简单的图形是最佳选择。
WebP（无损）： 同样的图形为 8 到 80 KB。大约比 PNG 小 20% 到 25%。
AVIF（无损）： 与无损 WebP 相当或略小，但工具支持有限。
JPEG： 因伪影和缺乏透明度而不适合图形。
画质与视觉保真度
JPEG 在高质量设置下能产生平滑、自然的照片效果。在质量 80 到 90 时，大多数观看者察觉不到压缩伪影。在质量 50 时，块状效应和色彩条带变得可见，尤其是在天空和渐变区域。在质量 20 时，图片严重退化，伪影明显。
WebP 有损 在相同文件大小下产生的伪影比 JPEG 更少。该格式使用更复杂的压缩技术，能更好地保留边缘和渐变。在质量 75 时，WebP 通常看起来与质量 85 的 JPEG 一样好，同时文件更小。
AVIF 继承了 AV1 视频编解码器的先进技术，实现每字节最佳视觉质量。它在渐变、边缘和精细纹理的处理上优于 JPEG 和 WebP。压缩伪影更平滑、更不明显。
PNG 始终在视觉上完美。每个像素都被精确保留。代价是文件大小，而不是画质。
透明度支持
| 格式 | Alpha 透明度 | 性能 | |--------|-------------------|-------------| | JPEG | 不支持 | 不适用 | | PNG | 完整 alpha 通道 | 普遍支持 | | WebP | 有损和无损模式下均有完整 alpha 通道 | 非常好的浏览器支持 | | AVIF | 完整 alpha 通道和 HDR | 支持度持续增长 |
透明度是徽标、图标以及任何需要叠加在不同背景上的图片的硬性要求。在这些情况下，JPEG 不是可选方案。PNG 是稳妥的选择。WebP 是现代浏览器的高效选择。
动画支持
GIF 几十年来一直是网页动画的标准，但存在更好的替代方案：
- WebP 支持带完整 alpha 透明度的动画。动画 WebP 文件通常比同等 GIF 小 40% 到 60%。
- AVIF 也支持动画，且压缩比更佳。
- JPEG 和 PNG 不支持动画。
浏览器兼容性
| 浏览器 | JPEG | PNG | WebP | AVIF | |---------|------|-----|------|------| | Chrome | 完整 | 完整 | 完整 | 完整 | | Firefox | 完整 | 完整 | 完整 | 完整 | | Safari | 完整 | 完整 | 14 及更高 | 16 及更高 | | Edge | 完整 | 完整 | 完整 | 完整 | | Internet Explorer | 完整 | 完整 | 不支持 | 不支持 |
WebP 覆盖全球超过 95% 的网页用户。AVIF 覆盖超过 85% 且持续增长。对于大多数现代网站，这两种格式都可以在提供后备方案的情况下安全使用。
编码与解码速度
| 格式 | 编码速度 | 解码速度 | 最适合 | |--------|-------------|-------------|----------| | JPEG | 非常快 | 非常快 | 高吞吐量、实时应用 | | PNG | 快（因色深而异） | 快 | 静态图形、截图 | | WebP | 中等 | 快 | 生产环境网页图片 | | AVIF | 慢 | 中等 | 存档或 CDN 交付的图片 |
如果你在请求时动态编码图片，JPEG 或 WebP 是实际的选择。没有专用硬件时，AVIF 编码对即时使用来说太慢。
快速决策指南
| 需求 | 最佳选择 | 次选 | |-------------|-------------|-----------| | 照片，普遍支持 | JPEG | WebP（带 JPEG 后备） | | 照片，最小文件大小 | AVIF | WebP | | 带透明度的徽标 | PNG | WebP（无损） | | 截图或 UI 元素 | PNG | WebP（无损） | | 动画图形 | WebP | AVIF | | 最大程度保留画质 | PNG | WebP（无损） | | 所有图片采用单一格式 | WebP | AVIF |
真实世界的性能影响
考虑一个拥有 50 张产品图片的电商网站。从 JPEG（质量 80，每张 150 KB）切换到 WebP（质量 80，每张 100 KB）可将总图片重量从 7.5 MB 降至 5 MB。在有效速度为 3 Mbps 的移动网络上，总加载时间可改善 6 秒。
从 JPEG 切换到 AVIF 可将同一相册削减到约 4 MB——图片重量减少 45%，且没有可见的画质变化。
这些节省在你网站的每一个页面、每一次访问、每一位用户身上不断累积。
今天就压缩你的图片
一旦你为项目选择了正确的格式，请确保图片得到妥善压缩。我们的免费在线图片压缩工具支持 JPEG、PNG、WebP 和 AVIF——以原始格式压缩你的图片，无需不必要的转换。上传、调整质量、下载即可用于网页的优化文件。