跳到主要内容
Hemen Dönüştür
Choose language: zh

文件格式

什么是 WebP？Google 图片格式完全指南

WebP 是 Google 为网页打造的图片格式，把有损和无损压缩、透明度和动画集于一种文件类型。本文介绍它的工作原理、容易出问题的地方以及转换方法。

作者: Hemen Dönüştür Editör Ekibi发布日期: 阅读约 7 分钟

WebP 格式指南封面图

WebP 是 Google 为缩小网页图片而开发的图片格式。它把 JPG 式的有损照片压缩、PNG 式的无损压缩与透明度，以及 GIF 式的动画整合到一种文件类型中。所有当前浏览器都能显示 WebP，但下载下来的 WebP 在旧软件里打不开，仍是一个常见的烦恼。本文将介绍 WebP 的工作原理、它实际能节省多少空间，以及转换时需要注意的地方。

WebP 简史

Google 于 2010 年 9 月 30 日在 Chromium 博客上发布了 WebP。第一个版本只提供有损压缩，基于 VP8 视频编解码器的帧内编码。此后几年里格式不断扩展：Google 的 WebP 常见问题列出，无损压缩和透明度从 Chrome 23 开始支持，动画从 Chrome 32 开始支持。很长一段时间里，WebP 只由 Google 自己的文档定义；2024 年 11 月，它由 IETF 发布为 RFC 9649，这是一份由 Google 工程师 J. Zern、P. Massimino 和 J. Alakuijala 撰写的信息性文档，同时注册了 image/webp 媒体类型。

WebP 的工作原理

RIFF 容器

根据 RFC 9649，WebP 基于 RIFF（Resource Interchange File Format，资源交换文件格式）。文件以 RIFF 头和 WEBP 签名开头，图像数据存储在一个个块中。这种结构让同一种格式可以并存不同的压缩类型和附加数据。

有损 WebP（VP8）

有损 WebP 使用 VP8 帧内编码，把图像存储在 VP8 块中。它像 JPEG 一样按块处理，但会根据相邻像素预测每个块，只编码与预测值之间的差异；这种预测编码正是它优于 JPEG 的主要原因。根据 Google 的常见问题，有损 WebP 使用 8 位和 4:2:0 色度抽样（YUV420），因此颜色以一半的分辨率保存，与 JPEG 的常见设置相同。

无损 WebP（VP8L）

无损模式使用一种完全不同的比特流 VP8L。RFC 9649 将其描述为 LZ77、前缀编码和颜色缓存的结合；再加上根据一个颜色通道预测另一个颜色通道等变换，它的压缩效果优于 PNG。它处理每通道 8 位的 ARGB 数据。

透明度与动画

无损 WebP 直接包含 alpha 通道。在有损 WebP 中，透明度存储在单独的 ALPH 块中，因此照片部分可以是有损的，而边缘保持完整的透明度。动画使用 ANIM 和 ANMF 块，用来设置每一帧的位置、以毫秒计的时长、混合方式和处置方式。与 GIF 不同，帧不受 256 色的限制。

限制

Google 的常见问题给出的 WebP 图片最大尺寸为 16383 x 16383 像素。WebP 不提供 JPEG 或 PNG 意义上的渐进式或隔行显示。它的色深限于 8 位，因此不适合 HDR 图像；这正是 AVIF 的优势所在。

WebP 实际能小多少？

根据 Google 自己的测量，在同等 SSIM 质量指数下，有损 WebP 图片比同类 JPEG 图片小 25-34%，无损 WebP 图片比 PNG 小 26%。Google 的同一页面还指出，无损 WebP 支持透明度只需额外增加 22% 的字节。这些是 Google 测试集上的平均值；你自己的图片收益可能更多也可能更少。

真实的网页数据也说明了类似的情况：HTTP Archive Web Almanac 2024 显示，移动端 WebP 图片的中位数为每像素 1.3 比特，JPEG 为 2.0，PNG 为 3.8。

浏览器与软件支持

根据 Can I use 的数据，完全支持 WebP 的浏览器占全球使用量的 97.18%（2026 年 10 月）。完全支持始于 Chrome 32、Firefox 65、Edge 18 和 Safari 16，Safari 14 和 15 提供部分支持。MDN 指出，在 macOS 上，Safari 需要 14 或更高版本，并搭配 macOS Big Sur（11）或更新的系统才能显示 WebP。

WebP 的普及速度很快，但尚未达到 JPEG 或 PNG 的水平。W3Techs 2026 年 10 月的数据显示，在其监测的网站中有 22.7% 使用 WebP。根据 Web Almanac 2024，移动端页面上 12% 的图片是 WebP，这一比例在 2022 年至 2024 年间增长了约三个百分点。

如何在网站上提供 WebP

由于所有当前浏览器都能显示 WebP，大多数网站直接以 .webp 使用图片就足够了。如果还需要支持非常旧的浏览器，可以用 HTML 的 <picture> 元素先列出 WebP，再列出 JPG 作为备用。浏览器会选择它能理解的第一个来源：

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="描述性的替代文字" width="1200" height="800">
</picture>

一些服务器和内容分发网络会根据浏览器发送的 Accept 头，从同一个网址返回 WebP 或 JPG。这很方便，但也是人们在选择“图片另存为”时意外得到 WebP 文件的主要原因。

常见问题

下载的 WebP 打不开

许多网站在浏览器支持时会自动以 WebP 提供图片。选择“图片另存为”时，你得到的是一个 .webp 文件，而旧的看图软件、部分办公程序、冲印服务以及只接受 JPG 或 PNG 的上传表单都无法打开它。最实用的解决方法是把文件转换为 JPG 或 PNG。

动态 WebP 转换后不动了

JPG 和 PNG 不能承载动画。把动态 WebP 转换为这两种格式时，只会保留一帧。

透明度丢失了

把透明的 WebP 转换为 JPG 时，透明区域会被填充为纯色。如果需要保留透明度，请转换为 PNG。

WebP 文件比预期大

把已经压缩得很好的 JPG 转换为 WebP 并不总能节省很多空间，重新编码还会带来少量画质损失。如果选择了无损 WebP，文件甚至可能比源文件更大。

WebP 转换技巧

  • 要在任何地方打开 WebP：照片请用 WebP 转 JPG，透明图片和锐利的图形请用 WebP 转 PNG。动态 WebP 文件只会转换第一帧。
  • 要缩小网站图片：我们的 JPG 转 WebP 和 PNG 转 WebP 工具默认使用画质 80。对大多数照片来说，这能明显缩小文件，而损失很难察觉。
  • 标志和屏幕截图请勾选“无损 WebP”。每个像素都会精确保留，透明度也不变，但文件比有损模式大，甚至可能超过源文件。
  • 要一次转换多种格式，请使用图片格式转换工具；一次最多可以添加 50 个文件，并以 ZIP 形式下载结果。
  • 这些转换在你的浏览器中运行，文件不会离开你的设备。EXIF 和位置信息不会写入输出文件。

常见问题

WebP 是有损还是无损？

两者都是。WebP 有两种独立的压缩模式：有损（VP8）和无损（VP8L）。文件扩展名相同，使用了哪种模式记录在文件内部的块中。

WebP 能在 Safari 和 iPhone 上打开吗？

能。当前版本的 Safari 完全支持 WebP。根据 Can I use，Safari 14 和 15 为部分支持，Safari 16 开始完全支持。

WebP 的画质比 JPG 好吗？

格式本身并没有“画质更好”一说；WebP 通常在相同文件大小下图像更好，或在相同图像质量下文件更小。在 Google 的测量中，同等质量下这一差距为 25-34%。

应该用 WebP 还是 AVIF？

AVIF 通常能为照片生成更小的文件并支持 HDR，但编码较慢，在旧设备上获得支持的时间也更晚。WebP 编码速度快，支持历史也更久。在网站上，常见的做法是通过 <picture> 元素同时提供两者，并保留 JPG 作为备用。

WebP 图片会影响 SEO 吗？

WebP 本身不是排名因素，但更小的图片有助于页面更快加载。关键在于以合适的尺寸、配上描述性的替代文字，并快速地提供图片。

WebP 文件可以打印或用邮件发送吗？

可以，但收件人的软件可能打不开 WebP，冲印服务和一些企业上传表单也常常只接受 JPG、PNG 或 PDF。分享前把照片转换为 JPG、把透明图片转换为 PNG，可以确保文件在任何地方都能打开。

参考资料

相关转换工具

相关文章

全部文章