WebP vs PNG
两者都能存照片，但取舍不同。以下是它们真正的差别，以及该怎么选。
一句话结论
如果图是照片、或者照片的截图，WebP 会小得多。如果是线稿、logo，或者你要保证逐像素精确的文字，留在 PNG。
这个问题从哪来
到这个页面来的人，多数不是在权衡两种格式的优劣。他们手上有一张莫名其妙 4MB 的 PNG，想让它变小。这个前提很重要，因为**这张 PNG 为什么是 4MB** 决定了 WebP 帮不帮得上忙 —— 偶尔正确答案是：问题从来就不在 PNG。
逐项对比
| 属性 | WebP | PNG |
|---|---|---|
| 压缩方式 | 有损 | 无损 |
| 透明通道 | 支持 | 支持 |
| 典型文件大小 | 约为同等 JPEG 的 65-75% | 约为同等 JPEG 的 300-500% |
| 兼容性 | 所有主流浏览器和绝大多数应用都支持 | 几乎所有软件都能打开，包括很老的程序 |
| 常见来源 | 为减小页面体积而优化的网站 | 截图、logo 和图形素材 |
真正的差别在哪
PNG 按定义就是无损的，WebP 通常不是
PNG 按原样保存每一个像素，所以它永不劣化，也所以它大。WebP 有有损和无损两种模式，而人们引用的那些体积数字几乎都来自有损模式。不说清模式就拿「WebP」和 PNG 比，比的是两个不同的东西。无损 WebP 通常比 PNG 省约 25%，有损 WebP 能省 80% 以上。
PNG 在照片上体积爆炸，是结构性原因
PNG 的压缩靠的是在成行的像素里找重复。一张设置面板的截图大部分是重复的纯色，压得非常漂亮。而照片几乎没有精确重复 —— 每个像素都和邻居略有不同 —— 于是 PNG 基本原样存下来，文件膨胀到 JPEG 的 3~5 倍。这不是缺陷，这就是「无损」在含噪数据上的必然结果。
两者都保留透明，所以这一条不构成取舍
这条值得单独说，因为正是这个默认假设让很多人条件反射地选 PNG。WebP 在有损和无损两种模式下都支持完整的 8 位透明通道。透明背景上的 logo 不需要靠 PNG 才能保住透明 —— 它需要 PNG，是在你要求逐像素精确的时候。
该用哪个
这些情况用 WebP
照片、以照片为主的截图，以及任何「拿来看」而不是「拿来继续编辑」的网页分发。
这些情况用 PNG
文字和界面的截图、logo 与线稿、还要再进一轮编辑的文件，以及任何需要反复保存而不变质的文件。
一个常见的坑
文字截图不要用有损 WebP
有损压缩是为照片细节调的，处理黑白硬边非常糟糕 —— 字形边缘会泛起灰晕，细笔画糊成一团。终端或代码编辑器的截图是最坏的情况。如果文件很大又全是文字，用无损 WebP 或者干脆留着 PNG；省得少一些，但字还看得清。