コマンドラインから大量のpngとjpgを圧縮する

ウェブサイトで画像を使用する時に、
サイズの重い画像を軽量化することはよくあると思います。

TinyPNG

でも、このwebサービスでは以下のような問題がありました、

・web版だとアップロードした画像の行方（データを抜き取られてる可能性もなきにしもあらず）
・無料版だと、１ファイルづつアップロードするのが面倒
・大量のファイルをディレクトリを維持したまま一括で処理したい。

という思いがありました。

---

一番良いのは、ツールを買ってしまうことです。
ケチってもいいことはありません。
金で解決出来るものはどんどんしてしまいましょう！

ただ、エンジニアの端くれということもあり、
これからもそこそこ使いそうな処理なので、PC内で自分で自動化してしまおうということで、調べてみました。

調べたところ、以下のライブラリを使うのが良さそうです。

ライブラリ

pngquant (png用)

https://pngquant.org/
(tinypngの内部処理にも使われているらしい)

インストール

brew install pngquant

使い方 (他にもオプション有り)

pngquant --ext .png --force -v .test.png (圧縮 / 出力ファイル名そのまま / 強制上書)
pngquant --ext .png --force -v *.png (圧縮 / 出力ファイル名そのまま / 強制上書 / カレントのjpg全部)

jpegoptim (jpg用)

インストール

brew install jpegoptim

使い方 (他にもオプション有り)

jpegoptim test.jpg (圧縮)
jpegoptim test.jpg test2.jpg (圧縮 / 複数)
jpegoptim --strip-all test.jpg (圧縮/メタ全部消す)
jpegoptim --strip-all --max=90 test.jpg (圧縮 /90% / メタ全部消す)
jpegoptim --strip-all --max=90 *.jpg (圧縮 /90% / メタ全部消す / カレントのjpg全部)

使いやすいようにカスタマイズ

ここまでの情報はネット上にたくさん出てくるのですが、

再帰ディレクトリ的に処理をする

という方法がなかなかうまくいきませんでした。

例えば、

pngquant --ext .png --force -v img/*/*.png

img/aaa.png → NG
img/hoge/bbb.png → OK

この書き方だと、部分的に無視されてしまいます。

---

pngquant --ext .png --force -v img/*.png img/*/*.png img/*/*/*.png

img/aaa.png → OK
img/hoge/bbb.png → OK
img/hoge/huga/ccc.png → OK

この書き方だと、一見良さそうですが、もっと階層がある場合にカバーできません。
そして、特定のパターンの階層にファイルが無いとエラーになってしまいました。

---

色々調べた結果が、こちら。

find . -name '*.png' -exec pngquant --ext .png --force -v {} \;

xargsの方が速いらしい
https://qiita.com/legitwhiz/items/e609537fb6226081f5b5

find . -name '*.png' | xargs pngquant --ext .png --force -v

npm scriptsに使いやすいようにまとめておく

これで、pngとjpgがディレクトリそのままで圧縮される。
大量のファイルだと止まるかもしれない（未検証）。

  "scripts": {
    "optim": "npm run optim:png && npm run optim:jpg",
    "optim:png": "find . -name '*.png' | xargs pngquant --ext .png --force -v",
    "optim:jpg": "find . -name '*.jpg' | xargs jpegoptim --strip-all --max=90",
  },