PNG 与 WebP 的区别：新一代图像格式的取舍
WebP 是 Google 在 2010 年推出的现代图像格式，目标很直接：在保住 PNG 透明能力的同时，提供接近 JPEG 的压缩效率。如今主流浏览器已全部支持 WebP，越来越多的网站用它替代 PNG 给页面瘦身。但「更新」不等于「处处更好」，本文逐项拆开比较。
| 对比维度 | PNG | WebP |
|---|---|---|
| 有损压缩效率 | 不支持有损模式，只有无损一条路 | 基于 VP8 关键帧编码，同等观感下体积通常比 JPG 再小 25–35% |
| 无损压缩效率 | DEFLATE 算法成熟稳定，是无损图像的行业基准 | 自研无损编码器，官方基准显示平均比 PNG 再小约 26%，截图类内容差距尤其明显 |
| 透明度支持 | 完整 8-bit alpha 支持，边缘平滑自然 | 同样支持 alpha，且有损模式也能携带透明通道——这是 JPG 完全做不到的 |
| 动画能力 | 无原生动画（动图需要 APNG 这一独立变体） | 原生支持逐帧动画循环，常用于替代体积巨大的 GIF |
| 浏览器与生态兼容 | 近 30 年历史，所有浏览器、编辑器、邮件客户端无一例外支持 | Safari 自 14（2020 年）起支持后基本全覆盖；部分老旧软件、CMS 插件和邮件管线仍可能拒绝 WebP |
| 解码资源占用 | 解码极快，低端设备也没有压力 | 解码略重于 PNG；超长图片列表里大量 WebP 在老设备上偶见滚动掉帧 |
| 适用场景 | 对外分发的素材与需要最大兼容性的场合：邮件签名、第三方平台上传、设计交付 | 面向自己网站的流量优化：首屏大图、带透明的 UI 图、替代 GIF 的短动画 |
何时选 PNG？
当你无法控制下游环境——用户会把图片下载走、通过邮件转发、或上传到只认 PNG 的平台时，坚持用 PNG 最稳妥。此外，需要对图像做二次像素级编辑的工作流也更适合 PNG。
何时选 WebP？
面向自己网站的流量优化优先 WebP：同样的视觉质量能省四分之一以上带宽，移动端体验改善立竿见影。建议保留 PNG 作为回退，或使用 picture 标签按浏览器能力自动切换。
相关在线工具
常见问题
WebP 会永远比 PNG 小吗？
不是绝对。官方基准显示平均小约 26%，但极小的图标、单色图形等场景两者可能相当，个别情况 PNG 反而更小，建议对关键资源逐张验证。
现在还有哪些环境不支持 WebP？
2020 年 Safari 14 发布后四大主流浏览器均已支持，剩余缺口主要在一些老旧桌面软件、部分 CMS 缩略图管线和某些邮件客户端的内嵌图片渲染。
WebP 有损模式能保留透明背景吗？
可以。WebP 允许有损颜色数据搭配无损 alpha 通道，这是它区别于 JPG 的核心优势之一，特别适合电商商品图的抠图场景。
延伸说明
迁移策略上有个实用技巧：先用工具把存量 PNG 批量转成 WebP 并记录体积变化，通常截图和带透明的 UI 图收益最大，而小尺寸图标可能持平甚至变大，这类文件留在 PNG 即可。WebP 并非要彻底取代谁——它是给「确定在浏览器里展示」的那部分图片准备的省钱方案。站内提供 PNG、WebP、JPG 互转的图片处理工具，全部本地完成、无需上传，可以放心批量验证转换收益。