WebPコンバーター：画像をWebPに変換する方法（実際のサイズ付き）

最終更新日: 2026年7月26日

画像をWebPに変換することは、ウェブパフォーマンスを向上させるための最も手軽で大きな改善点の一つです。WebPは、同じコンテンツの場合、JPEGよりも約25〜35%小さく、PNGよりもはるかに小さいサイズでありながら、ブラウザサポートは約98%に達しています。本ガイドでは、期待できる測定されたファイルサイズとともに、画像をWebPに変換する方法と、依然としてJPEGを必要とするブラウザのためのフォールバック方法を解説します。

クイックアンサー：WebPへの変換方法は？

スピードとバッチ処理にはcwebpコマンドラインを使用し、単発の変換にはブラウザコンバーターを、スクリプトにはPillowを使用するのが便利です。一般的な写真の場合、画質を合わせたJPEG→WebPへの変換でファイルサイズが約30〜45%削減されます。

WebPは実際にどれだけ節約できるのか？

視覚的に一致した画質で変換された、1400×933ピクセルの写真で測定した結果：

PNGグラフィックの場合、ロスレスWebPは通常、同じピクセル品質のPNGよりも20〜30%小さく、透過性のあるUIアセットに役立ちます。すべてのフォーマットで同じソースを使用することで、その差が明らかになります：

すべてのフォーマットの比較は、image formats explainedで確認できます。

WebPとAVIF、どちらを選ぶべきか？

どちらもJPEGより小さいですが、AVIFはWebPよりもさらに20〜30%小さく、エンコードが遅く、ブラウザサポートが若干劣ります。ほとんどのサイトにとっての実用的な答えは、両方（AVIFとWebP）を出し、JPEGをフォールバックとして用意し、<picture>要素に各ブラウザが最もサポートする形式を提供させることです。一つしか追加できない場合は、エンコードが速くサポート範囲が広いため、WebPの方が安全な選択です。AVIFの導入準備ができたら、AVIF vs WebP comparisonを参照してください。

方法1：ブラウザコンバーター

単一の画像を使用する場合は、フォーマット変換ツールを使用します。画像をアップロードし、WebPを選択し、写真の場合は画質を80程度に設定（グラフィックの場合はロスレス）してダウンロードします。リアルタイムでの画質/サイズ制御を行うには、Squooshがスライダーを動かすにつれて出力サイズを表示します。

方法2：cwebpコマンドライン

cwebpは公式のWebPエンコーダーであり、高速でスクリプト化が容易です。

## JPEG/PNGからロスシーなWebP（画質80）
cwebp -q 80 input.jpg -o output.webp

## ロスレスWebP（グラフィック、スクリーンショット、シャープなテキストに最適）
cwebp -lossless input.png -o output.webp

## 幅1600pxにリサイズしながら変換
cwebp -q 80 -resize 1600 0 input.jpg -o output.webp

## 全フォルダを並列処理
mkdir -p out
ls *.jpg | xargs -P 4 -I {} cwebp -q 80 {} -o out/{}.webp

デコードバックするには、dwebpが逆の処理を行います。すでに使用している場合は、ImageMagickのmagickもWebPの読み書きが可能です。並列フォルダパターンについては、batch resize guideを参照してください。

方法3：Python (Pillow)

ビルドステップやサーバー用途の場合、Pillowを使用して変換を行い、画質をプログラム的に制御できます。

from PIL import Image
from pathlib import Path

def to_webp(src: Path, dest: Path, quality: int = 80, lossless: bool = False):
    with Image.open(src) as img:
        img.save(dest, "WebP", quality=quality, lossless=lossless, method=6)

for f in Path("images").glob("*"):
    if f.suffix.lower() in (".jpg", ".jpeg", ".png"):
        to_webp(f, Path("out") / f"{f.stem}.webp", quality=80)

method=6は最も時間がかかり、最高の圧縮効率を発揮します。アップロード時に一度だけエンコードする場合などには適しています。ロスレスグラフィックの場合は、lossless=Trueを渡してください。

WebPとフォールバックを組み合わせて配信する方法は？

WebPのサポート率は約98%ですが、残りの2%（古いSafariや一部の埋め込みブラウザ）はJPEG/PNGのフォールバックが必要です。<picture>要素を使用します：

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

ブラウザはサポートする最初のタイプを選択します。何も表示されない事態を防ぐため、JPEGのsrcを持つ実際の<img>タグを最終フォールバックとして残してください。AVIFも生成する場合は、それを最初の<source>として追加してください — AVIF vs WebP comparisonを参照してください。

どのような画質とメソッド設定を使用すべきか？

ロスシーなWebP写真の場合、画質75〜80が最適なスイートスポットです。これは、通常の閲覧距離では目に見えない損失を伴う小さなファイルサイズを実現します。70を下回ると、滑らかなグラデーションや肌の色調にアーティファクトが出始めます。85を超えると、人間には見えない部分でバイト数を浪費することになります。-m（メソッド）フラグは、エンコード時間とファイルサイズのトレードオフを調整します：-m 0が最速、-m 6が最も遅いですが、最小の出力を生成します。インタラクティブな作業には-m 4を、速度が問題にならない一度限りのバッチエンコードには-m 6を使用してください。

ロスレスWebP（グラフィック、スクリーンショット、シャープなテキスト）の場合、-lossless -m 6が最高の比率を提供します。ロスレスWebPは、同じコンテンツに対してPNGよりも約20〜30%優れています。グラフィックの色数が非常に少ない場合は、パレットを減らすことも試みてください。色数が少ないほど、どのロスレスフォーマットでも劇的に圧縮されます。これらのチューニングの詳細は、image compression deep diveのより広範なガイドラインと整合しています。

WebPが不適切なケースは？

• メール。 多くのメールクライアントはWebPを無視します。メールにはJPEG/PNGを使用してください。
• 古い埋め込みブラウザ（WebPサポート以前の古いスマートTV、キオスクなど）。
• JPEGのみを受け入れるパートナー/マーケットプレイスフィード。
• ツールチェーンがそれを出力できない場合。 CMSが<picture>を配信できない場合、JPEGのみのパイプラインの方が対応が簡単です。

これらのケースでは、format guideで適切な代替案を確認できます。

よくある間違い

• 変換しただけでリサイズしないこと。 4000pxのWebPも、ダウンロードは依然として4000pxです。先にリサイズしてください。
• シャープなグラフィックにロスシーWebPを使用すること。 ロスシーWebPはJPEGと同様に細いエッジをぼかします。スクリーンショットやテキストには-losslessを使用してください。
• フォールバックなしでWebPを配信すること。 古いブラウザは、JPEGの<img>フォールバックがないと何もレンダリングしません。
• 同じ画質番号で比較すること。 JPEG q85 ≈ WebP q80 ≈ AVIF q68 で知覚される品質が同等です。数字ではなく視覚的に比較してください。
• リクエストごとに過剰にエンコードすること。 アップロード時に一度だけエンコードします。WebPのエンコードはJPEGよりも時間がかかります。

よくある質問

WebPは実際にどれだけ節約できるのか？

同等画質の場合、JPEGより25〜35%小さく、透過性のあるグラフィックの場合はPNGよりも大きな節約になることがよくあります。この削減量がウェブ配信のために変換する理由です。オリジナルをマスターファイルとして保持し、WebPを配信用にエクスポートしてください。

WebPとAVIF、どちらを選ぶべきか？

WebPは安全なデフォルト（普遍的なブラウザサポート、簡単なエンコード）であり、AVIFは最新のブラウザでの最小ファイルサイズ（JPEGより約50%小さいが、エンコードに時間がかかり、古いブラウザではギャップがある）に適しています。<picture>要素を介してWebPフォールバック付きでAVIFを配信してください。

コマンドライン変換はどうやるの？

cwebp -q 80 input.jpg -o output.webp。-qフラグは画質を設定します（80がウェブのデフォルトです）。バッチ処理にはシェルループまたはImageMagickを使用します。ロスレスの場合は-losslessを使用してください。

すべてのブラウザでWebPはサポートされているか？

すべての現在のブラウザでサポートされています。非常に古いブラウザ（古いIEなど）ではサポートされていないため、<picture>要素を介してJPEGまたはPNGフォールバックとしてWebPを配信する必要があります。このフォールバックが残りの小さなギャップをカバーします。

バッチでWebPに変換するには？

シェルループとcwebpを使用するか（for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done）、ImageMagick、またはPythonスクリプト（Pillow）を使用します。コマンドラインはファイルごとの制限やサインアップなしで数千ファイルを処理できるため、カタログにはこれが最適な方法です。batch processing guideを参照してください。

WebPはどれだけ節約できるか？

同等画質の場合、JPEGより25〜35%小さく、透過性のあるグラフィックの場合はPNGよりも大きな節約になることがよくあります。この削減量がウェブ配信のために変換する理由です。オリジナルをマスターファイルとして保持し、WebPを配信用にエクスポートし、古いブラウザ向けにフォールバックを用意してください。

WebPはロスシーかロスレスか？

どちらも可能です。WebPは、写真用のロスシーモード（より小さい）と、グラフィックやマスター用ロスレスモード（正確なピクセル）の両方をサポートしています。コンテンツによって選択します：写真はロスシー、アーティファクトが見えてしまうシャープなエッジやテキストのグラフィックにはロスレスを使用します。この二重のサポートが、WebPがウェブ配信においてJPEGとPNGの両方に取って代わっている理由の一つです。

cwebpコマンドとは？

cwebp -q 80 input.jpg -o output.webpは、JPEGを画質80でWebPに変換します。-qフラグは画質を設定し、ロスレス出力には-losslessを追加し、ターゲットの幅にリサイズするには-resize W 0を追加します。バッチ処理にはシェルループを使用します：for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done。これはバッチ処理における無料かつ無制限の方法です。

画像クレジット

• JPEG/WebPのビフォーアフターとサイズ棒グラフ — eコマーススタイルの写真（Pexels #16675632、Mikael Blomkvistによる撮影）から著者によって生成され、実際のJPEG-to-WebPの節約量を示しています。