画像をWebP形式に変換する方法:完全ガイド(2026年)
2026年3月28日公開 • 14分で読めます
WebPは、目に見える品質の損失なしに、JPEGやPNGと比較してファイルサイズを25〜35%削減できます。ウェブサイトを運営していてまだ切り替えていない場合、ページ読み込みのたびに不要なバイト数を送信していることになります。このガイドでは、ドラッグ&ドロップのオンラインツールから自動化されたビルドパイプラインまで、画像をWebPに変換するあらゆる実用的な方法を網羅しています。
1. WebPとは何か、なぜ使うべきか?
WebPは、2010年にGoogleが作成した画像フォーマットで、VP8ビデオコーデックの技術をベースに構築されています。1つの目標を持って設計されました:JPEGやPNGと同じ視覚品質を、大幅に小さいファイルサイズで提供すること。そして、その約束を一貫して果たしています。
非可逆モードでは、WebPは同じSSIM品質指数の同等のJPEGファイルより25〜34%小さいファイルを生成します。可逆モードでは、WebP画像は平均してPNGより26%小さくなります。これらは理論上の数字ではありません — Googleはウェブから無作為に抽出した100万枚の画像でテストして、これらの数値に到達しました。
WebPが特に便利なのは、JPEGとPNGが個別にできないことを処理できる点です。JPEGは小さな写真を提供しますが、透明度はありません。PNGは透明度を提供しますが、ファイルサイズが大きくなります。WebPは両方を実現します — 完全なアルファチャンネルサポート付きの非可逆圧縮。透明な背景を持つ製品画像は、PNGとして800KBになる可能性がありますが、透明度付きの非可逆WebPとして150KBに減少し、違いは見えません。
WebPはアニメーションもサポートしており、GIFファイルを置き換えることができます。アニメーションWebPファイルは、同等のGIFより約64%小さく、より良い色深度(GIFの8ビットパレットに対して24ビット)を持っています。短いアニメーションやUIデモにまだGIFを使用している場合、WebPは直接的なアップグレードです。
実用的な影響は明確です:ページ読み込みの高速化、帯域幅コストの削減、Core Web Vitalsスコアの向上。カテゴリページあたり50枚の製品画像を持つ典型的なEコマースサイトの場合、JPEGからWebPに切り替えることで、画像ペイロードを3MBから2MB未満に削減でき、モバイル接続での読み込み時間を1〜2秒短縮できます。
2. 2026年のWebPブラウザサポート
ブラウザサポートは、人々が何年もWebPの採用をためらった主な理由でした。その懸念は今や無関係です。2026年初頭の時点で、Can I Useのデータによると、WebPは世界中で使用されているブラウザの97%以上でサポートされています。
現在の状況は次のとおりです:
| ブラウザ | WebPサポート開始 | 備考 |
|---|---|---|
| Chrome | バージョン32(2014年) | 完全な非可逆+可逆+アニメーション |
| Firefox | バージョン65(2019年) | 完全サポート |
| Safari | バージョン14 / macOS Big Sur(2020年) | macOSとiOSで完全サポート |
| Edge | バージョン18(2018年) | 完全サポート |
| Opera | バージョン19(2013年) | 完全サポート |
| Samsung Internet | バージョン4(2016年) | 完全サポート |
WebPをサポートしなかった唯一のブラウザは、Microsoftが2022年6月に正式に廃止したInternet Explorer 11です。IE11の世界的な使用シェアは現在0.15%未満です。アナリティクスで意味のあるIE11トラフィックが表示されない限り(確認してください — ほぼ確実に表示されません)、フォールバックなしでWebPを提供しても問題ありません。
とはいえ、HTML <picture>要素を使用してフォールバックを実装するのは簡単で、パフォーマンスの面でコストはかかりません。これについては、以下のフォールバックセクションで説明します。ただし、ほとんどのサイトでは、2026年にWebPを主要かつ唯一のウェブ画像フォーマットとして自信を持って使用できます。
2020年のSafariの採用が転換点でした。それ以前は、ウェブユーザーの約15〜20%(iOS Safari + macOS Safari)がWebP画像を見ることができませんでした。現在、デスクトップ、モバイル、タブレットを含むすべての主要プラットフォームがWebPをネイティブに処理します。
3. WebP品質設定の説明
品質設定を正しく行うことは、「ファイルサイズを10%削減」と「ファイルサイズを40%削減」の違いです。WebPの品質パラメータはJPEGとは異なる動作をし、ニュアンスを理解することでより良い決定を下すのに役立ちます。
非可逆WebP品質(-qフラグ)
WebPの品質スケールは、JPEGと同様に0から100まで実行されます。しかし、圧縮アルゴリズムはより効率的であるため、品質80のWebPは通常、品質85〜90のJPEGと同じくらい良く見えます。ほとんどの写真コンテンツの最適な範囲は品質75〜85です。各範囲が実際に意味することは次のとおりです:
- 品質90〜100:ほとんど圧縮されません。ファイルは元のファイルより10〜15%しか小さくなりません。すべての詳細が重要で、すでに他の場所で最適化しているヒーロー画像にのみ役立ちます。
- 品質75〜85:実用的な最適範囲。同等のJPEGと比較して30〜45%節約でき、視覚的な違いはRetinaディスプレイでもほとんどの人には知覚できません。ここから始めてください。
- 品質60〜74:詳しく調べると目立つ柔らかさがありますが、サムネイル、背景画像、ユーザーがズームインしないコンテンツには完全に許容できます。
- 品質60未満:目に見えるアーティファクト。非常に小さなサムネイルまたはプレースホルダー画像にのみ使用してください。
可逆WebP
可逆モードはすべてのピクセルを正確に保持します。品質スライダーはありません — 出力は入力と数学的に同一です。スクリーンショット、図、ロゴ、UI要素、および鋭いエッジ、テキスト、または平坦な色領域を持つ画像には可逆WebPを使用してください。可逆WebPファイルは通常、同等のPNGより26%小さくなります。
ニアロスレスモード
これは、ほとんどのガイドがスキップするWebPの隠れた宝石です。ニアロスレスモード(cwebpで-near_losslessで有効化)は、可逆圧縮の前に画像に最小限の前処理を適用します。前処理は、変化が見えない領域のピクセル値をわずかに変更し、圧縮を劇的に改善します。レベル60のニアロスレスWebPは、標準の可逆WebPより40〜50%小さくなり、変化は文字通り人間の目には見えません。完璧に近い品質を、真の可逆よりもはるかに小さいサイズで必要とするスクリーンショットやグラフィックに最適です。
重要な詳細の1つ:WebPの品質設定は圧縮品質のトレードオフを制御しますが、-mフラグ(メソッド、0〜6)は、エンコーダが最適な圧縮を見つけるためにどれだけ努力するかを制御します。値が高いほど、ファイルは小さくなりますが、エンコードに時間がかかります。バッチ処理の場合、-m 4が良いバランスです。最大の節約が必要な1回限りの変換の場合は、-m 6を使用してください。
4. 方法1:ImgKitでオンライン変換
少数の画像を素早く変換する必要がある場合、オンラインコンバーターが最速の方法です。ImgKitの画像からWebPへのコンバーターは完全にブラウザで実行されます — 画像はデバイスから離れることはありません。これは、クライアントの写真や機密コンテンツを扱っている場合に重要です。
使用方法は次のとおりです:
- ツールを開く — img-kit.com/tools/image-to-webp/にアクセス
- 画像をアップロード — アップロード領域にファイルをドラッグ&ドロップするか、クリックして参照します。一度に複数のファイルを選択できます。ツールはJPEG、PNG、GIF、BMP、TIFF入力を受け入れます。
- 品質を調整 — 品質スライダーを使用してターゲットを設定します。プレビューはリアルタイムで更新されるため、ダウンロード前に出力を確認できます。80から始めて、品質の低下に気付くまで下げ、次に1ノッチ上げます。
- ダウンロード — ダウンロードボタンをクリックしてWebPファイルを取得します。複数の画像の場合、zipファイルが取得されます。
ブラウザベースのアプローチには、画像あたり約50MBの実用的な制限があります(デバイスのRAMによって異なります)。より大きなファイルまたは数百の画像の場合は、以下のコマンドライン方法を使用してください。
オンラインアプローチの1つの利点:変換前後を視覚的に並べて比較できます。これは、両方のファイルを手動で開く必要があるコマンドラインツールでは難しいです。特定のタイプの画像(製品写真、ブログヘッダーなど)に適した品質設定を見つけようとしている場合は、オンラインツールから始めて設定を調整し、その後バッチ処理にその設定を使用してください。
5. 方法2:コマンドライン(cwebp)で変換
Googleのcwebpツールは、WebPのリファレンスエンコーダーです。無料で、高速で、すべてのエンコーディングパラメータを完全に制御できます。これは、バッチ処理またはビルドスクリプトへのWebP変換の統合に使用する方法です。
インストール
# macOS
brew install webp
# Ubuntu/Debian
sudo apt install webp
# Windows(chocolatey経由)
choco install webp
基本的な変換
# 品質80で単一の画像を変換
cwebp -q 80 photo.jpg -o photo.webp
# 可逆変換
cwebp -lossless screenshot.png -o screenshot.webp
# レベル60でニアロスレス(グラフィックに最適)
cwebp -near_lossless 60 diagram.png -o diagram.webp
バッチ変換
ディレクトリ内のすべてのJPEGを変換:
# Linux/macOS — 現在のフォルダ内のすべてのJPEGを変換
for f in *.jpg; do
cwebp -q 80 -m 4 "$f" -o "${f%.jpg}.webp"
done
# サブディレクトリを含める
find . -name "*.jpg" -exec sh -c 'cwebp -q 80 "$1" -o "${1%.jpg}.webp"' _ {} \;
# PNGも変換
for f in *.png; do
cwebp -q 85 -m 4 "$f" -o "${f%.png}.webp"
done
便利なフラグ
-q 80— 品質(0〜100)。写真の場合は80から始めます。-m 4— 圧縮方法(0〜6)。高い=小さいファイル、遅いエンコーディング。-resize W H— 変換中にリサイズ。アスペクト比を維持するには、一方の次元に0を使用します。-mt— マルチスレッドエンコーディング。マルチコアマシンで高速。-short— ファイルサイズのみを出力(スクリプトで便利)。-