同じ「WebPの圧縮」でも、求めていることは人によって全く違います：
JPGやPNGを一括してWebPに変換したい人、すでに持っているWebPをさらに小さくしたい人、動くWebPを扱いたい人などです。
ツールに絶対の優劣はなく、合う合わしが重要です。この記事ではシーン別に、各シーンで最も使いやすいツールを1〜2個だけ紹介します。
始める前に：2分でWebPについて知ろう
WebPには実は3つの形態があります：
- 有損WebP：JPEGと同様の原理で、品質パラメータに基づいて詳細を破棄し、ファイルサイズを小さくします。写真やバナーに適しています。
- 無損WebP：PNGと同様の原理で、ピクセルは完全に変更されません。スクリーンショットやUI素材に適しています。
- 動的WebP：複数フレームのアニメーションで、有損・無損のどちらでも可能です。GIFから変換されたスタンプやデモ用GIFによく使われます。
どのタイプか分からない場合は、Google公式のwebpinfoで確認してください：
bash
brew install webp
webpinfo image.webp
出力結果にVP8があれば有損、VP8Lがあれば無損、ANIM / ANMFがあればアニメーション画像です。
もう一つ知っておくべきことがあります：有損WebPでは、より高い品質パラメータで再エンコードすると、ファイルサイズは大きくなりますが品質は向上しません——削除した詳細は元に戻りません。そのため、すでにWebPの画像に対しては、圧縮ツールが「圧縮できないなら圧縮しない」と判断できることが重要です。
シーン1：JPG / PNGを一括してWebPに変換する
これが多くの人が最初にWebPに触れるときにやることです。
グラフィカルUIで選ぶならXnConvertです。 無料でクロスプラットフォームで、一度に複数の画像をドラッグ＆ドロップして、WebPの品質や無損モードを設定し、サイズ変更やファイル名変更もまとめて行えます。形式変換に関しては、これが一番手間がかかりません。
ビルドプロセスに組み込むならcwebpまたはsharpを選びます。 サイトプロジェクトでは、手動で変換するのではなく、ビルドやCDNへのアップロード時に自動処理する方が良いでしょう：
bash
cwebp：品質75、最も遅いが最も効率的なエンコーディング方式、カラープロファイルを保持
cwebp -q 75 -m 6 -metadata icc input.jpg -o output.webp
js
// sharp（Node.js）
await sharp('input.jpg').webp({ quality: 75, effort: 6 }).toFile('output.webp')
パラメータが決まらない？まずSquooshで試してみてください。 Googleのオンラインツールで1枚ずつ処理できますが、左右分割して品質を調整しながらリアルタイムに結果を確認できます。まずは「このタイプの画像ならどの品質が適切か」を把握し、その値を上記のバッチ処理ツールに入力します。
シーン2：すでにWebPを持っているが、さらに小さくしたい
すでにサイトでWebPを使用していますが、Lighthouseで「画像をさらに圧縮できる」と表示されたり、素材ディレクトリにWebPが大量にあって容量を食っている場合は、形式変換ではなく、元のファイルをその場で小さくする必要があります。
Macユーザー向け：ImgZilla
ImgZillaは私たちが作成したmacOS用画像圧縮ツールで、このシーンこそが得意としています：
- その場で圧縮、パスは変更されません。
banner.webpを圧縮してもbanner.webpのままなので、ウェブページやコード、ドキュメント内の参照を1行も変更する必要がありません。 - フォルダ全体をドラッグ＆ドロップ。 サブディレクトリを再帰的にスキャンし、隠しファイルや
node_modulesは自動的にスキップされます。WebPやJPG、PNG、GIF、AVIF、HEIC、SVGが混ざっていても一度に処理できます。 - パラメータを調整する必要はありません。 Googleのlibwebpエンコーダを使用しており、品質75、エンコード努力度4で、Squooshのデフォルト設定と一致します。透明チャンネルは最高品質で保持され、透明な背景にノイズ（毛羽立ち）は出ません。
- 圧縮できない場合は無理に圧縮しません。 再エンコード後にサイズが縮まらない（圧縮率が0.4%未満）場合、「最小化済み」として元のファイルをそのまま返し、より大きなファイルを渡すことも、無料枠を消費することもありません。
- やり直しが可能です。 元の画像はデフォルトでゴミ箱に移動されます。どの画像でも気に入らない場合は、右クリックして「元の場所に戻す」ことができます。
- 完全にローカルで動作します。 サーバーには画像をアップロードしません。
👉 Mac App StoreからImgZillaをダウンロード
その他のプラットフォーム：CaesiumまたはTinyPNG
- Caesium Image Compressor：オープンソースで無料。Windows、macOS、Linuxに対応し、WebPの一括圧縮に対応しています。品質やメタデータの保持を設定できます。
- TinyPNG：ウェブツールで、WebPにも対応しています。ドラッグ＆ドロップでそのまま使えますが、無料版は枚数やサイズに制限があり、画像を相手のサーバーにアップロードする必要があります。
シーン3：動的WebP
動きには2つのニーズがあります：
GIFを動的WebPに変換する：Google公式のgif2webpを使用します（cwebpと同じlibwebpツールキットに含まれており、Macではbrew install webpでインストール可能です）。同じアニメーションであれば、動的WebPは通常GIFよりもかなり小さくなります。
bash
gif2webp -q 75 -m 6 input.gif -o output.webp
既存の動的WebPをさらに圧縮する：多くのツールはアニメーション画像に対応していないか、最初のフレームのみを保持しようとします。ImgZillaは動的WebPの再圧縮をサポートしています——フレームごとに再エンコードし、フレーム数、各フレームの長さ、ループ回数、キャンバスサイズはすべて変更せず、アニメーションはそのままですがファイルサイズは小さくなります。静的画像と同様、圧縮できない場合は「最小化済み」として元のファイルをそのまま返します。
シーン4：ピクセルを変更せずに保持する必要がある
UI用の切り抜き画像をデザイン稿と厳密に一致させたい、スクリーンショットをピクセル単位で比較したい、素材の編集を後で続けたいなどの場合は、無損圧縮が必要です。
cwebpを使用します：
bash
純粋な無損圧縮
cwebp -lossless -z 9 input.png -o output.webp
近似無損：ピクセルに極めて微細な変化はありますが、純粋な無損よりもかなり小さくなります。スクリーンショットやUIに適しています
cwebp -near_lossless 60 input.png -o output.webp
注意：ImgZillaはWebPに対して統一的に有損エンコーディングを使用します（元々無損だったWebPも含む）。 そのため、サイズは通常大幅に縮小されますが、ピクセルは1つずつ一致しなくなります。また、WebP内のメタデータ（カラープロファイルを含む）は削除されます。通常のsRGB画像には影響しませんが、Display P3などの広色域プロファイルを持つ画像では、色管理ソフトによって色に若干の差異が生じる可能性があります。ピクセルと色に厳密な要件がある画像については、cwebpを使用するか、圧縮前にそれらを分けておいてください。
一覧表でまとめ
| やるべきこと | おすすめ | 代替案 |
|---|---|---|
| JPG / PNGを一括してWebPに変換する | XnConvert | cwebp、sharp（ビルドプロセス） |
| パラメータを試す、1枚ずつ処理 | Squoosh | — |
| 既存WebPをその場でさらに圧縮する（Mac） | ImgZilla | Caesium |
| 既存WebPをさらに圧縮する（Windows / Linux） | Caesium | TinyPNG |
| GIFを動的WebPに変換する | gif2webp | — |
| 既存の動的WebPをさらに圧縮する | ImgZilla | libwebpでスクリプトを自作する |
| ピクセルを変更せずに保持する必要がある | cwebp -lossless / -near_lossless |
— |
ダウンロードリンク
| ツール | プラットフォーム | 価格 | ダウンロード |
|---|---|---|---|
| ImgZilla | macOS 12.3+ | 無料版：1日10枚まで | Mac App Store |
| XnConvert | Windows / macOS / Linux | 個人利用無料 | xnview.com |
| Caesium Image Compressor | Windows / macOS / Linux | 無料オープンソース | saerasoft.com |
| cwebp / gif2webp / webpinfo | コマンドライン | 無料オープンソース | Google公式ダウンロード、Mac：brew install webp |
| sharp | Node.js | 無料オープンソース | sharp.pixelplumbing.com、npm install sharp |
| Squoosh | ウェブ | 無料 | squoosh.app |
| TinyPNG | ウェブ | 無料版に制限あり | tinypng.com |
最後に
WebP自体はすでに非常に効率的な形式です。WebPがCDNやビルドツールによって適切なパラメータで生成されている場合、さらに圧縮できる余地はあまりありません。「最小化済み」と表示されるのは正常です。大幅に節約できるのは、高品質のパラメータでエクスポートした、PNGから無損変換した、あるいはGIFから直接変換した後さらに処理していないファイルです。
まずwebpinfoで手元の画像が何かを確認し、その後シーンに合わせてツールを選ぶことで、10個のツールを試すよりもずっと時間が節約できます。
ImgZillaは現在macOS（12.3以上）のみをサポートしており、Mac App Storeからダウンロードできます。無料版は1日に10枚まで圧縮でき、圧縮が成功した場合のみカウントされます——WebPで満杯のフォルダをドラッグ＆ドロップして、どれくらい節約できるか見てみましょう。