WebP 是什么？一文读懂 Google 的下一代图片格式

如果你导出过 hero 图、注意到文件后缀是 .webp 而不是 .jpg 或 .png，那你其实已经”在不知不觉中”用过 WebP 了。它是过去十年里把大多数网站体积压掉三分之一的那个格式 —— 但即便如此，距离它正式发布已经过去十五年，很多团队还把它当作”小众选项”。

这篇文章是单格式的纵向解剖：WebP 到底是什么、从哪里来、压缩怎么工作、能做什么不能做什么、2026 年什么时候该选它。需要横向对比的话可以看 JPEG vs PNG vs WebP 和 AVIF vs WebP vs JPEG。

WebP 是什么？一句话定义

WebP 是 Google 开发的图片格式，2010 年 9 月 30 日首次发布。 它同时支持有损和无损压缩、透明（alpha 通道）、动画和元数据 —— 一个容器替代了 JPEG、PNG 和 GIF 的全部使用场景。从第一天起，它的设计目标就是”同等画质下文件更小”，所以它本质是个 Web 格式，不是母版/归档格式。

英文读作 “weppy”。官方扩展名是 .webp，MIME 类型是 image/webp。

WebP 简史：从 VP8 视频编解码器到 Web 标准

WebP 的设计选择背后有个关键事实 —— 它本质是从一个视频编解码器里”切”出来的图片格式。

• 2010-09-30 —— Google 发布 WebP，技术血缘来自随 On2 Technologies 收购拿到的 VP8 视频编解码器。首发版本只支持有损压缩。
• 2011-10-03 —— Extended File Format 上线，加入动画、ICC 色彩配置、XMP/Exif 元数据、平铺支持。WebP 从一个单帧编码器升级成一个真正的容器。
• 2011-11-18 —— Google 公布无损压缩与 alpha 通道。两者在 2012-08-16 发布的 libwebp 0.2.0 里默认启用 —— 这是 WebP 真正能替代 PNG 的时间点。
• 2014 —— Chrome、Opera、Android 浏览器原生支持上线；Firefox、Safari、Edge 还没动。
• 2018-2020 —— Firefox 65（2019 年 1 月）、Microsoft Edge（Chromium 内核重构后，2020 年）、最后是 Safari 14 / iOS 14（2020 年 9 月，macOS Big Sur 与 iOS 14 同步），全部加上原生解码。“WebP 是 Chrome 专属”的标签到此结束。

WebM 这个开源视频格式来自同一条 VP8 血脉，是 WebP 的姊妹项目。它们共用一套编码器底层，所以这十年里 Google 的同一个工程团队能同时推动两者迭代。

WebP 是怎么压缩的

WebP 在同一个容器里塞了两套独立的压缩模式：

有损 WebP 借用了 VP8 关键帧的 预测编码（predictive coding）。每个宏块（macroblock）都是从相邻块预测出来的，编码器只编码”预测值与实际像素之间的残差”。残差经过类 DCT 变换、量化，再做熵编码。相比 JPEG 那套基于分块 DCT 的更老的流程，预测让编码器只在”预测错的地方”花比特数 —— 平滑图像上效果最明显，本来就充满噪点的图像上提升相对有限。

无损 WebP 跟 VP8 没关系。它的压缩管线是：LZ77 风格的反向引用 + 自定义 Huffman 熵编码 + 颜色缓存前缀 + 小型逐图调色板。编码器还能在每张图上挑选不同的”变换（transforms）“做预处理，把像素流先洗成更容易压缩的形态。

实操结论：有损 WebP 对标 JPEG，无损 WebP 对标 PNG，而且编码器会逐图决定该用哪些变换。

WebP 能做哪些事

能力	WebP	JPEG	PNG	GIF
有损压缩	✅	✅	❌	❌
无损压缩	✅	❌	✅	✅
透明（alpha）	✅	❌	✅	⚠ 仅 1-bit
动画	✅	❌	❌	✅
ICC 色彩配置	✅	✅	✅	❌
Exif / XMP 元数据	✅	✅	✅	❌
平铺	✅	❌	❌	❌

简单说，WebP 等于 PNG + JPEG + GIF 三合一 —— 这就是为什么单一 Web 资源管线现在可以收敛到它一种格式，不用再按用途分叉。

文件体积：来自 Google 官方研究的真实数据

Google 自己的 WebP 压缩研究报告 在大约 11,000 张人脸检测过的 Web 图片加上 Kodak、Tecnick 标准测试集上、按相同 SSIM 对比 WebP 与 JPEG，得到的结论是：同等画质下，有损 WebP 比 JPEG 小 25 到 34%。

无损方面，Google 还有一份单独的 WebP 无损压缩研究，在 12,000 张 PNG 语料上对比，结论是：无损 WebP 比 libpng 默认输出小 42%，比 ZopfliPNG（目前最激进的 PNG 重编码器）小 23%。

几个值得注意的前提：

• 研究使用 SSIM 作为感知度量。SSIM 是一个合理的代理指标，但不完全等于”人眼看上去一样” —— 极低质量下，WebP 的优势会收窄。
• 25–34% 是 有损 WebP 的数字。无损 23–42% 的范围完全取决于你拿哪一种 PNG 编码器作对比。
• 压缩比与图像内容强相关。高噪点照片获益小于干净的插画或图形。

2026 年的浏览器支持情况

截至 2026 年 3 月，caniuse.com 数据显示 WebP 全球浏览器支持率为 96.39%。剩下大约 3.6% 集中在 Internet Explorer、非常旧的 Safari/Firefox 版本，以及一长串小众浏览器。

浏览器	原生支持起始版本
Chrome / Chromium	32（无损 + alpha）、17（有损）—— 2014
Edge	18（旧版）、79+（Chromium 重构后）
Firefox	65 —— 2019 年 1 月
Safari（macOS）	14 —— 2020 年 9 月（Big Sur）
Safari（iOS）	14 —— 2020 年 9 月
Opera	19+
Samsung Internet	4+

不 支持 WebP 的：

• Internet Explorer 5.5–11
• Safari ≤13.1（任何 Big Sur 之前的 Mac、任何 iOS 14 之前的设备）
• Firefox ≤64
• Chrome ≤8（现代分析里基本看不到）

实际操作上：如果用户里还有可观的 2020 年前 iOS 设备或者企业内网 IE 流量，用 <picture> 元素同时给一份 JPEG/PNG fallback。其它情况下，“只发 WebP”已经是站得住脚的默认选择。

你应该知道的 WebP 局限

WebP 不是免费的午餐。最值得拎出来说的几条：

• 只支持 8-bit YUV 4:2:0。WebP 不能编码 10-bit 或更高色深。HDR 工作流、需要 ≥10-bit 的广色域 Display P3 摄影、高保真图像编辑都得另找出路（HEIC、AVIF、JPEG-XL 都支持 10-bit；AVIF 和 JPEG-XL 还能到 12-bit 和 HDR）。
• 编码比 JPEG 慢。基于预测的 WebP 编码计算量比 JPEG 的 DCT 管线大不少。静态资源场景这没影响；但实时按需编码场景（比如 CMS 每个请求现编一份 WebP 而且不缓存），开销就值得考虑。
• 半透明区域可能有伪影。有损 WebP 在带半透明的平滑渐变上可能出现条带或边缘光晕。无损 WebP 没这个问题，但代价是文件更大。
• 桌面图像编辑器原生支持参差不齐。Photoshop 从 23.2 版本（2022 年 2 月） 起原生支持 WebP；Affinity Photo 2 在 2022 年加上了。更老的 Adobe 版本和不少图像编辑器还得装插件或借助外部转换工具。

什么时候该用 WebP

✅ 适合 WebP：

• 网站 hero 图、缩略图、文章正文里的内联图
• 比 PNG 体积更小、需要透明度的 UI 图标
• 替代 GIF 动图（通常能省 60–90% 体积）
• 由 CMS 驱动、可以同时配 JPEG/PNG fallback 的网站

❌ 不适合 WebP：

• HDR 或 10-bit 色深工作流（用 HEIC / AVIF / JPEG-XL）
• 需要后期编辑再导出的 RAW 母版（保留 RAW 或 DNG）
• 强制兼容 IE 的内网应用（用 JPEG/PNG）
• 高精度归档原件（无损 PNG 或 TIFF 兼容性更广）

要更深入”该选 WebP、AVIF 还是 JPEG”，看 AVIF vs WebP vs JPEG 和更通用的 如何为项目选择合适的图片格式。

Mac 上怎么生成 WebP 文件

Mac 上最简单的路径是 Zipic：在 设置 → 压缩 里把 输出格式 设为 WebP，挑一档压缩等级，然后把任意支持的图片（JPEG、PNG、HEIC、GIF 等）拖进窗口。Zipic 接受 12 种输入格式，批量转换且保留目录结构。

如果是构建管线场景，用 Homebrew 装 cwebp（brew install webp）然后接进 CI。WebP 专门的工作流细节见 Mac WebP 图片优化与转换工具。

常见问题

WebP 能做动画吗？ 能。Extended File Format 在 2011-10-03 加入了动画支持。同等画质下，动画 WebP 通常比同样的 GIF 小 60–90%，而且支持完整 24-bit 色彩和 alpha（GIF 受限于 256 色调色板和 1-bit 透明）。

有损还是无损 WebP？ 照片和连续色调的网页图选有损 —— 这是 25–34% 体积优势的来源。截图、插画、UI 元素、所有原本会用 PNG 的场合选无损。WebP 编码器默认对 .jpg 输入用有损，对 .png 输入用无损，多数情况下这就是对的。

WebP 在 iPhone 和 iPad 上能用吗？ 能，从 iOS 14（2020 年 9 月）开始。更老的 iOS 版本不能原生解码 WebP。如果用户里还有 2020 年之前的 iOS 设备，用 <picture> 提供一份 JPEG fallback。

用 WebP 对 SEO 有帮助吗？ 间接有。Google 的 PageSpeed Insights 会标记”非下一代格式”为优化项，并且更快的 Core Web Vitals（特别是 LCP）会被奖励。更小、加载更快的 WebP 图片能拉高 LCP 评分，而 LCP 已经是确认的排名信号之一。WebP 本身没有直接的 SEO 加成 —— 它带来的”速度”才有。

---

WebP 上线已经十五年，覆盖 96.39% 的浏览器流量，同等画质下比 JPEG 小 25–34%。它早就不是”未来” —— 它是 Web 图片现在的默认选项。免费下载 Zipic 在 Mac 上批量转 WebP，或升级到 Zipic Pro 解锁全部 12 种格式与不限张数。

相关文章

• JPEG vs PNG vs WebP：图片格式怎么选
• Mac WebP 图片优化与转换工具
• AVIF vs WebP vs JPEG：终极格式对比
• 优化网页图片性能完整指南
• 如何为项目选择合适的图片格式