WebP画像を生成したいときには @squoosh/cli が便利

今更な話なんですが、PNGなどの画像からWebP画像を生成したいときには@squoosh/cliを使うのがとても楽だと気づきました。

https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli

ローカルにNode.jsがインストールされていれば、npxコマンドを使ってすぐに画像の最適化ができます。

例えばexample.pngをWebPに変換したいときは以下のコマンドを実行します。

npx @squoosh/cli --webp auto example.png 
# ✅ Squoosh results:
# example.png: 24.85KB
#  └ example.webp → 8.74KB (35.2%)

これだけで画像の圧縮とWebPへの変換が完了します。

複数ファイルをまとめて変換できる

例えば./imagesディレクトリ内の.pngをすべてWebPに変換したい場合には以下のコマンドを実行すればOKです。

npx @squoosh/cli --webp auto ./images/*.png  
# ✅ Squoosh results:
# foo.png: 24.85KB
#  └ foo.webp → 8.74KB (35.2%)
# bar.png: 48.47KB
#  └ bar.webp → 15.65KB (32.3%)

便利〜

@squoosh/cliのより詳しい使い方はこの記事が参考になると思います。

https://zenn.dev/ruri14/articles/2f28c0e571e175