介绍
twebp 是一个优秀的 WebP 图片压缩工具，可以将 PNG、JPG、JPEG、GIF 等多种格式的图片压缩成 WebP 格式，该格式相比于 JPG、PNG 等格式可以在保证图片质量的前提下缩小图片大小，从而达到减少网站或应用加载时间、提升用户体验的效果。
npm 是 Node.js 的包管理工具，使用 npm 可以方便地下载、安装并管理项目依赖的各种包，twebp 就是其中一种可以通过 npm 下载的 JavaScript 包。
本篇文章将详细介绍如何使用 twebp 包进行 WebP 图片压缩。
安装
使用 npm 命令安装 twebp：
--- ------- ----- --
参数说明：
-g：表示全局安装，可以在命令行中直接使用 twebp 命令。
使用
压缩整个目录
进入需要压缩的目录，执行以下命令：
----- -------- -- --------
参数说明：
./images：需要压缩的图片所在的目录路径，可以是相对路径或绝对路径。-o：表示输出目录。./output：存放压缩后图片的目录路径，可以是相对路径或绝对路径。
压缩单个文件
执行以下命令：
----- --------- -- -----------
参数说明：
input.png：需要压缩的图片路径，可以是相对路径或绝对路径。-o：表示输出文件。output.webp：存放压缩后图片的文件路径，可以是相对路径或绝对路径。
设置压缩质量
使用 --q 50 参数设置压缩质量：
----- --------- -- ----------- --- --
参数说明：
--q：表示设置压缩质量。50：压缩质量的数值，取值范围为 0-100，一般情况下建议设置为 60-80 之间。
自动判断是否压缩
使用 --a 参数自动判断是否压缩：
----- -------- -- -------- ---
参数说明：
--a：表示自动判断是否压缩。-s：表示要压缩的图片的最小大小，单位是 KB。
压缩成功提示
使用 --s 参数可以开启压缩成功提示：
----- --------- -- ----------- ---
参数说明：
--s：表示开启压缩成功提示。
具体例子
假设有一张名为 test.png 的图片，需要将该图片压缩成 WebP 格式并保存到 output 目录中，可以按照以下方式操作：
- 在终端中进入图片所在目录：
cd /user/images - 执行 twebp 命令进行压缩：
twebp test.png -o output/test.webp - 压缩完毕后查看输出目录是否成功生成 WebP 格式的图片文件。
总结
通过本文的介绍，我们可以了解到使用 twebp 进行 WebP 图片压缩的详细教程，相信对于前端工程师们来说，该工具的运用将会带来更好的用户体验和更快的页面加载速度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566c081e8991b448e3108