Squooshとは
SquooshはGoogleが制作したブラウザ上で画像圧縮ができるWebアプリ。
これを使用すればJPGやPNG画像をWebPやAVIF画像などに簡単に変換できる。
便利なWebアプリだが画像を一括で変換できないという重大な欠点がある。
100個くらいの画像をWebPなどに変換する場合は1個ずつ変換していかなくてはならないため、かなり時間がかかってしまう。
そのため、Squooshは次項で説明するSquoosh CLIを使用して変換したほうが良い。
Squoosh CLIとは
Squoosh CLIはSquooshをコマンドライン上(黒い画面)で実行するツール。
やり方はまずターミナルで以下のコマンドを実行してインストールする。
※ Node.jsをインストールしていない場合は先にこちらの推奨版のインストールが必要。
npm i -g @squoosh/cli
インストールが完了したら、変換する画像の種類と画像のある場所を以下のように指定して実行するだけで変換できる。(以下はWebPに変換する場合)
squoosh-cli --webp auto s.jpg
画像が複数の場合は*.jpgにする。
squoosh-cli --webp auto *.jpg
AVIFの場合は--avifを指定する。
squoosh-cli --avif '{quality:50}' s.jpg
qualityは自分で指定することもできるがautoを指定したほうが画質を自動的に調整して書き出すため画像の劣化をおさえやすい。
ただし、--avifの場合はqualityオプションに正しく対応しておらず、autoを指定しても最適化された画質で書き出されない。
--avifは'{quality:xx}'の数値に何を指定しても30相当のqualityで書き出してしまうため注意が必要。(2022年2月現在)
今回書き出した画像のファイルは以下の通り。
2022年2月現在ではEdgeとSafariはAVIFに未対応のため、画像が表示されないです。
Webサイトで使用する場合はpictureタグなどを使用してAVIFが使用可能なブラウザならAVIF、そうでなければWebP or JPGを表示させてください。
<picture>
<source srcset="s.avif" type="image/avif">
<source srcset="s.webp" type="image/webp">
<img src="s.jpg" alt="">
</picture>
-dで書き出しディレクトリ指定
変換後の画像を同一ディレクトリではなく別ディレクトリに書き出したい場合は-dオプションを使用して書き出し先のディレクトリを指定する。
squoosh-cli --webp auto s.jpg -d build
