【Mac】PNGをWebPに一括変換する方法！右クリックだけで複数画像をまとめて変換

Webサイト制作で画像を軽量化するために、PNGやJPEGをWebP形式に変換する機会が増えました。

私もこれまでは「Squoosh」を使ってWebPに変換していたのですが、画像が多いと1ファイルずつ変換するのが地味に面倒です。

そこでMacの「Automator」とWebP変換ツール「cwebp」を組み合わせて、

Finderで複数のPNGを選択 → 右クリック → WebPに一括変換

できるようにしてみました。

一度設定してしまえば、その後はFinderから数クリックでWebPに変換できます。

この記事では、

Intel Mac
Apple Silicon（M1 / M2 / M3 / M4 / M5など）

の両方に対応した設定方法を紹介します。

完成するとこんなことができます

例えばFinderに以下のPNG画像があるとします。

image01.png
image02.png
image03.png
image04.png

これらをすべて選択して、

右クリック → クイックアクション → WebPに変換

を実行するだけで、

image01.webp
image02.webp
image03.webp
image04.webp

が同じフォルダに生成されます。

元のPNGファイルはそのまま残ります。

画像が10枚、20枚とあってもまとめて処理できるので、Web制作ではかなり便利です。

今回使用するもの

今回使用するのは以下の2つです。

Homebrew
Automator

Homebrewを使ってGoogleのWebP変換ツール「cwebp」をインストールし、macOS標準アプリのAutomatorから実行します。

AutomatorはmacOSに標準搭載されているため、新たに変換アプリを購入する必要はありません。

1. HomebrewでWebPをインストールする

まず「ターミナル」を起動します。

以下のコマンドを実行してください。

brew install webp

これでWebP変換に使用する「cwebp」がインストールされます。

「brew: command not found」と表示される場合

Homebrewをまだインストールしていない可能性があります。

その場合はHomebrewを先にインストールしてください。

Homebrew公式サイト：
https://brew.sh/

2. cwebpのインストール場所を確認する

次にターミナルで以下を実行します。

which cwebp

ここは重要です。

MacのCPUによって、基本的にインストール先が異なります。

Intel Macの場合

多くの場合は以下になります。

/usr/local/bin/cwebp

Apple Siliconの場合

M1、M2、M3、M4、M5などのApple Silicon Macでは、多くの場合はこちらです。

/opt/homebrew/bin/cwebp

ただし、環境によって異なる可能性があるため、決め打ちせずに必ず

which cwebp

で確認することをおすすめします。

3. Automatorを起動する

次にmacOS標準アプリの「Automator」を起動します。

Spotlight検索から

Automator

と検索するのが簡単です。

Automatorを開いたら、

「新規書類」→「クイックアクション」

を選択します。

4. クイックアクションを設定する

Automator上部にある設定を変更します。

「ワークフローが受け取る現在の項目」を

画像ファイル

にします。

検索対象は

Finder

にします。

つまり、

ワークフローが受け取る現在の項目：画像ファイル
検索対象：Finder

という設定です。

これでFinderから画像を選択したときに、このクイックアクションを呼び出せるようになります。

5. 「シェルスクリプトを実行」を追加する

Automator左側の検索欄から

シェルスクリプト

と検索します。

表示された

「シェルスクリプトを実行」

を右側のワークフローエリアへドラッグ＆ドロップします。

設定は以下にします。

シェル：/bin/zsh
入力の引き渡し方法：引数として

特に重要なのが、

「入力の引き渡し方法：引数として」

です。

Finderで選択した複数ファイルを、シェルスクリプト側で順番に処理するために使用します。

6. WebP変換用スクリプトを入力する

次にWebP変換用のスクリプトを入力します。

Intel Macの場合

CWEBP="/usr/local/bin/cwebp"

for file in "$@"; do
    output="${file%.*}.webp"
    "$CWEBP" -q 85 "$file" -o "$output"
done

Apple Siliconの場合

M1 / M2 / M3 / M4 / M5などの場合はこちらです。

CWEBP="/opt/homebrew/bin/cwebp"

for file in "$@"; do
    output="${file%.*}.webp"
    "$CWEBP" -q 85 "$file" -o "$output"
done

先ほど

which cwebp

で表示されたパスとCWEBP=のパスが一致していることを確認してください。

7. WebPの画質を変更したい場合

スクリプト内の

-q 85

がWebPの品質設定です。

例えば、

-q 90 → 高画質・ファイルサイズ大きめ
-q 85 → 画質と容量のバランス重視
-q 75 → ファイルサイズをさらに小さく

といった具合に調整できます。

Webサイト用の画像であれば、まずは85前後から試してみるとよいでしょう。

画像によって適切な設定は異なるため、実際の画質とファイルサイズを確認しながら調整してください。

8. 「WebPに変換」という名前で保存する

設定が終わったら、

Command + S

でAutomatorのクイックアクションを保存します。

今回は分かりやすく、

WebPに変換

という名前にしました。

これで設定は完了です。

9. FinderからPNGをWebPに一括変換する

あとは非常に簡単です。

FinderでWebPに変換したいPNG画像を複数選択します。

そして、

右クリック → クイックアクション → WebPに変換

をクリックします。

しばらくすると、元画像と同じフォルダにWebP画像が生成されます。

例えば、

sample.png

であれば、

sample.png
sample.webp

という状態になります。

元画像を削除する処理は入れていないので、PNGもそのまま残ります。

Intel MacとApple Silicon Macの違い

今回の設定で注意したいのが、Intel MacとApple Silicon MacでHomebrewのインストール先が異なることです。

代表的なパスは以下です。

Mac	cwebpのパス
Intel Mac	`/usr/local/bin/cwebp`
Apple Silicon	`/opt/homebrew/bin/cwebp`

Apple Siliconには、M1 / M2 / M3 / M4 / M5などが該当します。

ただし、環境によってパスが異なる可能性もあるため、

which cwebp

で実際のパスを確認するのが確実です。

うまく変換できない場合

右クリックから実行してもWebPが生成されない場合は、まずターミナルで以下を確認します。

which cwebp

例えば、

/opt/homebrew/bin/cwebp

と表示されているのにAutomator側が、

CWEBP="/usr/local/bin/cwebp"

になっていたら動作しません。

その場合は、

CWEBP="/opt/homebrew/bin/cwebp"

に変更します。

また、Automatorの「シェルスクリプトを実行」で、

入力の引き渡し方法：引数として

になっているかも確認してください。

JPEGも一括でWebPに変換できる？

今回のスクリプトは、cwebpが読み込める画像であればPNG以外にも利用できます。

そのため、FinderからJPEG画像を選択して、

右クリック → WebPに変換

という使い方も可能です。

Web制作では、

PNG
↓
WebP

だけでなく、

JPEG
↓
WebP

の一括変換にも使えるので便利です。

さらに便利にカスタマイズできる

Automatorのクイックアクションを複製すれば、用途別のWebP変換も作れます。

例えば、

WebPに変換 90%
WebPに変換 85%
WebPに変換 70%

と画質別に用意しても便利です。

さらにスクリプトを変更すれば、

WebP変換と同時に画像をリサイズ
長辺1920pxに縮小してWebP化
変換後に元画像を削除
特定フォルダへWebPを保存
ファイル名を変更して保存

といった自動化も可能です。

Web制作を頻繁にする人なら、自分の作業フローに合わせてカスタマイズするとかなりの時短になります。

まとめ

MacでPNGをWebPに一括変換したい場合は、

Homebrew + cwebp + Automator

の組み合わせが非常に便利です。

最初に一度設定してしまえば、その後はFinderから、

複数画像を選択 → 右クリック → WebPに変換

だけで一括処理できます。

SquooshなどのWebサービスも便利ですが、大量の画像を毎回1枚ずつ処理するのは少し面倒です。

Webサイト制作などで頻繁にWebPへ変換するのであれば、Finderのクイックアクションに登録しておくと作業時間をかなり短縮できます。

私自身もこれまでSquooshで1枚ずつ変換していましたが、この方法に変更してかなり楽になりました。

特にWordPress制作やWebコーディングで画像をまとめて最適化することが多い方にはおすすめです。