WebP 与 PNG 正面对决：体积、透明度与各自的主场

简短答案：比文件体积，WebP 几乎总是赢；比兼容性和编辑工作流，PNG 几乎总是赢。正确的问题不是哪个格式更好，而是你在做什么工作。但"看情况"只有在你知道为什么看情况之后才有用，而这取决于两种格式的压缩方式。

两种格式分别怎么压缩

PNG 只做一件事：无损压缩。每一行像素先经过一个预测滤波器，让数据尽可能重复，然后 DEFLATE——ZIP 文件里那套 LZ77 加霍夫曼编码家族——把结果压紧。每个像素逐位存活。PNG 在九十年代中期作为 GIF 的免专利替代品设计出来，PNG 的诞生 解释了它为什么造得这么保守。

WebP 做两件事，因为它本质上是两个共用一个扩展名的格式。有损 WebP 是 VP8，来自 Google 视频压缩项目的帧内编码器——基于块、在频域工作，哲学上是 JPEG 的表亲。无损 WebP 是 VP8L，一个专门打造的无损编码器，有自己的熵编码、色彩变换和空间预测。Google 在 2010 年发布了整套东西，WebP 的诞生 有完整的来龙去脉。

两种格式都支持 alpha 透明度，但方式不同。PNG 把 alpha 作为与红、绿、蓝并列的一等通道。有损 WebP 则把 alpha 作为一个独立的、无损编码的通道挂在有损色彩数据旁边——于是你得到一张压缩过的照片配上锐利的透明轮廓，这是 JPG 和裸 VP8 各自都做不到的。如果两种压缩哲学之间的区别还不清晰，我们的 有损与无损压缩详解 讲了基础知识。

体积的现实

Google 自己的基准测试声称，无损 WebP 在同样的图像上比 PNG 小约 26%。在真实图形上，这个数字站得住：

有两点很醒目。第一，无损 WebP 在 PNG 自己的主场——截图、logo、纯色图形——以稳定优势击败 PNG，因为 VP8L 的预测器和熵编码器领先 DEFLATE 一代。第二，真正拉开差距的是有损那一列：一张有损 WebP 照片比 PNG 小一个数量级。对应的 JPG 对比我们在 JPG 与 PNG 里做过，网页图片格式指南 画出了三种格式各自的位置。

PNG 仍然赢的地方：浏览器之外的一切

每个现代浏览器多年前就能渲染 WebP 了。这句话很有分量，因为一旦跨出浏览器，WebP 的支持就开始漏风。旧版 Photoshop 需要插件。一些 CMS 上传表单和电商上架工具直接拒收 .webp。老操作系统上的桌面看图软件对它耸肩。办公套件、印刷厂和嵌入式系统落后得更远。

PNG 没有这些烦恼。从上世纪九十年代末起它就到处可读——每个图片编辑器、每个操作系统、每套办公软件、每条印刷流水线。当有人说一个文件"就是能打开"时，他们形容的通常是 PNG 或 JPG。

工作流的问题

这是大多数对比文章跳过的部分。PNG 不只是分发格式，它是默认的中间格式。它在哪里都能打开，重复保存永不劣化，任何流水线里的任何工具都接受它。这就是为什么即使最终资产以 WebP 交付，设计师也用 PNG 导出工作文件。

合理的工作流是这样的：用 PNG（或 PSD 这类真正的工作格式）编辑和存档，然后为网站导出 WebP。WebP 是运输集装箱，PNG 是车间。这个决定在网站场景下的版本，网站该用 PNG 还是 WebP 讲得更深，WebP 与 JPG 对比 则覆盖了照片那一侧。

什么场景用哪个

当你需要转换时

如果一个 WebP 文件被上传表单或旧软件挡了回来，WebP 转 PNG 在你的浏览器本地完成转换——透明度原样保留，没有任何上传；详细步骤见 如何把 WebP 转成 PNG。反方向，PNG 转 WebP 通常能在图形上页之前削掉四分之一甚至更多的体积。两个工具都完全在你的设备上运行。

从以上内容得出的规则：母版留 PNG，上网发 WebP，外部世界不配合时就按需转换。