Squoosh 网页版

如果有一张图片需要压缩,你首先会想到什么工具?使用 Photoshop 的“将图片另存为 Web 所用格式”,还是搜索一个在线压缩网站?使用 Photoshop 固然可以,但有杀鸡用牛刀的感觉。而搜索出的网站非常繁杂,而且有很多限制,包括上传图片大小,每天可以压缩的次数等等。本文推荐一个由 Google 开发的 Chrome app 名为 Squoosh ,可用于免费无限制地将图片压缩为多种格式,压缩效率很高,速度不算快,但是可以接受。更重要是,同时提供网页版和命令行版操作,前者可以实现即时可视化,而后者可以轻松地批量操作。

Squoosh 是一个 Chrome app ,也可以在网页中打开。其网址为 https://squoosh.app 。打开后,页面如图所示:

Squoosh 的入口界面

页面非常简洁,上面是一个可以打开图片的按钮,下面是几个示例图片。我们打开其中的一个示例图片,会弹出以下编辑界面:

Squoosh 的编辑界面

界面将图片使用一个可移动的分界线分成两个部分,可以用于对比压缩前后的两张图片,也可以对比两种不同压缩方式的图片。两张图片各有一个参数选择框,分别在左下角和右下角。在 Compress 一栏可以选择压缩的方式。左面默认为 “Original image”,即不进行压缩。右面默认为 MozJPEG ,是一种将图片压缩为 JPEG 格式的方法。选择了方法后,还可以选择对应的参数。比如对于 JPEG 压缩,可以选择它的质量,这里选择 75 ,可以看到,图片的尺寸从原来的 2.79 MB 下降到 862 kB ,下降了69%。而拖动分界框,可以发现,图片的质量降低很小,基本可以保持清晰。

此外,在 Edit 菜单中,还提供了其它编辑选项。使用 MozJPEG 时,有重设图片大小 Resize 和减少颜色数量 Reduce palette 两个选项,可以进一步地压缩图片,读者可以自行探索。

对生成的图片满意后,可以点击下面的 下载 按钮,将图片直接保存至本地。整个操作都是在浏览器中完成的,使用的是 WebAssembly 技术,非常方便使用,在各种操作系统中都可以使用,而且有浏览器就可以,不需要安装任何其它软件。

Squoosh 命令版

如果需要对大量图片进行批量压缩,可以使用 Squoosh 提供的命令行工具。目前它是基于 Node.js 的。如果你的电脑中安装了 Node.js ,可以很方便地使用。其语法为

1
$ npx @squoosh/cli [options] <files...>

代码非常简洁。对于新手来说,可以从浏览器中直接生成代码。在刚才的浏览器页面中,在右下角 Edit 对话框右侧有两个图标,其中第一个表示命令行的图标,点击后就可以生成命令行代码,并复制到剪贴板。生成的代码为:

1
npx @squoosh/cli --mozjpeg '{"quality":75,"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}'

这里,已经把 options 所需要的所有内容都填写好了,和网页中的设置一样。下面,只需要在最后加入你的文件名,如

1
npx @squoosh/cli --mozjpeg '{"quality":75,"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}' file1.png file2.png file3.png

就可以一次性压缩上面三个文件了。这个命令在 MacBook 中运行良好,但是在 Windows 中,由于 cmd 对引号的解析有问题,无法执行。但幸运的是,程序还提供了“自动”选项,是根据压缩后的图片品质来自动选取参数的,不需要自行指定参数。代码为

1
npx @squoosh/cli --mozjpeg auto file1.png file2.png file3.png

这时,在 Windows 中也可以正常运行了。而且对于多个图片,是多线程并行运行的。运行结果为

1
2
3
4
5
6
7
3/3 ✔ Squoosh results:
file3.png: 2.38MB
└ file3.jpg → 641.18KB (26.3%)
file1.png: 2.38MB
└ file1.jpg → 641.18KB (26.3%)
file2.png: 2.38MB
└ file2.jpg → 641.18KB (26.3%)

体积压缩为原来的 26.3% 。

对于文件比较多的情况,可以将文件保存在一个文件夹中,进入文件夹后,使用

1
npx @squoosh/cli --mozjpeg auto .

很快,所有文件都压缩好了。