PNGは1996年、特許に縛られたGIFを置き換えるために登場して以来、Webにおけるロスレス画像フォーマットの既定値として君臨してきました。2010年にGoogleが設計し、2020年までにすべての主要ブラウザでサポートされた WebPは、たった一つの約束を引っ提げて現れます: 同じ画質で、より小さなファイル。この約束は本物ですが、ベンチマーク見出しが示すよりも両者の差は微妙です。本記事ではファイルサイズ、透過、アニメーション、ブラウザ対応、エンコード速度など実際の違いと、どんなプロジェクトにも当てはめられる判断ツリーを示します。

結論を先に

2026年の新規Web案件なら、WebPの方が安全な既定値です。直近6年で出荷されたすべてのブラウザがWebPをサポートし、視覚的に同等の画質でPNGより25〜35%小さくなります。PNGを保つべき理由は (1) WebPを読めない下流ツールがあり、ビット完全な出力を要求するアセットパイプライン、または (2) ブラウザ以外のクライアント（デコーダーが更新されていないデスクトップアプリ等）が消費する場合だけです。

内部構造の違い

PNGは単一の圧縮アルゴリズム — 行ごとの予測フィルタにDEFLATEを掛ける方式 — を使います。常にロスレスで、チャネルあたり8ビット固定、透過のためのアルファチャネルを1つ持ちます。効率より忠実度のために設計され、画質を変えるノブはエンコーダーにありません。

WebPは2つのコーディング経路を重ねています。ロッシーWebPはWebM動画と同じVP8のイントラフレームコーダーを借用。ロスレスWebPはLZ77に色変換予測器のスタックを乗せたものです。1つのWebPファイルはどちらのモードにもなり、最近のエンコーダーは入力に対してより小さくなる方を自動選択します。WebPはどちらのモードでもアルファチャネル、アニメーションフレーム（アニメGIFの代替）、メタデータをサポートします。

ファイルサイズ — 実際にどれくらい縮むか

ベンチマークは画像によりますが、数千件の実アセットから得られる経験則は次の通りです:

写真系コンテンツ（風景、人物、商品写真）: 品質80のロッシーWebPはPNGより30〜45%小さく、通常の表示サイズでは差を見分けられません。同じ品質のJPEGはほぼ同等ですが、低ビットレートではWebPが上回ります。
スクリーンショットとUIモックアップ: ロスレスWebPは通常PNGより20〜30%小さいです。UI画像ではロスレスコーダーが本当にDEFLATEより優秀です。
フラットなイラスト、ロゴ、チャート: ロスレスWebPで40〜50%削減に達することも。単色領域は積極的に圧縮されます。
ピクセルアート、256×256以下のアイコン: WebPとPNGはほぼ同等。WebPのコンテナオーバーヘッドが固定なので、極小サイズではPNGが勝つこともあります。

透過: 落とし穴

PNGの透過はシンプルです。WebPの透過もシンプルですが、一部のエンコーダー（特に古いコマンドライン版cwebp）は既定でプリマルチプライドアルファを使います。これは部分透過ピクセルの色を静かに変えてしまい、別の背景に合成するとハロや色のズレが現れます。エンコーダーがプリマルチプライドに変換した合図です。生のRGB+Aを保ちたいならcwebp -exactか、お使いのエンコーダーの相当オプションを指定してください。

アニメーション

アニメーションWebPは、MP4/WebM動画では過剰だがGIFでは大きすぎる領域でGIFを置き換えます。480p、5秒、並の品質のアニメーションでアニメWebPは約200KB、最適化GIFは1.2MB、MP4は80KB程度。アニメに透過が必要(MP4は不可)でGIFサイズは避けたい場面で、WebPが中間解になります。

2026年のブラウザ対応

Safari 14(2020年9月)以降のエバーグリーンブラウザで普遍的に対応。WebPが負ける一般的な状況は:

iOS 14未満 — シェアは縮小しているが、一部のエンタープライズ層には依然有意
レガシーAndroid(4.x以下)の組み込みWebView
メールクライアント — 多くは依然WebPをインライン描画しません。メールにはPNG/JPEGを。
一部のデスクトップ画像ビューア — macOS PreviewはOK、Windows既定のフォトもOK。

判断ツリー

新しいアセットが来るたびに私が下す判断:

HTMLページ用? WebP。Safari 13より古いブラウザで正しく表示する必要がある時だけ<picture>にPNGフォールバックを追加。
メール用? PNGかJPEG。2026年でもメールクライアントのWebP対応は壊れています。
自分の管理外の下流ツールが処理する? 先にツールを試す。疑わしければPNGに倒します。
小さなアイコン(64×64以下)? どちらでも可。ビルドパイプラインがすでに作っている方を使えばOK。

安全に変換する

ほとんどの画像で、品質80のロッシーWebPは原本と区別できません。スクリーンショット、UIモックアップ、鋭いエッジを含むものはロスレスで — DEFLATE基盤のPNGはこの種のコンテンツでWebPのロスレスコーダーに勝てません。大量のPNGを一度に変換する場合、私たちのPNG → WebP 変換ツールはブラウザ内で完結するので、画像が端末を離れません。

結論

WebPはWebコンテンツ領域においてPNGのユースケースの厳密な上位集合であり、意味のあるすべてのカテゴリで意味のある分だけ小さなファイルを出します。PNGはメール、レガシーコンシューマ、まだ追いついていない下流ツールのために残しましょう。それ以外はWebPを使ってください。