WebP 生成文件 比 PNG 小 25% 到 35% 对于同一张图像，它保留了 PNG 著名的透明背景。这一事实解释了为什么 Google 构建 WebP 以及为什么大多数现代网站现在都提供它。 PNG 的反论点是可达性：它可以在所有编写过的程序中打开，包括从未听说过 WebP 的软件。因此，选择不在于哪种格式在技术上更优越，因为 WebP 显然就是如此。这关系到您是针对现代网站进行优化，还是为了保证各处的兼容性。本指南在压缩、透明度、质量模式、浏览器支持、动画和页面速度方面对两者进行了深入比较，然后为您提供了明确的选择规则。

什么是 WebP 以及 Google 为何创建它

WebP 是 Google 于 2010 年发布的一种图像格式，基于其 VP8 视频编解码器的压缩技术而构建。目标很明确：使网页图像更小，以便页面加载速度更快。谷歌有数据知道图像在页面重量中占主导地位，并且将每个图像减少三分之一将显着加快网络速度。 WebP 从一开始就被设计为同时取代三种格式，匹配 PNG的透明度、JPG的照片压缩、GIF的动画 在一个容器中。这种雄心壮志就是它能做到巴布亚新几内亚无法做到的事情的原因。

PNG 是什么以及它为何经久不衰

PNG 于 1996 年问世，作为 GIF 的无专利替代品，使用无损 DEFLATE 压缩并添加完整的 Alpha 通道。它成为徽标、图标、屏幕截图和任何需要透明背景的图形的标准。近三十年的普遍支持是它的护城河。每个浏览器、操作系统、电子邮件客户端、办公套件和图像编辑器都无需设置即可读取 PNG。当图像绝对必须在未知的地方打开时，PNG 是永远不会失败的格式。

文件大小：WebP 明显获胜

基本上在所有情况下，WebP 的压缩效果都比 PNG 好。对于具有透明度的典型徽标或 UI 图形，预计 减少 25% 至 35% 无损地从 PNG 迁移到 WebP。进入 WebP 的有损模式，节省量会显着增加，通常为 60% 到 70%，同时仍然保留 Alpha 通道。 PNG根本没有有损选项，因此它无法在低端市场竞争。在拥有数十个图像资源的网站上，这种差异会导致每个页面加载数百千字节。

差距来自于更智能的压缩。 PNG的DEFLATE算法是借用自ZIP的通用方法，擅长查找文字重复。 WebP 使用专门为图像构建的预测编码，从相邻块猜测每个块并仅存储差异。这种图像感知方法可以发现 DEFLATE 无法看到的节省，这就是为什么 2010 年的格式如此一致地击败 1996 年的格式。

透明度：两者都有，WebP 做得更多

与 JPG 不同，这两种格式都带有完整的 Alpha 通道，因此徽标在任何一种格式中都保持透明。但 WebP 添加了 PNG 无法匹配的东西： 有损模式下的透明度。 PNG 的透明度仅具有无损压缩，因此半透明图形必须以完全无损的重量存储。 WebP 让您同时拥有透明背景和积极的压缩，这正是厚重的 PNG 徽标所需要的。对于必须保持透明同时重量更轻的 UI 资产和产品切口来说，这种组合是 WebP 最有力的论据。

质量：无损和有损模式

WebP 提供这两种模式，这使得它具有 PNG 所不具备的灵活性：

无损WebP 与 PNG 完全匹配，逐个像素，同时生成较小的文件。不存在质量取舍，只有尺寸取胜。
有损WebP 像 JPG 一样丢弃细节，进一步缩小文件，并且与 JPG 不同的是它仍然可以保持透明度。

PNG 只提供无损格式，这就是它保持很大的原因。如果您需要完美的副本，无损 WebP 可以为您提供更小的副本。如果您可以接受无形的损失，有损 WebP 将为您提供一小部分大小。不管怎样，WebP 设置胜过 PNG。

浏览器和软件支持

这是巴布亚新几内亚唯一真正的优势，而且这一优势正在缩小。 每个现代浏览器都支持 WebP，包括 Chrome、Firefox、Safari 和 Edge，因此在开放网络上兼容性问题基本上得到解决。差距还存在于其他地方：一些较旧的桌面软件、某些电子邮件客户端、较旧的 Office 版本和旧平台仍然拒绝 WebP。上传表单是另一个陷阱，因为许多表单只接受 JPG 和 PNG，并且会完全拒绝 WebP 文件。

因此，诚实的总结是，WebP 对于您的网站来说是安全的，但对于您交给未知系统的文件来说却存在风险。对于任何超出您控制的情况，PNG 仍然是通用的后备方案。

动画：WebP 也取代了 GIF

PNG 所缺乏的一项功能就是动画。标准 PNG 保留单个帧，虽然 APNG 扩展存在，但支持始终不一致。 WebP 支持 原生动画具有完整的 Alpha，生成的文件比同等 GIF 小得多，同时显示数百万种颜色，而不是 GIF 的 256 种颜色。如果您要选择短循环图形的格式，WebP 绝对胜过 PNG 和 GIF。

为什么 WebP 可以加快网站速度

页面权重直接输入 最大的内容涂料，Google 的核心网络生命之一和已确认的排名信号。图像通常是页面上最重的东西，因此将每个图像削减三分之一会对加载时间、LCP 分数和跳出率产生可衡量的影响。更快的页面转换效果也更好，这就是为什么性能工作会得到双倍回报的原因。

大多数网站使用的实用模式是渐进式的：向支持它的浏览器提供 WebP，其余的则回退到 PNG 或 JPG。现代 HTML 使用图片元素自动处理此问题，并且大多数内容管理系统和图像服务都会为您完成此操作。您可以在不破坏老客户任何东西的情况下获得速度优势。

何时使用每种格式

使用 网络P 对于网站图像，尤其是具有透明度的徽标和图标，其中较小的文件意味着更快的页面。
使用 网络P 当您需要透明度和小尺寸时，因为它是唯一同时提供这两种功能的常见格式。
使用 巴布亚新几内亚 当图像必须在任何程序中打开时，包括旧软件和电子邮件客户端。
使用 巴布亚新几内亚 适用于明确列出可接受格式并省略 WebP 的上传表单和系统。
使用 巴布亚新几内亚 作为您的档案大师，因为对于您永久保存的文件来说，普遍支持比大小更重要。

如何将 PNG 转换为 WebP

转换无需安装。打开我们的转换器，添加 PNG，然后选择保持透明度的选项，以导出 WebP。处理通过 HTML5 Canvas API 在本地运行，因此不会上传任何内容，并且您可以一次批处理多个文件。透明背景完好无损，而文件变得更轻。完整的演练位于 PNG 转 WebP 指南。

AVIF 怎么样？

值得了解的上下文：AVIF 是一种更新的格式，其压缩效果甚至比 WebP 还要好，通常还要小 20%，而且它还支持透明度和动画。浏览器支持现在很好，但稍微落后于 WebP，软件支持还更落后。对于当今的大多数网站来说，WebP 是务实的选择，在节省和支持方面实现了最佳平衡，随着采用率的增长，AVIF 值得关注。巴布亚新几内亚仍然是这两种情况下的后备力量。

判决结果

WebP 凭借技术优势全面获胜：更小的文件、无损和有损模式下的透明度、动画以及完整的现代浏览器支持。巴布亚新几内亚在一件仍然重要的事情上获胜，毫无疑问，这件事绝对是到处开放的。将 WebP 用于您的网站，将 PNG 用于您发送到未知领域的任何内容，并在您需要两者时为 WebP 提供 PNG 后备。对于更宽幅的图片， PNG 与 JPG 指南覆盖照片适合的地方。

现实世界的尺寸示例

抽象百分比的帮助小于实际数字，因此典型资产的差距如下所示：

一个 500 x 500 像素徽标 具有透明度：PNG-24 约为 45KB，无损 WebP 约为 30KB，有损 WebP 低于 12KB，且 Alpha 通道完好无损。
一个 全角英雄图形 带软阴影：PNG 通常为 400KB 或更多，无损 WebP 大约为 260KB，有损 WebP 则远低于 100KB。
一个 用户界面图标集 二十个小图形：在进行任何有损调整之前，整个集合可以无损地从大约 200KB 下降到 130KB。

将英雄示例乘以十几个页面，在慢速连接上节省的加载时间就是几秒钟，这正是 Core Web Vitals 衡量的差异。

转换现有的 PNG 库

大多数站点一开始都不是干净的；他们已经部署了数百个 PNG。三种方法都有效，具体取决于您的设置。如果您的网站在现代框架或 CMS 上运行，则图像管道可能会自动转换并提供 WebP，因此您可以更改设置而不是文件。如果您使用 CDN 或图像服务，大多数都会提供 自动格式协商，从同一个源文件将 WebP 传递给接受它的浏览器，将 PNG 传递给不接受它的浏览器。如果您手动管理文件，批量转换资源和更新参考文献是可行的，尽管这是最费力的。

无论您选择哪条路线，请保留原始 PNG。他们是你的主人，你可能需要他们来构建稍后拒绝 WebP 的系统。

要避免的常见 WebP 错误

一些陷阱让人们转向 WebP：

转换您的档案母版： 转换副本以供交付并保留 PNG 原件，因为桌面软件中的 WebP 支持范围较窄。
在文本图形上使用有损 WebP： 有损压缩会像 JPG 一样弄脏清晰的字母。使用无损 WebP 进行屏幕截图和文本较多的图像。
跳过回退： 提供没有 PNG 或 JPG 替代方案的 WebP 会破坏旧客户端和某些电子邮件上下文的形象。
发送WebP上传表单： 许多人只接受 JPG 和 PNG，并会彻底拒绝该文件。

这些都不是避免 WebP 的理由。它们是在它所属的地方使用它的原因，即交付给现代浏览器，同时保留 PNG 供大师和任何离开你控制的东西使用。

浏览器实际上如何选择格式

提供两种格式听起来很复杂，但机制很简单且自动。每个浏览器都会随每个图像请求发送一个 Accept 标头，列出它理解的格式。服务器或 CDN 读取该标头，并从同一 URL 将 WebP 返回到宣传支持的浏览器，或将 PNG 返回到不支持的浏览器。在 HTML 中，您可以使用 picture 元素明确执行相同的操作，首先列出 WebP 源，然后列出 PNG 后备；浏览器选择它可以读取的第一个并忽略其余的。不管怎样， 没有访客会看到破损的图像，现代浏览器悄悄地获取较小的文件，而旧浏览器则获取兼容的文件。

常见问题

WebP 比 PNG 更好吗？

从技术上来说是的。 WebP 文件小 25% 到 35%，保持透明度，并添加 PNG 缺乏的有损和动画模式。 PNG 仅在通用兼容性上获胜。

WebP 是否支持 PNG 等透明度？

是的，还有更进一步。 WebP 在无损和有损模式下均保留 alpha 通道，而 PNG 仅提供无损压缩的透明度。

WebP 比 PNG 小多少？

通常 无损缩小 25% 到 35%，在有损模式下缩小 60% 到 70%，同时仍保持透明度。

所有浏览器都支持 WebP 吗？

每个现代浏览器都支持 WebP，包括 Chrome、Firefox、Safari 和 Edge。一些较旧的桌面软件和上传表单仍然拒绝它。

哪些格式支持透明度和动画？

WebP 两者兼而有之。 PNG 有透明度，但没有可靠的动画，而 GIF 有动画，但仅限于 256 种颜色，透明度较差。

WebP 或 PNG 哪个更适合网站？

WebP，为了速度。 较小的文件可改善最大的内容绘制，一个 Core Web Vitals 排名信号。为老客户提供 PNG 后备服务。

我应该使用 WebP 还是 AVIF？

WebP，目前为止。 AVIF 的压缩率提高了约 20%，但支持范围更窄，因此 WebP 是当今节省和兼容性的务实平衡。

我可以将 WebP 文件上传到表单吗？

通常不会。 许多上传表单仅接受 JPG 和 PNG，因此当系统列出其接受的格式并忽略 WebP 时，请转换为其中一种格式。

我应该将现有的 PNG 文件转换为 WebP 吗？

转换副本以供交付，而不是您的母版。 保留原始PNG，因为桌面软件和上传表单中的 WebP 支持范围较窄。

有损 WebP 适合带有文本的屏幕截图吗？

不。 有损压缩会弄脏锐利的字母，与 JPG 完全相同。使用无损 WebP 制作文本较多的图形和屏幕截图。

我还需要使用 WebP 进行 PNG 后备吗？

为了最大程度的安全，是的。 现代浏览器都读取 WebP，但较旧的桌面软件、某些电子邮件客户端和许多上传表单仍然不支持。

浏览器如何知道是加载 WebP 还是 PNG？

通过 接受每个请求发送的标头，其中列出了支持的格式。服务器和 CDN 读取它并自动返回 WebP 或 PNG 后备。