今回、Macのターミナル（コマンド）でPNG、JPGを一括変換することが発生しましたので、簡単にその方法をご紹介します。

公式ツールのcwebp/dwebpをインストール

cwebp/dwebpは直接公式サイトからダウンロードする方法もありますが、Macを使っている方なら以下の方法で簡単にインストールできます。

brew install webp

インストールが完了したらバージョン確認してみてください。

cwebp -version

バージョンが表示されれば、インストール完了です。

cwebp/dwebpの使い方

cwebpとdwebpの使い方も簡単にご紹介します。

WebP形式からPNG形式に変換する場合はdwebpを使います。使い方は以下になります。

dwebp image.webp -o image.png

dwebp [WebP形式ファイル指定] -o [変換後のPNG形式 or PPM形式ファイル名]

PNG、JPG形式をWebP形式に変換する場合はcwebpを使います。以下の方法で使います。

cwebp image.png -o image.webp

cwebp [PNG形式 or JPG形式ファイル指定] -o [変換後のWebP形式ファイル名]

なお、WebP形式変換の品質は、デフォルト75になります。

例えば、品質90でWebP形式に変換したい場合は、-q をつけて指定します。

cwebp -q 90 image.png -o image.webp

そこまで品質にこだわりがないのであれば、しっかり圧縮され、品質の劣化が少ないデフォルトのままがオススメです。

詳しいコマンドについては、公式のcwebpとdwebpドキュメントをご参照ください。

cwebpを使って一括WebP変換方法

一括でまとめて変換する事はcwebpの機能では存在しませんので、for file in コマンドを使って一括で変換します。

例えば、現在いるディレクトリに複数のJPG、PNG形式のファイルが存在する場合は以下の方法で一括変換することができます。

for file in *.{jpg,jpeg,png}; do cwebp "$file" -o "${file%.*}.webp"; done

実行すると同じファイル名で、.webp ファイルが生成されているかと思います。

また、JPG、PNG形式を残して、更に.webp形式をつけたい場合は以下になります。（例. image.png.webg）

for file in *.{jpg,jpeg,png}; do cwebp "$file" -o "${file}.webp"; done

こちらはwordpress プラグイン Ewww Image Optimizer を使って、WebP形式変換した場合に、このようなファイル名になっているので、それと同じように変換したい場合はこの方法をお試しください。

また、現在いるディレクトリ内の画像ファイルを再帰的にJPG、PNG形式全てを変換したい場合は、以下のようになります。

ls -d $(find -E `pwd` -iregex ".*\.(jpg|jpeg|png)" -type f) | xargs -L 1 -I {} cwebp {} -o {}.webp

まとめ

コマンドでやれば、あっという間に複数ファイルをWebP形式に変換し画像の軽量化が可能です。

PageSpeed Insights でもよく指摘される内容ですので、ぜひお試しください。

SEO対策 / WebP