之前写了一篇文章：jpg、gif、png 和 svg 用于 web 上，我们该如何选择最合适的图像格式，介绍了这几种图片格式的特点，以及如何为网站选择合适的图片，然后评论区有位大佬让我补充下 WebP 格式，于是乎它来了。

什么是 WebP 格式

WebP 是一种现代图像格式，可为 Web 上的图像提供出色的无损和有损压缩。 使用 WebP，网站管理员和 Web 开发人员可以创建更小，更丰富的图像，从而使 Web 更快。

与 PNG 相比，WebP 无损图像的尺寸要小 26％。 在同等的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。

无损 WebP 支持透明性（也称为 Alpha 通道），而仅增加了 22％ 的字节数。 对于可以接受有损 RGB 压缩的情况，有损 WebP 还支持透明性，与 PNG 相比，文件大小通常小 3 倍。

上面这 3 段话来源于 https://developers.google.com/speed/webp

为什么你需要这个格式

因为 WebP 图像比 JPEG 和 PNG 图像小-通常文件大小减少 25-35％。这样可以减小页面大小并提高性能。举 2 个例子：

• YouTube 发现，切换到 WebP 缩略图可将页面加载速度提高 10％。
• 当他们切换到使用 WebP 时，Facebook 节省了 25-35％ 的 JPEG 文件大小，节省了 80％ 的 PNG 文件大小。

WebP 是 JPEG，PNG 和 GIF 图像的理想替代品。 另外，WebP 提供无损压缩和有损压缩。 在无损压缩中，不会丢失任何数据。 有损压缩会减小文件大小，但会以降低图像质量为代价。

如何将图片转成 WebP 格式

通常，开发者会用如下两种方式来将图片转成 WebP 格式：

• cwebp 命令行工具
• Imagemin WebP 插件（npm 包）

如果你的项目比较简单或者你仅需要将图片转化一次，那么 cwebp 命令行工具是一个很好的选择；而如果你使用构建工具比如 Webpack 或 Gulp 等去构建你的项目的时候，那么将图片转 WebP 使用 Imagemin WebP 插件就是你最好的选择了。

当你需要把图片转成 WebP 格式的时候，你可以设置很多的参数，但是你最需要关心的就仅仅只是压缩质量，你可以指定一个压缩的质量等级，它的范围是从 0 ~ 100，0 表示质量最差，100 是最好。那么该把它设置成多少才最合适呢？这就需要你好好的花费一翻功夫去实践到底哪个质量等级是既兼顾了呈现质量又不会使得文件太大呢？

使用 cwebp 转换图片

使用这个命令前需要先安装它的工具包 webp，按照如下几个步骤操作即可：

• 可以去这下载 webp 工具包 ，这个网站提供了很多版本的包，选择一个和电脑匹配的包，比如我是 Mac 系统，我下载的是 libwebp-1.1.0-rc2-mac-10.15 版本的包，下载完成后解压，然后把解压后的文件夹放到你想要存放的目录，我是把他放到了 /Applications/Utilities/ 下；

• 设置环境变量，使得命令可以在终端下使用。而我是直接修改当前用户下的 .bash_profile...