Squoosh 网页版
如果有一张图片需要压缩,你首先会想到什么工具?使用 Photoshop 的“将图片另存为 Web 所用格式”,还是搜索一个在线压缩网站?使用 Photoshop 固然可以,但有杀鸡用牛刀的感觉。而搜索出的网站非常繁杂,而且有很多限制,包括上传图片大小,每天可以压缩的次数等等。本文推荐一个由 Google 开发的 Chrome app 名为 Squoosh
,可用于免费无限制地将图片压缩为多种格式,压缩效率很高,速度不算快,但是可以接受。更重要是,同时提供网页版和命令行版操作,前者可以实现即时可视化,而后者可以轻松地批量操作。
Squoosh 是一个 Chrome app ,也可以在网页中打开。其网址为 https://squoosh.app 。打开后,页面如图所示:
页面非常简洁,上面是一个可以打开图片的按钮,下面是几个示例图片。我们打开其中的一个示例图片,会弹出以下编辑界面:
界面将图片使用一个可移动的分界线分成两个部分,可以用于对比压缩前后的两张图片,也可以对比两种不同压缩方式的图片。两张图片各有一个参数选择框,分别在左下角和右下角。在 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 | 3/3 ✔ Squoosh results: |
体积压缩为原来的 26.3% 。
对于文件比较多的情况,可以将文件保存在一个文件夹中,进入文件夹后,使用
1 | npx @squoosh/cli --mozjpeg auto . |
很快,所有文件都压缩好了。