什么是 WebP？优势、缺点和浏览器支持
了解 WebP 格式、它如何压缩图像以及何时适合您的项目。
转换为 WebP简介
WebP 通常是在不改变外观的情况下缩小图像文件的最快方法。该格式已成为网络图像的默认选择，因为它可以在各种内容类型中提供更小的文件——从照片到具有透明度的图标。
许多团队仍然使用大型 PNG 和 JPG，因为格式选择令人困惑。诸如“有损”和“无损”之类的术语增加了不确定性，兼容性问题使人们停留在旧格式上。本指南解释了 WebP 实际上是什么、它擅长什么、缺点在哪里，以及今天的浏览器支持如何运作。
最后，您将了解 WebP 何时是正确的选择，以及如何自信地将图像转换为 WebP。
WebP 是什么（以及它不是什么）
WebP 是由 Google 开发并于 2010 年发布的光栅图像格式。像 PNG 和 JPG 一样，它将图像存储为像素网格。与这些格式不同，它从一开始就被设计为在不同图像类型中优化大小和质量。
WebP 支持两种压缩模式：
- 有损压缩 — 通过丢弃一些图像数据来减小文件大小。最适合照片和复杂图像，在这些图像中可以接受小的质量权衡。
- 无损压缩 — 精确保留每个像素。最适合标志、UI 元素以及具有尖锐边缘和纯色的图形。
WebP 还支持两种模式下的透明度（alpha 通道），PNG 支持但 JPG 不支持。此外，WebP 可以包含动画，使其在某些情况下成为 GIF 的潜在替代品。
WebP 不是什么：它不是矢量格式（为此使用 SVG），它不适合需要最大可编辑性的存档目的，并且并非所有图像编辑工具都普遍支持它——尽管支持已大大改善。
为什么 WebP 文件更小
WebP 通过更高效的压缩算法实现更小的文件大小。对于有损图像，它使用类似于 VP8 视频压缩的技术，该技术分析像素块并根据周围数据预测值。这种方法可以很好地处理渐变和复杂纹理。
对于无损图像，WebP 使用包括空间预测、颜色转换和熵编码在内的技术组合。结果通常是比等效 PNG 更小的文件，尽管差异因图像内容而异。
实际结果很简单：相同的图像，在相同的视觉质量下，通常在 WebP 格式中占用更少的字节。这对网络性能很重要，因为更小的图像意味着更快的页面加载和更少的带宽使用。
要了解有关选择压缩模式的更多信息，请阅读我们关于有损与无损 WebP 的指南。
WebP 与 PNG 和 JPG
了解何时使用 WebP 需要知道它与您可能已经在使用的格式的比较。
| 格式 | 最适合 | 透明度 | 典型大小 | 备注 |
|---|---|---|---|---|
| PNG | 无损图形、透明度 | 是 | 较大 | 通用支持；有时对于简单图形仍然较小 |
| JPG | 照片 | 否 | 中等 | 出色的照片质量；不支持 alpha |
| WebP | 照片和图形 | 是 | 较小 | 灵活；通常最适合网络交付 |
PNG 是无损图像和任何需要透明度的传统选择。它可以很好地处理纯色和尖锐边缘。然而，PNG 文件可能很大，特别是对于照片或复杂图像。
JPG 针对照片进行了优化。它有效地压缩复杂图像，但不支持透明度。对于网络照片，JPG 已经是数十年的默认选择。
WebP 处理两种情况。它可以像 JPG 一样有效地压缩照片，同时也像 PNG 一样支持透明度。对于大多数网络交付场景，WebP 在没有可见质量损失的情况下产生最小的文件。
有关详细分类，请参阅我们的 WebP 与 PNG 比较。
浏览器支持和兼容性
WebP 解码现在受到所有主要浏览器的支持：Chrome、Firefox、Safari、Edge 和 Opera。Safari 在 2020 年（macOS Big Sur 和 iOS 14）添加了支持，这是最后一个主要的坚持者。这意味着您可以向绝大多数用户提供 WebP，而不会出现兼容性问题。
对于使用旧浏览器的少数用户，您可以使用 HTML <picture> 元素提供回退：
<picture>
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Example image" />
</picture>此模式向支持它的浏览器提供 WebP，并向不支持的浏览器回退到 JPG 或 PNG。
一个技术说明：在浏览器中将图像转换为 WebP 需要通过 Canvas 进行 WebP 编码支持。现代浏览器可以处理这个问题，但转换能力与显示 WebP 图像的能力是分开的。像 img2webp.com 这样的工具使用基于 Canvas 的编码直接在浏览器中生成 WebP 文件。
何时使用 WebP（以及何时不使用）
WebP 是网络图像交付的强大默认选择。在以下情况下使用它：
- 文件大小很重要 — 更快的页面加载、更低的带宽成本、更好的核心网络指标分数。
- 您需要透明度 — WebP 可以很好地处理 alpha 通道，通常文件比 PNG 小。
- 您正在提供照片 — 有损 WebP 通常在类似质量下在大小上优于 JPG。
- 您想要一种格式 — WebP 适用于摄影和图形内容。
在以下情况下考虑保留 PNG 或 JPG：
- 您的管道需要它 — 某些 CMS 平台、电子邮件客户端或旧工具不接受 WebP。
- 您需要最大兼容性 — 尽管很少见，但某些环境仍然缺乏 WebP 支持。
- 您需要极端的无损精度 — 对于存档或编辑工作流程，PNG 可能是首选。
如果最大压缩至关重要，并且您可以接受较窄的浏览器支持，AVIF 值得探索——它通常比 WebP 压缩得更好，尽管支持还不那么普遍。
如何将图像转换为 WebP
使用 img2webp.com 将图像转换为 WebP 非常简单：
- 上传您的图像 — 拖放、浏览、从剪贴板粘贴或从 URL 或云存储导入。
- 选择您的设置 — 选择有损或无损模式。对于有损，调整质量滑块。
- 下载结果 — 保存 WebP 文件或将多个文件下载为 ZIP 存档。
有关分步说明，请遵循我们的JPG 到 WebP 教程（用于照片）或我们的 PNG 指南（用于透明图像）。
总结
WebP 是网络图像的实用默认选择。它平衡了文件大小、质量和功能——支持有损和无损压缩、透明度和动画。浏览器支持现在对解码是通用的，转换工具使其易于采用。
该格式并不总是答案——某些工作流程需要 PNG 或 JPG——但对于网络交付，WebP 通常在大小上获胜而不牺牲视觉质量。