MacでWebPファイルを快適に扱う Quick Look＆変換方法

macOS で WebP を扱うとき、まず知っておくべきは「表示にプラグインは不要」ということです。macOS 11 Big Sur 以降、Quick Look・プレビュー・Safari が WebP にネイティブ対応しています。

変換については、少し注意が必要です。標準コマンドの sips は WebP を「読めるが書けない」ため、WebP → JPEG はできても、JPEG → WebP はできません。書き出しには別のツールが要ります。

この記事は2024年の公開後、2026年9月に見直しました。 公開当時は「ネイティブ対応済み」と書きながら Quick Look 用プラグインの導入手順を載せており、内容が矛盾していました。実際に手元の macOS 26.5.1 で検証したうえで書き直しています。

WebP とは何か

Google が開発した画像フォーマットで、JPEG や PNG より小さいファイルサイズで同等の画質を実現します。

「非可逆圧縮でも透過を保持できる」のが JPEG との決定的な違いです。 これまで「透過が必要だから PNG」としていた画像を、大幅に軽くできます。

macOS のネイティブ対応状況

macOS 11 Big Sur（2020年）以降は、追加インストールなしで表示できます。

Big Sur は2020年リリースなので、現在サポートされている macOS はすべて対応済みです。ネット上に残る「WebPQuickLook をインストールしましょう」という手順は、Catalina 以前の情報です。

確認方法

Finder で WebP ファイルを選択してスペースキーを押してください。画像が表示されれば対応しています。ダブルクリックすればプレビューアプリで開きます。

もし表示されない場合、疑うべきはプラグインの不足ではなく次の点です。

• ファイルが破損している（拡張子だけ .webp で中身が別形式など）
• Quick Look のキャッシュが壊れている

後者なら、キャッシュを再読み込みすれば直ります。

qlmanage -r
qlmanage -r cache

sips での変換：読めるが書けない

macOS には sips という画像処理コマンドが標準で入っています。ここには重要な制約があります。

対応フォーマットの一覧を見ると、書き込み可能な形式には Writable と表示されます。

sips --formats

com.adobe.pdf                pdf   Writable
org.webmproject.webp         webp            ← Writable が付かない
public.jpeg                  jpeg  Writable
public.png                   png   Writable

WebP には Writable が付いていません。読み込み専用です。（macOS 26.5.1 で確認）

WebP → JPEG / PNG（できる）

# WebP を JPEG に変換する
sips -s format jpeg photo.webp --out photo.jpg

# PNG に変換する（透過を保持したい場合）
sips -s format png photo.webp --out photo.png

# 品質を指定する（0〜100）
sips -s format jpeg -s formatOptions 85 photo.webp --out photo.jpg

フォルダ内をまとめて変換する場合はこう書きます。

for f in *.webp; do
  sips -s format jpeg "$f" --out "${f%.webp}.jpg"
done

JPEG / PNG → WebP（できない）

sips -s format webp photo.png --out photo.webp

Error: Can't write format: org.webmproject.webp
Error 13: an unknown error occurred

この方向の変換は sips ではできません。 次の方法を使ってください。

WebP を書き出す：cwebp を使う

Google 公式のコマンドラインツールです。Homebrew で入ります。

brew install webp

cwebp（書き出し）と dwebp（読み込み）が使えるようになります。

# PNG / JPEG を WebP にする（品質80）
cwebp -q 80 photo.png -o photo.webp

# 可逆圧縮で変換する（PNG の代替として使う場合）
cwebp -lossless photo.png -o photo.webp

# 透過を保持したまま非可逆圧縮する
cwebp -q 80 -alpha_q 100 logo.png -o logo.webp

# WebP を PNG に戻す
dwebp photo.webp -o photo.png

フォルダ内を一括変換する例です。

for f in *.png *.jpg; do
  [ -e "$f" ] || continue
  cwebp -q 80 "$f" -o "${f%.*}.webp"
done

アニメーション GIF の変換や、複数枚からのアニメーション WebP 作成もできます。

# GIF をアニメーション WebP に変換
gif2webp animation.gif -o animation.webp

# 連番画像からアニメーション WebP を作る
img2webp -d 100 frame*.png -o animation.webp

品質の目安

WebP の品質値は JPEG の品質値と同じ意味ではありません。 「JPEG で 85 にしていたから WebP も 85」とすると、想定より重くなることがあります。実際に出力サイズを見て決めてください。

Python で変換する

コマンドを入れたくない場合、Pillow でも変換できます。

pip install Pillow

from pathlib import Path
from PIL import Image

for path in Path('.').glob('*.png'):
    img = Image.open(path)
    img.save(path.with_suffix('.webp'), 'WEBP', quality=80)

透過のある PNG をそのまま変換すると、モードによっては失敗します。変換前にモードを揃えておくと安全です。

img = Image.open(path)

if img.mode in ('P', 'LA'):
    img = img.convert('RGBA')

img.save(path.with_suffix('.webp'), 'WEBP', quality=80)

Python での画像処理はPythonで画像圧縮GUIアプリを作るでも扱っています。

Photoshop で WebP を扱う

Photoshop 23.2（2022年2月）以降は、プラグインなしで WebP を開いて保存できます。 「別名で保存」の形式一覧に WebP が出てきます。

WebPShop プラグインが今も必要なのは、次の場合に限られます。

• Photoshop 23.1 以前を使っている
• アニメーション WebP を扱いたい
• エンコード時のプレビューが必要

通常の静止画であれば、プラグインを入れる必要はありません。

変換するときの注意点

可逆と非可逆を使い分ける

文字や細い線が入った画像を非可逆で変換すると、輪郭がぼやけます。 ここは形式ではなく中身で判断してください。

JPEG から WebP への再変換は劣化が重なる

すでに JPEG で圧縮された画像を WebP に変換すると、劣化が二重にかかります。 可能なら、元データ（RAW や PSD、無圧縮 PNG）から直接 WebP を書き出してください。

元ファイルを残しておく

一括変換のスクリプトを回す前に、必ずバックアップを取ってください。上のスクリプトは元ファイルを消しませんが、出力先に同名ファイルがあれば上書きします。

Web で使うときの書き方

WebP に対応していない環境向けにフォールバックを用意する場合は <picture> を使います。

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" width="800" height="600" alt="説明" loading="lazy">
</picture>

loading="lazy" や width / height は、<source> ではなく中の <img> に書きます。 判定を行うのは <img> だからです。詳しくはネイティブ Lazy Loading の改善にまとめています。

ただし、WebP はすでにすべてのモダンブラウザが対応しているため、対応環境だけを相手にするなら <img> 1つで十分です。フォールバックが必要なのは、古い環境も想定する場合に限られます。

まとめ

• macOS 11 Big Sur 以降は、Quick Look・プレビュー・Safari が WebP に対応済み。プラグインは不要
• 表示されないときは qlmanage -r cache でキャッシュを再作成する
• sips は WebP を読めるが書けない。 WebP → JPEG は可、JPEG → WebP は不可
• 書き出しには brew install webp で cwebp を入れる
• 写真は -q 80 程度、ロゴやスクリーンショットは -lossless
• Photoshop 23.2 以降は WebP にネイティブ対応。 WebPShop は基本的に不要
• JPEG から WebP への変換は劣化が二重になる。元データから書き出す
• 非可逆でも透過を保持できるのが WebP の強み

画像の軽量化そのものについてはPythonで画像圧縮GUIアプリを作るもあわせてどうぞ。