使用 squoosh-cli 批量压缩图片

前言

去年之前，我写博客时并未意识到需要对图片进行压缩。有时，文章加载的图片太多，其中一些图片过大，导致浏览体验不佳。但后来，我开始使用Squoosh项目，每次写文章都会压缩配图。主要是因为Squoosh太出色了，而且还是免费软件。

去年，我制作了一个Squoosh的Docker镜像，可以在本地轻松启动一个图片压缩服务。但当时，我每次都是逐张压缩图片，因为我要为每张图片调整质量，以确保它们在本地存储中具有适当的大小。我自己搭建的图床运行在本地，使用本地SSD进行存储，所以之前的做法也很正常。然而，这次需要批量压缩大量图片让我意识到了批量处理的重要性。尽管可能无法完美平衡图片压缩后的质量和存储大小，但在博客写作（关注图片质量）和本地存储之间做出一些妥协后，带来了极大的轻松和满足感，这绝对是值得的。

正文

下面我讲讲如何使用 squoosh-cli 进行图片的批量压缩，之所以推荐在自建的 docker 容器中运行 squoosh-cli 命令，是因为容器里是 Linux 环境，命令行友好，不像 cmd 和 powershell 可能需要各种转义，引号，还有通配符问题。

新建一个专用压缩文件夹

mkdir -p /home/dk/squooshfiles
chmod -R 0755 /home/dk/squooshfiles

下面启动 squoosh 容器，命令如下

docker run -d --name squoosh \
    --restart unless-stopped \
    -p 7701:8080 \
    -v /home/dk/squooshfiles:/app/squooshfiles \
    dko0/squoosh:1.12.0

解析：

/home/dk/squooshfiles本地批量压缩图片文件夹
这将在容器中自动创建目录 /app/squooshfiles
本地对 /home/dk/squooshfiles 的修改和容器中对 /app/squooshfiles 的修改将完全同步

注意: 下面的步骤都是在容器中进行操作

然后进入容器

docker exec -it squoosh ash

安装 squoosh-cli npm 包

npm i -g @squoosh/cli

安装完成之后执行 squoosh-cli --help 应能获取命令行帮助。

Pasted image 20230905125527

进入压缩目录,然后创建一个文件夹,例如 `0805`

cd .. && cd squooshfiles

mkdir 0805 && cd 0805

把要批量压缩的照片拷贝到0805目录

最后使用 `squoosh-cli` 命令执行批量压缩

squoosh-cli --mozjpeg '{"quality":40,"baseline":false,"arithmetic":false,"progressive":true,"optimize_coding":true,"smoothing":0,"color_space":3,"quant_table":3,"trellis_multipass":false,"trellis_opt_zero":false,"trellis_opt_table":false,"trellis_loops":1,"auto_subsample":true,"chroma_subsample":2,"separate_chroma_quality":false,"chroma_quality":75}' \
-d output1 \
-s small \
*.jpg

解释

mozjpeg 是最常用的压缩算法了，综合来说最推荐。
quality 就是压缩质量了，在网页端可以直接预览压缩后的效果
-d 设置输出目录
-s 设置一个输出的文件名后缀，默认是空字符串
*.jpg 只压缩当前目录下的所有 jpg 扩展名图片

批量压缩成功。

Pasted image 20230905130018

最后感谢 squoosh 项目，写博客压缩图片利器，完全免费开源，非常推荐各位博主使用。

squoosh cli npm package: https://www.npmjs.com/package/@squoosh/cli
squoosh cli: https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli

一个重要的插曲，解决报错

TypeError: Cannot read properties of undefined (reading ‘writeText’)

这是 Chrome 限制了非安全网站的 API 使用，在非安全网站上 block 了 navigator.clipboard 的 api 使用权限，所以无法拷贝 npx 命令出来。下面解决这个问题。

open chrome，type chrome://flags/ in address bar, then find item Insecure origins treated as secure, type http://10.10.10.5:7701 then enable it and relaunch your chrome.

Chrome 在此处认为的安全的网站

必须 https
或 localhost
或 127.0.0.1

所以我们有必要加个白名单，这样好操作。

insecure origins.jpg

http://10.10.10.5:7701 是我 squoosh 的运行环境地址。如果有多个地址需要设“白名单”，使用英文逗号隔开它们即可。

前言

正文