WebP 格式：现代 Web 图像的高效解决方案
在网络世界里，每一毫秒都很重要。研究一致表明，即使是页面加载时间的微小延迟也会导致更高的跳出率、更低的转化率和用户的挫败感。图像通常占据典型网页总大小的一半以上，这使得图像优化成为你能对网站性能做出的最高影响力的改进之一。
这就是 WebP —— Google 对图像格式问题的解答。自 2010 年推出以来，WebP 悄然改变了我们对网络图像的思考方式，提供了十年前看似不可能的压缩效果。本指南将探讨 WebP 的独特之处以及如何在项目中有效利用它。
> 格式的诞生
WebP 源于 Google 让网络更快的宏大使命。2010 年，Google 的工程团队意识到现有的图像格式——1992 年的 JPEG、1996 年的 PNG、1987 年的 GIF——已经显示出老态。每种格式在特定场景下都表现出色，但没有一种针对现代网络的多样化需求进行优化。
突破来自一个意想不到的来源：视频压缩。Google 收购了 On2 Technologies，其 VP8 视频编解码器展示了出色的压缩效率。核心洞察简单但深刻：同样的数学技术可以压缩静态图像，通常比专门构建的图像编解码器效果更好。
WebP 继承了 VP8 的预测编码、变换压缩和熵编码，将它们组合成一种专门为网络传输设计的格式。结果是图像看起来与 JPEG 相同，但文件大小小 25-35%——这种差异直接转化为更快的加载时间和更低的带宽成本。
> WebP 如何实现更小的文件
理解 WebP 的压缩原理有助于解释它为什么效果如此好。该格式采用多种复杂技术协同工作，在保持视觉质量的同时最小化文件大小。
预测编码构成了基础。WebP 不是存储每个像素的绝对值，而是分析相邻像素并预测当前像素应该是什么。只存储预测与实际之间的差异——而这些差异通常很小，需要更少的位来编码。
变换编码获取预测值块并应用数学变换，将信息集中到更少的系数中。离散余弦变换（DCT）和沃尔什-哈达玛变换识别出我们眼睛敏感的模式，优先保留这些，同时丢弃我们不会注意到的细节。
熵编码然后获取变换后的数据，使用统计优化进行编码。频繁出现的值获得更短的表示；罕见的值获得更长的表示。WebP 根据内容使用霍夫曼编码和算术编码，选择产生更小输出的那个。
自适应量化产生最终差异。WebP 不是在整个图像上应用统一压缩，而是分析内容并按区域调整压缩级别。详细区域保留更多信息；均匀区域压缩更积极。结果是即使在显著的压缩比下感觉也是无损的。
> 格式版图中的 WebP
要选择正确的格式，你需要了解 WebP 与替代方案的比较。每种格式都有优势；WebP 的优势在于同时在多个维度上都很强。
对阵 JPEG
JPEG 仍然在摄影内容中无处不在，但 WebP 在同等质量下始终产生更小的文件。我们对数千张图像的测试表明，使用有损压缩时 WebP 平均小 28%。更重要的是，WebP 避免了 JPEG 臭名昭著的伪影——在高压缩级别下锐利边缘周围出现的块状失真。
WebP 还获得了 JPEG 完全缺乏的功能：透明度和动画。单个 WebP 文件可以包含透明区域（在 JPEG 中不可能）或多帧（否则需要 GIF 或视频）。对于现代 Web 应用来说，这些功能很重要。
对阵 PNG
PNG 擅长处理具有锐利边缘、文本和有限颜色的图形——Logo、图标、截图。它的无损压缩可以精确保留每个像素。WebP 也提供无损压缩，通常比等效的 PNG 文件小 26%。
对于照片和复杂图像，WebP 的有损模式显著优于 PNG。当详细照片的 PNG 文件膨胀到几兆字节时，WebP 保持在合理范围内。这就是为什么许多网站无论原始格式如何都会生成所有图像的 WebP 版本。
对阵 GIF
尽管技术上已经过时，GIF 仍然顽固地存在于动画中。它的 256 色限制造成可见的色带；按现代标准其压缩效率低下。WebP 动画图像通常比等效 GIF 小 64%，同时支持数百万种颜色和真正的透明度。
GIF 唯一剩余的优势是普遍支持——每个浏览器、电子邮件客户端和消息应用程序都能处理 GIF。但随着 WebP 支持在浏览器中变得普遍，这一优势缩小到电子邮件营销等特定上下文。
> WebP 闪耀的时刻
WebP 在特定场景中产生最大差异。了解这些有助于你确定转换工作的优先级。
主视觉图像和大型照片从 WebP 压缩中获益最多。500KB 的 JPEG 主视觉图像可能变成 340KB 的 WebP——节省 160KB 直接改善最大内容绘制（LCP），一个核心 Web 指标。
产品画廊和缩略图将这些节省乘以数十或数百张图像。拥有大量目录的电子商务网站在采用 WebP 后看到带宽成本大幅下降。
内容丰富的博客和新闻网站，文章包含多张图像，节省会迅速累积。每篇文章加载更快；使用有限数据计划的移动用户尤其受益。
社交分享图像可以针对支持 WebP 的平台进行优化，在内容走红时减少加载时间。
> 何时考虑替代方案
WebP 并不总是正确的选择。某些上下文需要不同的格式。
电子邮件营销活动 仍然与 WebP 支持斗争。许多电子邮件客户端会剥离或无法显示 WebP 图像。在支持改善之前，电子邮件内容坚持使用 JPEG 和 PNG。
印刷工作流程需要最大程度的质量保留。用于印刷的图像使用 TIFF 或 PNG；WebP 的有损压缩可能会引入在高分辨率打印中可见的伪影。
矢量图形应保持 SVG。将 SVG 转换为 WebP 会牺牲使 SVG 有价值的无限可缩放性和可编辑性。只有在目标真正需要时才栅格化 SVG。
遗留系统集成有时需要特定格式。如果你的内容管理系统、合作伙伴 API 或下游流程需要 JPEG 或 PNG，请满足这些要求。
> 在生产环境中实现 WebP
现代浏览器普遍支持 WebP，但生产实现仍应优雅地处理边缘情况。
Picture 元素方法
最健壮的实现使用 HTML 的 <picture> 元素来提供格式替代：
<picture>
<source srcset="hero.webp" type="image/webp">
<source srcset="hero.jpg" type="image/jpeg">
<img src="hero.jpg" alt="主视觉图像" loading="lazy">
</picture>
支持 WebP 的浏览器下载第一个源；其他浏览器回退到 JPEG。<img> 元素为不理解 <picture> 的古老浏览器提供最终回退。
CSS 背景图像
对于背景图像，现代 CSS 支持格式协商：
.hero {
background-image: url('hero.jpg');
background-image: image-set(
url('hero.webp') type('image/webp'),
url('hero.jpg') type('image/jpeg')
);
}
浏览器选择它们支持的格式；如果 image-set 本身不受支持，第一个声明提供回退。
构建时自动化
手动转换无法扩展。现代构建管道自动化 WebP 生成。类似的插件存在于 Webpack、Rollup 和其他打包工具中。像 WordPress 这样的内容管理系统提供插件，自动生成上传图像的 WebP 版本。
CDN 级转换
包括 Cloudflare、Fastly 和 AWS CloudFront 在内的领先 CDN 可以根据浏览器功能即时将图像转换为 WebP。这种方法需要最少的开发工作——启用一个功能，CDN 自动处理格式协商。
> 衡量影响
WebP 采用应该被衡量，而不是假设。需要跟踪的关键指标包括：
文件大小减少贯穿你的图像库。汇总差异以了解带宽节省。
**最大内容绘制（LCP）**通常在主视觉图像或首屏内容转换为 WebP 时会改善。在前后跟踪这个核心 Web 指标。
页面权重和总传输大小减少。像 WebPageTest 这样的监控工具显示聚合影响。
跳出率和参与度指标可能会随着页面加载更快而改善，尽管许多因素影响这些。
> 展望未来
WebP 的成功激发了进一步的创新。Google 的 WebP2 项目承诺比原始 WebP 好 15% 的压缩，尽管浏览器支持仍然初生。AVIF 基于 AV1 视频编解码器，以编码速度和复杂性为代价提供比 WebP 更好的压缩。
对于今天的大多数项目，WebP 代表了压缩、质量、浏览器支持和工具成熟度的最佳平衡。AVIF 最终可能会取代它，但 WebP 的广泛采用确保它在未来几年内仍然相关。
轨迹是明确的：图像格式将继续朝着更好的压缩和更多功能发展。构建健壮格式处理基础设施的团队——自动转换、适当的回退、性能监控——使自己能够无痛地采用未来的格式。
> 开始使用
过渡到 WebP 不需要大量努力。一个务实的方法：
从你最大的图像开始——主视觉图像、横幅、特色照片。绝对带宽节省在这里最大。
在你的构建管道或 CDN 中自动化生成。手动转换会造成维护负担并有遗漏图像的风险。
使用 <picture> 元素或 CSS image-set 实现适当的回退。不要为在非支持浏览器上的一小部分用户破坏体验。
衡量影响。确认文件大小下降且页面性能改善。与团队一起庆祝胜利。
无论你是优化现有网站还是构建新东西，WebP 都能以可控的实现工作量提供显著的收益。在性能直接影响用户体验和业务指标的网络中，这些收益在每次页面加载时都会复合。
对格式转换感兴趣？我们的免费 SVG 转 PNG 转换器可以直接在浏览器中处理你所有的图像转换需求。要深入了解矢量格式，请探索我们的 SVG 图片格式完整指南。