WebP 是什么？WebP、PNG 与 JPG 对比及适用场景

WebP 是什么？WebP 是 Google 开发并于 2010 年发布的一种图片格式。WebP 文件（.webp）可以用基于 VP8 视频编解码器的有损压缩保存图片，也可以用无损压缩保存，两种模式都支持 Alpha 透明和动画。它的目的很简单：在视觉质量相近的情况下，文件比 JPG、PNG 或 GIF 更小。

免费试用：图片转 WebP 免费使用，无需注册账号。

正因如此，WebP 成了许多网站的默认选择，这也是你现在从网上保存图片时经常得到 .webp 文件的原因。本文将介绍 WebP 文件是什么、WebP 与 PNG、WebP 与 JPG 的实际对比、哪些场景不适合用 WebP，以及如何打开和转换 WebP。如果现在就想把 PNG 或 JPG 转成 WebP，可以使用免费的图片转 WebP 转换器，它直接在浏览器中运行。

WebP 是什么？格式的工作原理

WebP 文件是一个小巧的容器（基于 RIFF，与 WAV 音频文件使用的结构相同），其中装有以下两种图像数据之一：

两种模式都可以带有用于透明的 Alpha 通道，而且一个 WebP 文件可以包含多帧并带有时间信息，这就是 WebP 动图（animated WebP），可以用更小的体积替代 GIF 动图。一张 WebP 图片最大可达 16,383 × 16,383 像素。

WebP 在 Google 之外也有正式文档：IETF 于 2024 年 11 月发布的 RFC 9649 描述了该格式，并注册了服务器在 Content-Type 标头中发送的 image/webp 媒体类型。

WebP 文件能小多少？

Google 的 WebP 文档根据其自身测试给出了以下数据：

这些是平均值，并非保证。换算成实际数字：一张 200 KB 的 PNG 截图转成无损 WebP 后约为 148 KB（200 × 0.74），一张 500 KB 的 JPEG 照片转成有损 WebP 后约为 330 KB 到 375 KB。对于一个包含十张 300 KB 照片（共 3,000 KB）的页面，同样的比例意味着 1,980–2,250 KB，每次无缓存访问可节省 750–1,020 KB。

单个文件的效果可能更好，也可能更差。已经被高度压缩过的 JPEG 重新编码后甚至可能变大，所以一定要把输出大小与原图进行比较。

WebP、PNG、JPG 与 AVIF 对比

JPG PNG WebP AVIF
压缩方式 有损 无损 有损和无损 有损和无损
透明 不支持 支持 支持 支持
动画 不支持 仅限 APNG 支持 支持
位深度 8 位 最高 16 位 8 位 8、10 或 12 位
浏览器支持 全面支持 全面支持 所有当前浏览器（Safari 14+） Chrome 85+、Firefox 93+、Safari 16.4+、Edge 121+
最适合 需要在任何地方打开的照片、打印、电子邮件 截图、Logo、编辑用母版 网页照片和图形、透明图或动图 网页图片，并以 WebP 或 JPG 作为后备

WebP 与 PNG 对比

WebP 比 PNG 更好吗？对网站来说，通常是的。无损 WebP 保留 PNG 的每一个像素，按 Google 的数据平均小 26%；带 Alpha 的有损 WebP 则能把透明背景的商品图压得更小。PNG 仍在三个方面占优：几乎所有程序都能打开它，它支持用于高精度编辑的 16 位色彩，而且作为日后还要编辑的母版文件更稳妥。对于带有细小彩色文字的截图，请使用无损而非有损 WebP，因为 4:2:0 色度抽样可能让细的红色或蓝色线条变模糊。

WebP 与 JPG 对比

对于网页上的照片，有损 WebP 能以更小的体积提供相近的质量，而且与 JPG 不同，它可以透明，也可以是动图。JPG 的优势在于兼容性：每台相机、打印机、每个电子邮件客户端和办公软件都能读取它。如果文件要在浏览器之外使用，JPG 更稳妥。

基于 AV1 视频编解码器的 AVIF 是更新的竞争者。它支持更高的位深度，通常还能压得更小，但编码更慢，获得支持也更晚。常见的做法是 AVIF 优先，WebP 其次，JPG 最后。

浏览器对 WebP 的支持

所有当前主流浏览器都能显示 WebP，包括无损、透明和动画文件：

只有旧系统无法支持，例如 Internet Explorer，或仍停留在 macOS 10.15 Catalina 的 Mac。Google 搜索也会将 WebP 图片编入索引：其图片指南将 BMP、GIF、JPEG、PNG、WebP、SVG 和 AVIF 列为受支持的格式。

什么情况下不该用 WebP

WebP 是面向屏幕的分发格式。以下情况请不要使用：

如何在网站上使用 WebP 并提供后备

由于所有当前浏览器都支持 WebP，一个普通的 <img src="photo.webp"> 几乎对所有人都有效。如果还要兼顾旧浏览器，请使用 <picture> 元素：浏览器会选择第一个它支持其 type 的 <source>，否则回退到 <img>。

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="明亮客厅里的一把蓝色扶手椅"
       width="1200" height="800">
</picture>

请在 <img> 上保留 alt、width 和 height，因为无论加载哪个文件，它们都会生效。另外请检查服务器是否发送 Content-Type: image/webp；在较旧的 Apache 配置中，可能需要在 .htaccess 中加入 AddType image/webp .webp。

WebP 对 SEO 的影响主要体现在速度上。Core Web Vitals 中的最大内容绘制（LCP）指标往往对应一张首屏大图，文件越小下载越快，在移动网络上尤其明显。我们的文章为什么图片加载速度对 Core Web Vitals 很重要介绍了 LCP 的测量方式，以及压缩和懒加载在其中的作用。但如果一张图片比它所占的区域宽四倍，仅靠换格式是解决不了问题的。

如何在 Windows 和 macOS 上打开 WebP 文件

如何打开 WebP 文件取决于你的系统：

如何转换 WebP

如何转换 WebP 取决于你需要的转换方向。

在浏览器中转为 WebP：TimeToTime WebP 转换器一次转换一张 PNG、JPG 或其他浏览器可读取的图片。在 1 到 100 之间选择质量（默认 80），点击“转换为 WebP”，工具会显示输出大小以及比原图小或大多少，例如一张 1,250,000 字节的 PNG 变成 412,500 字节的 WebP 时，会显示“比原图小 67%”。透明度会被保留，图片也从不离开你的设备。它没有批量模式，也不能调整尺寸，不会复制 EXIF 元数据，GIF 动图会变成静态图片。Safari 可能无法编码 WebP，此时工具会提示并保存为 PNG，所以请使用 Chrome、Edge 或 Firefox。如果还需要缩小尺寸，图像压缩器有“最大宽度”设置，也可以输出 WebP。

**在命令行中转为 WebP：**Google 的 libwebp 软件包中的 cwebp 工具可以转换单个文件，配合脚本也能转换整个文件夹：

cwebp -q 80 in.png -o out.webp
cwebp -lossless logo.png -o logo.webp

-q 用于设置 0 到 100 的质量（默认 75），-lossless 用于切换到无损模式。

*从 WebP 转为 PNG 或 JPG：*在 macOS 上，用“预览”打开文件，选择文件 › 导出*，然后选择 PNG 或 JPEG。在 Windows 上，用“画图”打开并使用文件 › 另存为*。在命令行中，dwebp in.webp -o out.png 会输出一个 PNG 文件。

常见问题

WebP 文件是什么？

.webp 文件是采用 Google WebP 格式的图片。它可以是照片（有损）、像素级精确的图形（无损）、透明图片或简短的动画，所有当前浏览器都能打开。

WebP 比 PNG 更好吗？

对网页来说通常如此：无损 WebP 在像素完全相同的情况下平均比 PNG 小 26%。对于编辑用母版、16 位图像以及别人需要用任意程序打开的文件，PNG 更稳妥。

转换为 WebP 会降低画质吗？

有损 WebP 会像 JPG 一样丢弃部分细节；在 75–85 的质量下，大多数照片很难看出差别。无损 WebP 则保留每一个像素。把 JPG 转成无损 WebP 并不能恢复 JPG 已经丢失的细节。

为什么网站用 WebP 而不用 JPG？

文件更小，加载更快，占用带宽更少，有助于改善最大内容绘制（LCP）。WebP 还支持透明和动画，这是 JPG 做不到的。

WebP 能转回 JPG 或 PNG 吗？

可以。在 Mac 上使用“预览”的导出功能，在 Windows 上使用“画图”的另存为，或在命令行中使用 dwebp。结果不会比 WebP 本身更好，所以请尽可能保留原始文件。

免费试用：图片转 WebP 免费使用，无需注册账号。