はじめに

スペリスで開発をしております、安永です。
この記事では、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に変換できて、素晴らしいですね。どなたかの助けになれば幸いです。