Mac での cwebp インストール方法と使い方

投稿日 2025年4月5日
著者田島佑清
カテゴリー Post

以下、ざっくり合ってると思う。

cwebp を使って画像を WebP 形式に変換するためのインストール方法、簡単な使い方、そしてシェルスクリプトの設定をわかりやすくまとめたメモです。

1. `cwebp` のインストール方法

macOS では、Homebrew を使って cwebp を簡単にインストールできます。以下のコマンドを実行します。

brew install webp

インストールが完了したら、次のコマンドでインストールされているか確認できます。
※どちらかで確認できます

cwebp -version
or
brew list | grep webp

これで、cwebp がインストールされていることが確認できます。

2. `cwebp` の使い方

基本的な使い方

cwebp を使って画像を WebP 形式に変換する基本的なコマンドは次の通りです。

cwebp input_image.jpg -o output_image.webp

input_image.jpg: 変換したい画像ファイル（PNG や JPG など）。
output_image.webp: 出力する WebP 形式の画像ファイル名。

一括変換（複数ファイルを変換する）

複数の画像を一括で WebP 形式に変換する場合、次のように for ループを使います。

1. 元のファイル名に `.webp` を追加して保存

以下のコマンドでは、元の拡張子を保持したまま .webp を追加して変換します。

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

これで、例えば image.jpg は image.jpg.webp として保存され、元の拡張子を維持します。

2. 元の拡張子を除いて `.webp` を付けて保存

次のコマンドは、元の拡張子を取り除いて .webp を付けて保存します。

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

これで、image.jpg や image.png はそれぞれ image.webp として保存されます。

圧縮品質を指定して変換

-q オプションを使うことで、圧縮品質を指定できます。品質は 0 から 100 の範囲で指定でき、数値が高いほど画像品質が良く、ファイルサイズは大きくなります。

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

-q 80 は品質を 80 に設定する例です。

3. `setopt nullglob` の使い方

setopt nullglob は、シェルでファイル名のワイルドカード（*）が一致しない場合にエラーを防ぐオプションです。これを設定すると、*.jpg や *.png に一致するファイルがない場合にエラーが発生せず、空のリストとして処理を続けることができます。

使用方法

setopt nullglob を使ってワイルドカードの一致エラーを防ぐ:

setopt nullglob

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

setopt nullglob を使用することで、*.png や *.jpg に一致するファイルがない場合、エラーが発生せず、スクリプトがそのまま実行されます。もし一致するファイルがなければ、何も処理されません。

4. `.htaccess` 設定（WebP 画像をサーバーで配信する設定）

WebP 画像がサーバーにある場合、.htaccess 設定で WebP 画像にリダイレクトさせる方法も簡単に設定できます。これにより、ブラウザが WebP 画像をサポートしている場合に、自動的に WebP 画像が配信されます。

WebP 配信のための `.htaccess` 設定

# BEGIN WebP Conversion
<IfModule mod_rewrite.c>
    RewriteEngine On

    # WebP サポートを確認（ブラウザが WebP をサポートしている場合のみ）
    RewriteCond %{HTTP_ACCEPT} image/webp

    # PNG または JPG を対象にする
    RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$

    # リクエストされたファイルに対応する WebP 画像がサーバーに存在するか確認
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

    # クエリ文字列に 'type=original' が含まれていない場合にのみ WebP にリダイレクト
    RewriteCond %{QUERY_STRING} !type=original

    # WebP 画像にリダイレクト（元の画像名に .webp 拡張子を追加）
    RewriteRule ^(.*)\.(jpe?g|png)$ /$1.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
    # キャッシュ制御のため、'Vary: Accept' ヘッダーを追加
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
    # WebP の MIME タイプを指定
    AddType image/webp .webp
</IfModule>
# END WebP Conversion

設定内容

WebP サポートの確認: WebP 対応ブラウザにのみ WebP 画像を配信します。
PNG と JPG 対象: .png と .jpg の画像が WebP に変換されます。
WebP 画像の存在確認: 画像の WebP バージョンがサーバーに存在する場合のみ、WebP 画像を配信します。
type=original クエリパラメータ: type=original が URL に含まれている場合、WebP 画像ではなく元の画像を表示します。

まとめ

インストール: brew install webp で cwebp をインストール。
画像変換: cwebp input_image.jpg -o output_image.webp で単一ファイルを変換。
一括変換: for file in *.png *.jpg; do cwebp "$file" -o "${file%.*}.webp"; done で複数画像を一括変換。
setopt nullglob: ワイルドカードが一致しない場合にエラーを防ぐ。
.htaccess 設定: WebP 画像をサポートするブラウザに自動的に配信。

このガイドを使って、macOS で WebP 画像を効率的に扱えるようになります！

この記事を書いた人

田島佑清

2児の父 / ネクストメディア株式会社のエンジニア

詳細はこちら記事一覧

1. cwebp のインストール方法

2. cwebp の使い方