前言
现在越来越多的网站在使用 WebP 格式的图片。WebP 是由 Google 开发的一种能在网络上快速加载的图片格式。和传统的格式 PNG、JPEG 相比，WebP 有着更小的文件大小和更高的图片质量。
在前端开发中，我们经常需要将其他格式的图片转换为 WebP 格式，以提高页面的性能。而 webp-converter-cli 就是一个方便的 npm 包来帮助我们进行图片格式的转换。
本文将详细介绍 webp-converter-cli 这个 npm 包的使用方法，包括安装、使用、示例代码等内容。
安装
首先，你需要安装 Node.js 和 npm，这里不再赘述。
安装 webp-converter-cli：
npm install -g webp-converter-cli
其中，-g 参数表示全局安装。
使用
转换单个图片
假设我们有一张名为 example.png 的图片，我们可以使用以下命令将其转为 WebP 格式：
webp-converter example.png
以上命令将会创建一个名为 example.webp 的 WebP 格式的图片。
转换多个图片
我们可以将多个图片同时转换为 WebP 格式：
webp-converter a.png b.jpg c.gif d.tiff
以上命令会将 a.png、b.jpg、c.gif 和 d.tiff 四张图片同时转换为 WebP 格式。
转换指定文件夹下所有图片
假如我们需要转换指定文件夹下所有的图片，那么我们可以使用以下命令：
webp-converter src/images
其中，src/images 是图片存放的文件夹名。
此时，所有文件夹中的支持 WebP 格式的图片都会被转换为 WebP 格式。
自定义输出目录
我们可以使用 -o 或 --output-dir 参数来自定义 WebP 格式图片的输出目录：
webp-converter example.png -o dist/images
以上命令将生成一个名为 example.webp 的 WebP 格式图片，并将其输出到 dist/images 目录中。
压缩质量
我们可以使用 -q 或 --quality 参数来指定 WebP 格式图片的压缩质量，默认值是 75：
webp-converter example.png -q 60
以上命令将生成一个名为 example.webp 的 WebP 格式图片，并将质量压缩到 60。
压缩速度
我们可以使用 -s 或 --speed 参数来指定 WebP 格式图片的压缩速度，默认值是 4：
webp-converter example.png -s 1
以上命令将生成一个名为 example.webp 的 WebP 格式图片，并将压缩速度设为 1。
实例代码
下面是一个使用 webp-converter-cli 转换图片的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ---- - - -------------------------
----- --------- - -------------------- ---------------
----- ---------- - -------------------- ------- --------- ----------------
----- ------- - ---
----- ------- - --------------- ------------ -- ---------- -- ---------------
------------- ------- ------- ------- -- -
-- ------- -
--------------------- -------------------
-------
-
-- -------- -
---------------------- ------------
-------
-
-------------------- ------------
---以上代码会将 example.png 转换为 WebP 格式，并输出到 dist/images/example.webp 目录下。
结语
webp-converter-cli 是一个非常方便的 npm 包，可以帮助前端开发者轻松地将其他格式的图片转换为 WebP 格式，以提高网站的页面性能。在开发过程中，我们可以结合实际需求，使用其灵活的命令参数来满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd69