はじめに
スペリスで開発をしております、安永です。
この記事では、Dockerを使って、手軽かつホストの環境を汚さず、画像ファイルを一括でwebpに変換する方法を紹介します。
squooshとは？
squooshはGoogleが開発をしている画像を次世代フォーマットであるwebpに変換することができる神ツールです。
画像をwebpにすると、jpgやpngなどと比べて、サイズが抑えられ、画像の表示速度改善に役立ちます。
web上でも画像の変換をすることができ、webpだけじゃなく、avifとかの変換もでき、UIも素晴らしいものになっております。
ただ、画像を複数変換する必要があると、web上だけだと少し面倒でした。
その場合に備えてnpmのパッケージも用意されているのがさらに素晴らしいですね。
ホストOS上（macなど）でインストールする場合は、以下のコマンドを実行し、squoosh-cliを実行すれば任意の画像フォーマットに変換できます。
npm i -g @squoosh/cli
# squoosh-cli -d 変換先のフォルダ --webp 変換する画像
squoosh-cli -d . --webp ./test.png
一括で変換するには、findやxargsを使って画像ファイルに変換することができます。
この記事では、Dockerを使いつつ、ホストの環境を汚さず、画像ファイルを一気にwebpに変換するスクリプトをご紹介いたします。
Dockerfile用意
めちゃシンプルなDockerfileを作成します。
FROM node:16-alpine
RUN npm i -g @squoosh/cli
その後、Dockerfileがある場所でイメージをビルドします。-tの部分は適宜変えてください。
docker build -f ./Dockerfile -t squoosh .
これでsquoosh用のイメージができます。
REPOSITORY TAG IMAGE ID CREATED SIZE
squoosh latest ace5fd4e160a 3 months ago 145MB
スクリプト実行
Dockerを使って、ボリュームマウントしてから、カレントディレクトリにある画像ファイルをwebpに変換するスクリプトを書いてみました。
docker run \
--rm \
--env TARGET="./home" \
-v ${PWD}:/home \
-it squoosh \
sh -lc "printenv TARGET | xargs find | grep -e jpg -e png -e JPG -e PNG -e jpeg -e gif -e tiff -e tif | xargs -I{} sh -c 'printenv TARGET | xargs -I? squoosh-cli -d ? --webp true {}'"
update
わざわざfindとかしなくても、以下みたいな感じで実行すると、実行したディレクトリの中にあるファイルをwebpに変更できました。
macの人だと.DS_STOREファイルがあるとエラーになるみたいなので、rm ./.DS_STOREで削除しています。
rm ./.DS_STORE
docker run \
--rm \
-v ${PWD}:/home \
-it squoosh \
sh -lc "squoosh-cli --webp true /home -d /home"
おわりに
squoosh神
画像ファイルがお手軽にwebpに変換できて、素晴らしいですね。どなたかの助けになれば幸いです。