在前端开发中，优化图片的大小是非常重要的一步。而针对 WebP 格式的图片，使用 cwebp 工具可以有效地压缩图片的体积，提高页面性能。本篇文章将介绍如何使用 npm 包 cwebp-bin 来压缩图片。
cwebp-bin 简介
cwebp-bin 是一个基于 Google 的 WebP 编解码器的 Node.js 命令行工具，通过该工具可以将 PNG/JPEG 图片转换为 WebP 格式，并进行压缩。使用 cwebp-bin 可以简单快捷地将图片压缩到更小的尺寸，从而提高页面加载速度和用户体验。
安装 cwebp-bin
首先，需要全局安装 cwebp-bin：
npm install -g cwebp-bin
安装完成后，可以通过以下命令验证是否安装成功：
cwebp --version
如果输出版本号，则说明安装成功。
使用 cwebp-bin
将图片转换为 WebP 格式
要将 PNG/JPEG 图片转换为 WebP 格式，只需在命令行中输入以下命令：
cwebp input.png -o output.webp
其中，“input.png”是原始图片的路径，“output.webp”是转换后的 WebP 图片的保存路径。当然，你也可以用 JPEG 格式的图片来替代 PNG 格式。
压缩图片
在转换为 WebP 格式的同时，也可以通过命令参数来压缩图片。例如：
cwebp input.png -o output.webp -q 80
其中，“-q”表示设置输出图片的质量，取值范围为 0-100，数值越大，图片质量越高，体积越大。这里将图片压缩到了 80% 的质量。
压缩多张图片
若要同时压缩多张图片，也非常简单。只需使用通配符来匹配需要压缩的图片路径即可。例如：
cwebp *.png -o output.webp
以上命令将压缩当前目录下所有后缀为 .png 的图片，并输出到 output.webp。
在 Node.js 中使用 cwebp-bin
除了在命令行中使用外，cwebp-bin 还支持在 Node.js 代码中调用。以下是一个基本示例：
-- -------------------- ---- -------
----- - ---- - - -------------------------
----------- --------- -- ------------- ------- ------- ------- -- -
-- ------- -
-------------------------------------
-------
-
-- -------- -
------------------------------
-------
-
------------------------------
---该示例使用 Node.js 内置的 child_process 模块来调用 cwebp 命令，并将输出打印到控制台。
总结
本文介绍了如何使用 npm 包 cwebp-bin 来将 PNG/JPEG 图片转换为 WebP 格式，并进行压缩。cwebp-bin 是一个非常便利的工具，可以帮助开发者快速地优化页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52167
