ウェブサイトで画像を使用する時に、
サイズの重い画像を軽量化することはよくあると思います。
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",
},