image tool stack

上图是我的图片处理工具栈，矢量原型 Sketch，位图编辑 Pixelmator，搜集管理 Inboard，压缩优化 JPEGmini、ImageAlpha、ImageOptim。前四个是付费 App，后两个自由开源。今天处理的图片较多，想能不能有个自动工作流来解放双手。

ImageOptim-CLI

一搜，恰巧找到了 JamieMason/ImageOptim-CLI 这个 macOS 项目。一句话描述就是，它会根据你的指定，选择性调用 JPEGmini、ImageAlpha、ImageOptim 等工具，来处理图片压缩问题。开始敲一行命令，中间过程全自动。

79% TypeScript + 21% AppleScript，分发为可执行的二进制包，所以不依赖 Node.js，并且支持 Homebrew 安装。

使用也非常方便，终端输入 imageoptim --help 即可得到说明，只需注意三个事项：第一、终端要取得 Accessibility 权限；第二、调用的 App 要自己另外下载安装；第三、顾名思义，它默认调用 ImageOptim，如果不用，可通过 --no-imageoptim 参数 disable 它。

支持的调用的 3 个 App 如下，JPEGmini Lite 免费，标准和 Pro 均需付费：

  Supported Apps:

    ImageAlpha: https://pngmini.com
    ImageOptim: https://imageoptim.com
    JPEGmini Lite: https://itunes.apple.com/us/app/jpegmini-lite/id525742250
    JPEGmini Pro: https://itunes.apple.com/us/app/jpegmini-pro/id887163276
    JPEGmini: https://itunes.apple.com/us/app/jpegmini/id498944723

如需组合其他工具，添加对应参数即可，比如添加 --jpegmini 参数调用 JPEGmini：

  Examples:

    # Run ImageOptim.app over every image in current directory
    imageoptim

    # Run ImageAlpha.app and ImageOptim.app over every PNG in current directory
    imageoptim --imagealpha '**/*.png'

    # Run JPEGmini.app and ImageOptim.app over every JPG in current directory
    imageoptim --jpegmini '**/*.jpg' '**/*.jpeg'

    # Run JPEGmini.app over every JPG in current directory
    imageoptim --jpegmini --no-imageoptim '**/*.jpg' '**/*.jpeg'

    # Run ImageOptim.app over every image in a specific directory
    imageoptim '~/Desktop'

可调节的参数不多，除了外部工具调用和一些无关图片优化的命令之外，仅有一个全局的 --no-color，和 ImageAlpha 配备的 --number-of-colors，--quality，--speed 3 个参数。也就是说，如果希望在这里指定诸如转换图片格式、缩放尺寸、指定具体的质量数值、Progressive Rendering 等参数来实现高阶图片优化，是行不通的。它解决的是以同样的标准自动化批量处理图片的问题。

  Options:

    -V, --version           output the version number
    -a, --imagealpha        enable ImageAlpha
    -j, --jpegmini          enable JPEGmini
    -C, --no-color          output to the terminal without colors
    -I, --no-imageoptim     disable ImageOptim
    -Q, --no-quit           do not quit apps once finished
    -S, --no-stats          do not display file size savings and quality loss information
    --number-of-colors <n>  ImageAlpha palette size, defaults to 256
    --quality <min>-<max>   ImageAlpha quality range from 0-100, defaults to 65-80
    --speed <n>             ImageAlpha speed from 1 (brute-force) to 10 (fastest), defaults to 1
    -h, --help              output usage information

那么，这几个工具是单干还是组合好呢，哪个搭配压缩和质量最合理呢？针对这个问题，ImageOptim-CLI 贴心地给出了 GIF、JPEG、PNG 各个格式各个工具及组合的压缩效果对比。

image tool stack

先看 JPEG 项目，果不其然，JPEGmini & ImageOptim 组合几无敌手，只在蓝天白云和 bril 人像上输给了 Kraken，当然，这个成绩主要是 JPEGmini 的功劳。

再看 PNG 项目，悬念只在 ImageOptim 单干以及与 ImageOptim 搭配两个方案之间。考虑到 24 位色的天际线、雀斑脸、蓝天白云等图片上，ImageOptim 单干弱势明显，还是建议二者无脑搭配。

综合以上两个项目来看，如果能接受较高的图片质量损耗（注意表格中无底色的红字），Kraken 也是非常有竞争力的单一优化工具。

Squoosh

单张细校，因为 GPEGmini 没得选项可以调，唯有单开 ImageOptim 或是 PNGAlpha 做细节配置（其实也没太多可调的）。这里还有一个选项：Google 刚刚出炉的 Squoosh。

squoosh screenshot

GoogleChromeLabs/squoosh 是一个 Web App，跨 OS，可以本地部署，支持拖拉拽，简单易用。

它有两个基本模块，一是编辑；二是压缩。编辑就是缩放尺寸和减少颜色两项，而压缩就比较复杂了，根据输出格式不同，调节参数不同。大概也能分为两类：一类是 Squoosh 提供的编解码器（Codecs）比如下图中的 OptiPNG、MozJPEG、WebP；一类是你在使用的浏览器附带的，可能每个都不同，比如下图我的 Safari 带了 7 个 Codecs，而如果用 Chrome 打开，就只有 3 个，Firefox 也只有 3 个，但它不支持 WebP，所以 WebP 的位置是 BMP。

squoosh codecs

话说，由于没有帮助文档，为了搞清 Squoosh 的这个 Browser-XX 具体是啥意思，是什么新潮编解码器，摸了半天。最后在源码里面顺藤摸瓜，跟着 canvasEncode 函数往下，才看到这么一句注释：敢情是浏览器自带的意思。

/**
 * Encode some image data in a given format using the browser's encoders
 *
 * @param {ImageData} data
 * @param {string} type A mime type, eg image/jpeg.
 * @param {number} [quality] Between 0-1.
 */

export async function canvasEncode(data: ImageData, type: string, quality?: number): Promise<Blob> {...

动手玩

举俩例子，一是批量处理下载回来的 Free Solo 提供的高清大图；一是优化一个广告背景图。

先是高清照片，这个没什么好说，照片细节丰富，一般默认输出为 JPEG，所以首选 JPEGmini，另加入一组 ImageOptim 结果作为对照。

照片 原大小 JPEGmini ImageOptim
Free Solo 1.jpg 4.43MB 67.07% 5.42%
Free Solo 2.jpg 5.94MB 40.98% 5.05%
Free Solo 3.jpg 5.4MB 67.11% 5.37%
Free Solo 4.jpg 1.45MB 52.14% 5.25%
Free Solo 5.jpg 3.33MB 68.10% 5.63%
Free Solo 6.jpg 2.42MB 73.54% 2.78%
Free Solo 7.jpg 4.07MB 62.94% 5.92%
Free Solo 8.jpg 5.86MB 78.96% 5.80%
TOTAL 32.9MB 63.89% 5.30%

如上可见，JPEGmini 非常出众，App 设计的优雅易用，处理 JPEG 花点钱在这个 App 上非常值。其实我还测试了 ImageOptim + JPEGmini 的方案，结果是，多一些处理等待时间，效果会再提升一丢丢。

再是广告图。它其实是一个在线广告的一部分，是一个动态创意的背景底图，其上会搭配不同的文案等元素，原格式为 PNG，原图 901kB，文件信息：PNG image data, 1600 x 515, 8-bit colormap, non-interlaced，现在来做一个压缩对比。

squoosh ad

先看 ImageOptim-CLI 的相关结果。如果要保有 PNG 格式，ImageAlpha 是个不错的工具，其默认编解码器是 pngquant，可选 pngnq。需要注意的是，前面这俩，这都是有损压缩，ImageOptim 默认采用 OptiPNG 等无损压缩工具，所以只是看起来压缩效率低，开启有损模式，差别没那么大的。

方案 压缩结果 节省
ImageOptim 851kB 5.55%
ImageAlpha 245kB 72.81%
ImageOptim + ImageAlpha 222kB 75.38%

再看 Squoosh 的跨浏览器方案。OptiPNG 无损，吃点亏；WebP 是厉害，但目前仅有谷歌自己家的产品支持，这个方案不能用；如果不保有原格式（反正它只是背景图嘛，不需要透明），完全可以转为 JPEG，使用 MozJPEG 75% 的质量，可以压缩掉 94% 的体积，仅剩 52kB，这对伺服效率的提升可不小，原来绝大部分的时间就是都消耗在了 Receiving ad for slot 上了。

方案 压缩结果 节省
OptiPNG，effort=2 872kB 3%
MozJPEG，quality=75 52.3kB 94%
WebP，effort=4，quality=75 39.6kB 96%