【Webパフォーマンス】imagemin-cliのデフォルトプラグインについて

画像圧縮するためにimagemin-cliを使うことにした

github.com

インストールと使用方法はREADME通り

$ npm install imagemin-cli

$ npx imagemin --help

  Usage
    $ imagemin <path|glob> ... --out-dir=build [--plugin=<name> ...]
    $ imagemin <file> > <output>
    $ cat <file> | imagemin > <output>

  Options
    --plugin, -p   Override the default plugins
    --out-dir, -o  Output directory

  Examples
    $ imagemin images/* --out-dir=build
    $ imagemin foo.png > foo-optimized.png
    $ cat foo.png | imagemin > foo-optimized.png
    $ imagemin foo.png --plugin=pngquant > foo-optimized.png
    $ imagemin foo.png --plugin.pngquant.quality=0.1 --plugin.pngquant.quality=0.2 > foo-optimized.png
    # Non-Windows platforms may support the short CLI syntax for array arguments
    $ imagemin foo.png --plugin.pngquant.quality={0.1,0.2} > foo-optimized.png
    $ imagemin foo.png --plugin.webp.quality=95 --plugin.webp.preset=icon > foo-icon.webp

気になったのはプラグインのところ

--plugin, -p   Override the default plugins

デフォルトのプラグインって何が入っているんだ？と思ってソースをみてみたら

default: [
    'gifsicle',
    'jpegtran',
    'optipng',
    'svgo',
],

https://github.com/imagemin/imagemin-cli/blob/2a87c5e4796d05dc1fa208f4f5c0f1722ec75dd4/cli.js#L39

とあったので、４つのプラグイン（gifsicle、jpegtran、optipng、svgo）がデフォルトであることがわかった

ただ、他のブログ記事を見るとpngquantとかmozjpegを入れましょうというのもあって、何が違うのかわからないのでさらに調べてみた

調べてみたらきれいに下の記事にまとまっていた

web.dev

要するに「非可逆圧縮」か「可逆圧縮」であるかの違いで、

可逆圧縮ではデータが失われることがないが、それほどサイズを削減することができない

非可逆圧縮はファイルサイズを大幅に削減するが、画質を低下させる可能性があり戻せない

表だけドキュメントから借りるとこのように分けられる

画像形式	非可逆プラグイン	可逆プラグイン
JPEG	imagemin-mozjpeg	imagemin-jpegtran
PNG	imagemin-pngquant	imagemin-optipng
GIF	imagemin-giflossy	imagemin-gifsicle
SVG	imagemin-svgo

ファイルサイズを大幅に削減するなら非可逆圧縮の方がよいので

-pオプションで上書きするのがよいのかも

$ imagemin foo.png -p=pngquant > foo-optimized.png