在考虑改善网站显示速度时，几乎必然会作为候选被提及的，就是图像格式「WebP」。本文将从WebP的概要，到导入的优点与缺点、浏览器支持情况，以及画质的保障，把做出导入判断所需的信息汇总起来加以讲解。

首先用手边的图像试一试

体会WebP效果的最快捷径，就是实际转换一次图像。使用Google提供的免费工具「Squoosh」，只需把图像拖放到浏览器中，就能用滑块对比转换前后的外观，并且当场显示缩减后的文件大小。无需安装也无需注册，因此在继续阅读之前，请务必先亲身体验一下，看看您手边的照片能变轻多少百分比。

WebP的概要

WebP是Google于2010年开发并公开的图像格式。名称是将「Web」与「Picture」组合而成，正如其名，它针对Web上的图像显示进行了优化。扩展名为「.webp」，MIME类型为「image/webp」。2024年，其规范已由IETF正式标准化为RFC 9649 [5]。

它以替代传统的JPEG、PNG、GIF为目的而设计，在单一格式中兼备如下特征 [1][4]。

  • 同时支持有损压缩（相当于JPEG）与无损压缩（相当于PNG）
  • 支持透明（Alpha通道） — 可实现像PNG那样的背景透明
  • 支持动画 — 也可作为GIF的替代使用

也就是说，此前需要按用途在JPEG、PNG、GIF之间分别使用的功能，仅用WebP一种即可覆盖。

导入的优点

1. 能够大幅缩减文件大小

WebP最大的优点在于文件大小之小。根据Google的官方文档，无损压缩比PNG小26%，有损压缩在同等画质（SSIM画质指标）下比JPEG小25～34% [1]。这些数值基于Google公开的压缩效率比较研究（WebP Compression Study / Lossless and Alpha Study） [2][3]。

由于图像占据了网页数据传输量的大部分，因此这一缩减效果会直接带来显示速度的改善。

2. 通过显示速度提升改善用户体验与SEO

页面显示速度也会影响Google的搜索评估指标（Core Web Vitals）。在Google的PageSpeed Insights中，「以新一代格式提供图像」被作为改善项目提示出来，并推荐使用WebP。显示速度的改善也有助于降低跳出率、提升转化率。

3. 削减通信成本与服务器负载

文件大小变小，服务器的传输量与CDN的分发成本也随之削减。访问量越大的站点，效果越显著。

导入的缺点与注意点

1. 部分较旧的环境无法显示

主要浏览器均已支持，但在Safari 13及更早版本（2020年以前的iOS/macOS），以及已终止支持的Internet Explorer等较旧的环境中无法显示。对于企业内部系统等旧环境被固定的情形，需要加以注意。

2. 存在不支持的图像编辑软件与服务

部分图像编辑软件、社交媒体或外部服务，可能无法直接处理WebP。考虑到素材的往来交换与二次利用，采用原图以JPEG/PNG保管，WebP仅作为分发用的转换目标的做法较为稳妥。

3. 会产生转换的工夫

需要构建对既有图像进行批量转换、或在上传时自动转换的机制。不过，使用后文介绍的工具或CMS插件，这一负担可以变得相当小。

4. 不适合对有损压缩图像进行再编辑

对经过有损压缩的WebP反复编辑、再保存，画质会逐渐劣化。在这一点上，保管原始数据同样很重要。

浏览器支持情况（截至2026年）

根据Google官方文档以及MDN Web Docs，WebP在所有主要浏览器中都获得了原生支持 [1][4]。

浏览器支持情况
Google Chrome支持
Microsoft Edge支持
Firefox支持
Safari支持（版本14以后，2020年～）
Opera支持
Internet Explorer不支持（2022年终止支持）

根据浏览器支持数据库「Can I use」的统计，全球约96～97%的浏览环境可以显示WebP [6]。不受支持的仅限于IE、旧iOS/macOS设备上的Safari、Chrome出现以前的旧Android标准浏览器等极少数旧环境。

针对不支持环境的回退方案

若也要照顾到剩余的百分之几的环境，可以用HTML的<picture>标签实现向JPEG/PNG的分别提供。这一手法在MDN的参考文档中也被推荐，是一种标准的实现方式 [7]。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="图像说明">
</picture>

支持WebP的浏览器会显示WebP，不支持的浏览器则会自动显示JPEG。除此之外，Google官方FAQ还介绍了在服务器端查看Accept头进行分别提供的方法（内容协商）等 [8]。

画质能保障到何种程度

「压缩率高＝画质差」并非如此。根据Google官方FAQ，WebP的有损压缩在不损害画质的前提下，实现比JPEG平均高30%的压缩率 [8]。作为其依据，Google公开了使用画质评估指标（SSIM/PSNR）进行的大规模比较研究结果 [2]。

保障品质的要点如下。

  • 调整品质参数：转换时可指定品质（0～100）。若是照片，在品质75～85左右时，多数情况下能在几乎看不出外观劣化的同时大幅缩减大小
  • 转换前后的目视确认：使用开头介绍的「Squoosh」，可以将转换前后的图像并排比较，同时调整品质与压缩率的平衡
  • Logo与图版选择无损压缩：对于文字或纯色填充较多的图像，使用零劣化的无损压缩（PNG替代）即可完全保持画质
  • 以数值衡量效果：导入后，请用PageSpeed Insights等工具以数值确认显示速度的改善

导入方法与转换工具

  • cwebp / dwebp：Google官方的命令行工具。随libwebp（参考实现）一同附带，适合大量图像的批量转换 [1]
  • Squoosh（Google提供）：可在浏览器上一边确认品质一边转换的免费工具
  • WordPress插件：如「Converter for Media」「EWWW Image Optimizer」等。会在上传时自动转换，并向不支持的浏览器提供原始格式
  • 在CDN上自动转换：部分CDN服务支持基于浏览器判定的WebP自动分发

补充：更新的格式「AVIF」

还有一种比WebP压缩率更高的新一代格式，称为AVIF。关于AVIF，MDN推荐准备向WebP、JPEG、PNG的回退方案，因为它虽然具有出色的压缩性能，但浏览器支持的历史尚浅 [4]。较为现实的做法是，先从兼容性高的WebP开始导入，并根据需要考虑AVIF → WebP → JPEG的多级回退。

总结

  • WebP是Google开发的图像格式，用单一格式覆盖了JPEG、PNG、GIF的功能
  • 在同等画质下，比JPEG约轻25～34%、比PNG约轻26%，对显示速度与SEO有正面影响
  • 主要浏览器均已支持，约96～97%的环境可以显示
  • 对于不支持的环境，可用<picture>标签的回退方案加以应对
  • 通过调整品质参数与用工具目视确认，可在保持画质的同时完成导入

改善显示速度是一项对用户体验、SEO与成本削减都有效的举措。何不先从主要页面的图像开始，尝试一下WebP化呢？

参考资料

  1. Google for Developers「An image format for the Web | WebP」 https://developers.google.com/speed/webp
  2. Google for Developers「WebP Compression Study」 https://developers.google.com/speed/webp/docs/webp_study
  3. Google for Developers「WebP Lossless and Alpha Study」 https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study
  4. MDN Web Docs「Image file type and format guide（图像文件的种类与格式指南）」 https://developer.mozilla.org/ja/docs/Web/Media/Guides/Formats/Image_types
  5. IETF「RFC 9649: WebP Image Format」 https://datatracker.ietf.org/doc/rfc9649/
  6. Can I use「WebP image format」 https://caniuse.com/webp
  7. MDN Web Docs「<picture>: 图像元素」 https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/picture
  8. Google for Developers「Frequently Asked Questions | WebP」 https://developers.google.com/speed/webp/faq