イラストの圧縮と WebP 化を自動化したい

[uknmr]

eleventy のビルドに差し込みたい。

1. イラストを src/parenting-who/illustrations に置く
2. yarn build
3. illustrations/ の中で変更のあったイラストを最適化し上書き
4. illustrations/ の中で変更のあったイラストを WebP 化し、拡張子を .webp にして同フォルダに保存

CI でやってもいいけどとりあえずローカルでよさそう。

[oti]

良さそう。お願いします！

[oti]

メモです。

imagmin-cli

使うパッケージ

• imagemin-cli
• imagemin-mozjpeg
• imagemin-pngquant

実装メモ

• imagemin-cli にはファイルを上書きするオプションはない
  • 同じディレクトリに別名保存する
  • 別ディレクトリを指定する
  • のどちらか
• 現状は eleventy で画像ファルを丸ごと docs/ へコピーしているのでこれをやめる
  • imagemin src/image/*.png --plugin=pngquant --out-dir=docs/image/ する
• ウォッチして圧縮ビルドするには chokidar など必要
  • 手動でいいか？
  • yarn build に入っていればいい

webp-converter-cli

使うパッケージ

• @crazyfactory/webp-converter-cli

実装メモ

• -f でファイルを単一か配列で渡せるが、blob がない
• -r でカレントディレクトリ内下を再帰処理できる
• cd src/image/ && webpc -r -v -o ../../docs/image で行けそう
• これも手動かな
• yarn build に入っていればいい