squoosh-cli 是 Google Squoosh 在线图像压缩工具的命令行版本，它将强大的图像编解码器和优化算法带到了本地开发环境中。与在线版本不同，squoosh-cli 允许开发者通过命令行批量处理图像，将其无缝集成到自动化构建流程中，实现高效、可控的图像资源优化。本教程将从基础安装开始，逐步深入探讨其核心功能、不同编码器的精细配置、高级用法以及在实际工作流中的应用，旨在帮助您充分利用这一工具提升 Web 性能和开发效率。

安装与初体验

要开始使用 squoosh-cli，您需要确保系统中已安装 Node.js 和 npm（或 yarn）。推荐进行全局安装，以便在任何目录下都能调用 squoosh 命令。打开您的终端或命令提示符，执行以下命令进行安装：

npm install -g @squoosh/cli

如果您不想进行全局安装，或者只是想临时试用，可以使用 npx 来执行，它会自动下载并运行最新版本的 squoosh-cli，无需全局安装：

npx @squoosh/cli --help

安装完成后，我们可以进行一个最简单的测试。假设当前目录下有一张名为 input.jpg 的图片，我们想将其压缩并保存到名为 output 的子目录中。只需执行：

squoosh-cli input.jpg -d output/

这条命令会使用 squoosh-cli 的默认设置来优化 input.jpg，并自动推断合适的输出格式（通常会保持原格式，但进行优化），然后将结果保存在 output 目录下，文件名通常会自动添加优化后缀（如 input-squoosh.jpg）。-d 参数用于指定输出目录，如果目录不存在，squoosh-cli 会自动创建。

核心概念与基础操作

squoosh-cli 的核心在于通过命令行参数精确控制图像的编码过程。最常用的参数之一是指定输出目录 -d 或 --output-dir。处理单张图片非常简单，但 squoosh-cli 的强大之处在于批量处理。您可以利用 shell 的通配符（glob 模式）来选中多个文件。例如，处理当前目录下所有的 .png 文件：

squoosh-cli *.png -d optimized_pngs/

默认情况下，squoosh-cli 会尝试为每种输入格式选择一种优化的编码器。例如，JPEG 文件通常会使用 MozJPEG，PNG 文件会使用 OxiPNG。然而，更常见的需求是转换为特定的现代格式，如 WebP 或 AVIF，并精细调整编码参数。这需要使用特定编码器的选项，其格式通常是 --<encoder_name> '<json_options>'。例如，将所有 JPG 文件转换为 WebP 格式，并设置质量为 75：

squoosh-cli *.jpg --webp '{"quality": 75}' -d webp_images/

注意，传递给编码器的选项需要用单引号包裹的 JSON 字符串格式。这允许传递复杂的配置。如果不指定任何编码器选项，squoosh-cli 会使用各编码器的默认优化设置。

深入了解编码器选项

squoosh-cli 支持多种流行的图像编码器，每种都有其独特的优化参数，理解这些参数是实现最佳优化的关键。

MozJPEG 优化 JPEG 图像

MozJPEG 是一个专注于提高 JPEG 压缩率同时保持较好视觉质量的编码器。其最核心的参数是 quality，取值范围通常是 0 到 100，数值越低压缩率越高但质量损失越大。

# 将 input.jpg 优化，设置 MozJPEG 质量为 80
squoosh-cli input.jpg --mozjpeg '{"quality": 80}' -d optimized_jpeg/

除了 quality，MozJPEG 还有 progressive（生成渐进式 JPEG）、chroma_subsampling（色度二次采样）等高级选项，可以根据具体需求调整以平衡文件大小和视觉保真度。

WebP：现代图像格式

WebP 支持有损和无损压缩，还支持透明通道（Alpha），是 PNG 和 JPEG 的有力替代者。对于有损压缩，同样使用 quality 参数（0-100）。对于无损压缩，可以设置 lossless: true。

# 将 input.png 转换为有损 WebP，质量 85
squoosh-cli input.png --webp '{"quality": 85}' -d webp_output/

# 将 input.png 转换为无损 WebP
squoosh-cli input.png --webp '{"lossless": true}' -d webp_output/
```WebP 还有一个 `effort` 参数（0-6，默认为 4），控制编码速度和压缩效果的平衡，更高的 `effort` 值会花费更多时间来获得更好的压缩。

### AVIF：下一代图像压缩
AVIF 基于 AV1 视频编码，通常能在相同视觉质量下提供比 WebP 和 JPEG 更高的压缩率，尤其是在低码率下。其关键参数是 `cqLevel`（量化级别，0-63，数值越低质量越高，与 `quality` 相反）和 `speed`（编码速度，0-10，数值越高速度越快但压缩效果可能稍差）。

```bash
# 将 input.jpg 转换为 AVIF，设置量化级别为 30，速度为 6
squoosh-cli input.jpg --avif '{"cqLevel": 30, "speed": 6}' -d avif_output/

使用 AVIF 时需要注意浏览器兼容性，虽然现代浏览器支持度越来越好，但仍需考虑后备方案。

OxiPNG 优化 PNG 图像

OxiPNG 是一个无损 PNG 优化器，旨在通过多种策略减少 PNG 文件大小而不损失任何图像信息。其主要参数是 level（优化级别，0-6，数值越高优化越彻底但耗时越长）。

# 使用 OxiPNG 优化 input.png，优化级别为 4
squoosh-cli input.png --oxipng '{"level": 4}' -d optimized_png/

下面的 Mermaid 图示了 squoosh-cli 处理不同输入格式并选择不同编码器的工作流程：

进阶功能与工作流整合

除了基本的格式转换和质量调整，squoosh-cli 还提供了一些实用的高级功能。例如，resize 选项可以在优化前调整图像尺寸。

# 将 input.jpg 缩放到宽度 800px，并用 MozJPEG 优化
squoosh-cli input.jpg --resize '{"enabled": true, "width": 800}' --mozjpeg '{"quality": 75}' -d resized_optimized/

resize 选项内还可以指定 height、method（如 lanczos3, mitchell 等缩放算法）和 fitMethod（如 stretch, contain）。

另一个有用的参数是 -s 或 --suffix，用于自定义输出文件名的后缀，方便区分不同优化版本。

# 处理所有 jpg，输出 WebP 格式，并添加 -webp 后缀
squoosh-cli *.jpg --webp '{}' -s -webp -d output/

squoosh-cli 的真正威力在于与自动化脚本和构建工具的结合。例如，在 Unix-like 系统中，可以使用 find 命令配合 squoosh-cli 递归处理整个项目目录下的图片：

find ./src/assets -iname '*.jpg' -o -iname '*.png' | xargs -I {} npx @squoosh/cli {} --webp '{"quality": 80}' --avif '{"cqLevel": 35}' -d dist/assets

这条命令会查找 src/assets 目录下所有的 .jpg 和 .png 文件，然后为每个文件调用 squoosh-cli，同时生成 WebP 和 AVIF 两种格式的优化版本，并保存到 dist/assets 目录。这可以集成到 Webpack、Gulp、npm scripts 等构建流程中，确保每次构建时自动优化新增或修改的图像资源。

性能考量与注意事项

使用 squoosh-cli 时，需要权衡几个因素：压缩率、视觉质量和编码时间。像 AVIF 这样的现代编码器虽然压缩效果好，但编码过程可能比 MozJPEG 或 WebP 慢得多，尤其是在高优化设置（低 speed 值）下。在自动化流程中，过长的编码时间可能会影响构建速度。因此，需要根据项目需求和服务器资源选择合适的编码器和参数。

squoosh-cli 的核心是基于 WebAssembly (Wasm) 的编解码器，这意味着它在本地执行，不依赖网络连接，且性能通常优于纯 JavaScript 实现。但也意味着其运行依赖于 Node.js 环境。

最后，始终要考虑目标用户的浏览器兼容性。虽然 WebP 的支持已相当广泛，但 AVIF 仍需注意在旧版本浏览器上的兼容性问题。通常建议提供后备格式，例如使用 HTML 的 <picture> 元素来根据浏览器支持情况加载 AVIF、WebP 或 JPEG/PNG。

参考文献

1. Squoosh CLI GitHub Repository: @squoosh/cli - 官方源代码、文档和问题跟踪。
2. Squoosh Web App: https://squoosh.app/ - 在线版本，可以直观体验各种编码器的效果和参数。
3. MDN Web Docs - WebP image format: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#webp - 关于 WebP 格式的详细信息和浏览器兼容性。
4. MDN Web Docs - AVIF image format: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#avif - 关于 AVIF 格式的详细信息和浏览器兼容性。
5. MozJPEG GitHub Repository: https://github.com/mozilla/mozjpeg - 了解 MozJPEG 项目本身。
6. OxiPNG GitHub Repository: https://github.com/shssoichiro/oxipng - 了解 OxiPNG 项目本身。