PNG 自 1996 年问世、用以替代受专利掣肘的 GIF 以来，一直是网页上默认的无损图像格式。WebP 由 Google 于 2010 年设计，2020 年获得所有主流浏览器支持，登场时只带着一个承诺：同样的画质，更小的文件。这个承诺是真实的，但两种格式之间的差距比基准测试的标题暗示得更微妙。本文将走完文件大小、透明度、动画、浏览器支持、编码速度等实际差异，并给出一棵可用于任何项目的决策树。

简短答案

2026 年的新网页项目，WebP 是更安全的默认选项。过去六年发布的所有浏览器都支持 WebP，在视觉等价的画质下文件比 PNG 小 25–35%。继续使用 PNG 的理由只有 (1) 资产管线的下游工具无法读取 WebP 而需要比特精确的输出，或 (2) 消费方不是浏览器（例如解码器尚未升级的桌面应用）。

底层差异

PNG 使用单一压缩算法 —— 在逐行预测过滤之上叠 DEFLATE。它始终是无损的，每通道 8 位固定，并支持一个用于透明度的 alpha 通道。这种格式为保真而非效率而设计，编码器没有可改变画质的旋钮。

WebP 叠加了两条编码路径。有损 WebP 借用了 VP8 的帧内编码器，与驱动 WebM 视频的编解码器同源。无损 WebP 在 LZ77 之上叠加一组颜色变换预测器。一个 WebP 文件可以是任一模式，大多数现代编码器会自动选择对当前输入更小的那一个。WebP 在两种模式下都支持 alpha 通道、动画帧（替代动图 GIF）和元数据。

文件大小 —— 能省多少

不同图像基准结果不同，但数千张真实素材给出的经验值是：

照片类内容（风景、人像、产品照）：质量 80 的有损 WebP 比 PNG 小 30–45%，在常规观看尺寸下肉眼无法分辨。相同质量的 JPEG 与 WebP 大致相当，但在更低码率下 WebP 占优。
截图与 UI 设计稿：无损 WebP 通常比 PNG 小 20–30%。在 UI 画面上，无损编码器确实优于 DEFLATE。
扁平插画、Logo、图表：无损 WebP 可达 40–50% 的体积削减。大面积单色会被极致压缩。
像素画、256×256 以下的图标：WebP 与 PNG 几乎打平。WebP 容器开销固定，所以在极小尺寸上 PNG 偶尔占优。

透明度：踩坑点

PNG 的透明度很直接。WebP 的透明度也很直接 —— 但部分编码器（尤其是较旧的命令行cwebp）默认使用预乘 alpha，它会悄悄改写部分透明像素的颜色。把这样的 WebP 合成到不同背景上，你会看到色晕或偏色。这是编码器把素材转成预乘 alpha 的信号。想保留原始 RGB+A，使用 cwebp -exact 或所用编码器的等价开关。

动画

在 MP4 / WebM 视频显得过度而 GIF 又太大的场景，动画 WebP 替代了 GIF。一段 480p、5 秒、中等画质的动画，动画 WebP 大约 200 KB，优化后的 GIF 1.2 MB，MP4 80 KB。当动画需要透明度（MP4 不支持）但又不希望承担 GIF 体积时，WebP 是中间解。

2026 年的浏览器支持

Safari 14（2020 年 9 月）之后所有常青浏览器普遍支持。WebP 仍会输的常见场景：

iOS 14 以下 —— 占比在缩小，但部分企业用户仍真实存在
遗留 Android（4.x 及更老）上的内嵌 WebView
邮件客户端 —— 大多数仍不内联渲染 WebP。邮件请用 PNG/JPEG。
部分桌面图像查看器 —— macOS Preview 可用，Windows 默认照片也可用。

决策树

每次有新素材时我会这么判断：

用于 HTML 页面？WebP。仅当需要在 Safari 13 之前的浏览器上显示正确时，才在<picture> 中加 PNG 兜底。
用于邮件？PNG 或 JPEG。即便到了 2026 年，邮件客户端对 WebP 的支持依然破碎。
被你不可控的下游工具处理？先测试工具。有疑虑就回到 PNG。
很小的图标（≤ 64×64）？哪个都行，沿用构建流水线已经在产出的格式即可。

安全地转换

对大多数图像，质量 80 的有损 WebP 与源文件无法分辨。截图、UI 设计稿和任何含锐利边缘的内容应使用无损 —— 在这类内容上，基于 DEFLATE 的 PNG 无法击败 WebP 的无损编码器。如果你需要一次性转换大批 PNG，我们的 PNG → WebP 转换工具完全在浏览器内运行，图像不会离开你的设备。

结论

在网页内容范畴内，WebP 是 PNG 用例的严格超集，并在每一个真正重要的类别中提供有意义的体积优势。 PNG 留给邮件、遗留消费者，以及尚未跟上的下游工具即可。其他场景，请用 WebP。