笔者在进行网站性能优化时，使用了Lighthouse检查网络性能，发现首页轮播模块的图片加载时间比较长，需要进行优化。Lighthouse性能报告建议使用WebP图片代替PNG或者JPG，于是笔者尝试使用了一下WebP图片并记录了这一过程。阅读本文你将了解到：1.什么是WebP格式的图片？2.相比PNG或者JPG图片它具有什么优势？3.如何使用现有的JPG或者PNG图片生成WebP图片？4.页面中如何使用WebP格式的图片？

什么是以及为什么需要使用WebP图片？

下图为Lighthouse性能分析报告，提示使用WebP代替PBG图片：

点击上图中蓝色连接，跳转后为文章：Serve images in modern formats 。 文中讲到AVIF 和 WebP格式的图像，与旧的 JPEG 和 PNG 格式图像相比，它们具有更好的压缩和质量特性。以AVIF和WebP格式来编码图片可以带来更快的加载速度并且消耗的网络流量会更少。最新版本的 Chrome、 Firefox、 Safari、 Edge 和 Opera 都支持 WebP，并且为图片提供了更好的损耗和无损数据压缩。

在文章 网站的图片格式 中介绍了WebP 无损图片的大小比 PNG 图片小 26% 。WebP 有损图片比采用等效 SSIM 质量索引的同类 JPEG 图片缩小 25-34% 。无损 WebP 支持透明度（也称为 Alpha 通道），费用仅为 22% 的额外字节。在可以接受有损 RGB 压缩的情况下，有损 WebP 也支持透明度，其提供的文件大小通常比 PNG 小 3 倍。动画 WebP 图片均支持有损、无损和透明度，与 GIF 和 APNG 相比，这种格式可以减小文件大小。

WebP图片这么好，其兼容性如何呢？Google Chrome、Safari、Firefox、Edge、Opera 浏览器以及许多其他工具和软件库本身就支持 WebP。开发者还添加了对各种图片编辑工具的支持。

如何创建WebP图片？

以上我们了解到WebP图片具有压缩率高、质量好、兼容性好的特点, 那么我们如何根据已有PNG或者JPG图片生成WebP图片呢？文章 Serve images in modern formats 介绍了转换的工具，见下图：

点击上图连接，跳转到文章：使用命令行创建 WebP 图片 。文章中提示我们可以安装用于进行格式转换的命令行工具：

点击上图连接跳转到文章：预编译实用程序 ，如下图所示：

点击上图中”下载代码库“连接跳转到网址：Index of downloads.webmproject.org/releases/webp，如下图所示：

由于笔者是windows系统所以就下载了WebpCodecSetup.exe文件，并点击安装。之后就可以用命令行的方式来使用。使用如下命令可以生成WebP格式的图片：

cwebp -q 80 image.png -o image.webp

如何使用WebP图片？

得到WebP格式图片后我们应如何使用呢？可以参考文章：使用命令行创建 WebP 图片中的内容，见下图：

如上图所示，使用主要是使用picture标签，参照上例，笔者将原来只使用img标签的代码，修改为如下代码：

<picture>
  <source
    type="image/webp"
    srcset="../../../assets/interest-map.webp"
  />
  <source
    type="image/png"
    srcset="../../../assets/interest-map.png"
  />
  <img
    v-show="item.title === '兴趣地图'"
    class="banner-bg lazyload"
    data-src="../../../assets/interest-map.png"
  />
</picture>

在w3school的文档HTML 标签中介绍了picture标签可以使网页开发人员在指定图像资源方面更加灵活，如果我们设置了不同的来源，那么符合首选项的第一source就是所使用的来源。例如笔者的代码中，第一个source是webp格式的图片，那么当浏览器兼容WebP图片时则优先使用WebP图片。

总结

WebP格式的图像，与旧的 JPEG 和 PNG 格式图像相比，具有更好的压缩和质量特性。可以使用现有工具，如cwebp将其他格式图片转为WebP格式图片。在网页中使用WebP图片则通过使用picture标签结合source标签和img标签。