【Windows版】 Squoosh CLIで画像を一気にWebP化しよう

Squoosh というサービスは手軽に WebP 画像などが作れます。
画質を見ながら画像の圧縮率の調整ができるので他の画像圧縮ツールと比べると使いやすいのですが、画像を一括で処理ができず１枚ずつ変換するしかないので、大量の画像だとすごく時間がかかるという欠点があります。
この記事では Squoosh CLI というコマンドラインから Squoosh を動かせるツールを使って、Windows 環境で Squoosh の WebP 変換を一括でする方法を紹介します。

※WebP がわからない方はこちらの記事を先に読むといいかもしれません。
WebPを使ってサイト表示を高速化する

Squoosh CLI を使うまでの流れ

1. 必要なツール（Node.js 管理ツール、Node.js、Git bash）をインストールする
2. Squoosh CLI をインストールする
3. 変換後のフォルダを作成し設定ファイルを作成する
4. 一括変換！

必要なツールをインストール

ブラウザで開くだけで使うことが出来た Squoosh と違い、Squoosh CLI を使うには事前にいくつかのツールをインストールしておく必要があります。

必須なのは Node.js です。
Node.js はすでに PC に入っているという方も多いかと思いますが、一応インストール方法を説明します。
Node.js をそのままインストールするとバージョンが変えられなくて不便なので、バージョン管理ツールを使ってインストールします。

（事前準備）Node.jsを入ってない状態にする

PC 内に Node.js が入っていない状態にします。
古い Node.js がある場合はアンインストールを行ってください。
参考サイト：Windows 環境から Node.js を完全に削除する方法をやってみた | DevelopersIO

Volta をインストール

Volta というバージョン管理ツールを使って Node.js をインストールします。

Node.jsバージョン管理 VoltaをWindowsにインストールする
こちらを参考にしました。

設定から開発者モードを有効化する

Volta を正常に動かすには開発者モードをオンにしておく必要があるので、設定から検索してオンにしておきます。

インストーラーから Volta をインストールする

Mac ならコマンドからインストールできるのですが、Windows の場合は Volta のインストーラーをダウンロードしてインストールします。

Getting Started | Volta
こちらからダウンロードします。

Voltaインストールウィザードのキャプチャ

インストーラーは特に設定はないので、問題なくインストールができます。

Volta インストール完了

Volta がインストールされました。

Node.jsをインストール

volta install node@16

Node.js v16 をインストールしました。

Node.js インストール完了

Node.js のインストールを確認しました。

Git bash をインストール

Git bash はなくても Squoosh CLI は動くのですが、一括で画像を指定するためにはワイルドカード（*）を使います。
Windows でワイルドカードを使うためには Git をインストールし、Git bash という Git のコマンドラインツールを使えるようにします。

インストーラーからインストールします。
インストール項目が非常に多いですが、すべてデフォルトで勧めていきます。

Git for Windows のインストールウィザードのキャプチャ画像

インストールが完了しました。

Squoosh CLIをインストール

npm i -g @squoosh/cli

npm コマンドでインストールをします。
Node.js をインストールすると npm コマンドが使えるようになります。

Squoosh CLI インストール完了

Squoosh CLI のインストールが確認されました。
（なぜかバージョンを表示するオプションがありませんでした）

Squoosh CLIのコマンドを試してみる

通常の画像を WebP に変換する

該当のフォルダに移動して squoosh-cli コマンドで WebP に変換します。

squoosh-cli --webp auto -d ./ ./img.jpg

同じフォルダに img.webp というファイルが生成されます。

ワイルドカードで一括で画像を指定する

一括で画像を指定するにはワイルドカードを使うのですが、WIndows だとコマンドが効かないので  Git Bash を使います。
Git Bash は Powershell からはコマンドが使えないので、.sh ファイルを作って実行します。

squoosh-cli --webp auto -d ./ ./*.jpg

これをクリックで実行すると冒頭の動画のように Git bash が開きコマンドが実行され、WebP 画像が一括生成されます。

▼

▼

圧縮率を調整する

オプションを auto にしていると画像によっては元のサイズより大きくなるときがあります。
そういうときは一旦アプリ版の Squoosh でオプションを調整してから、そのオプション内容を Squoosh CLI 用にコピーします。

npx @squoosh/cli --webp '{"quality":75,"target_size":0,"target_PSNR":0,"method":4,"sns_strength":50,"filter_strength":60,"filter_sharpness":0,"filter_type":1,"partitions":0,"segments":4,"pass":1,"show_compressed":0,"preprocessing":0,"autofilter":0,"partition_limit":0,"alpha_compression":1,"alpha_filtering":1,"alpha_quality":100,"lossless":0,"exact":0,"image_hint":0,"emulate_jpeg_size":0,"thread_level":0,"low_memory":0,"near_lossless":100,"use_delta_palette":0,"use_sharp_yuv":0}'

こういうコードがクリップボードにコピーされるので、オプションの部分を auto の代わりに使います。

これで自分用のオプションで画像を圧縮することが出来ました。
便利ですが、元の画像よりもサイズが大きくなるケースがあるので、変換するたびに元の画像とのサイズを見比べないといけないのが面倒です。