WebP vs PNG：どちらの画像フォーマットを使うべき？

ウェブサイトを作っている。またはプロジェクト用の画像を準備している。WebPはPNGより優れていると聞いたことがあるはず。でも、いつもそうなのか？PNGの方が良い場面はないのか？

どちらのフォーマットも透過をサポートしている。どちらもくっきりした画像を作れる。でも圧縮の仕方が違う。そしてその違いが、使い分けの全てを決める。

ここでは、毎回正しいフォーマットを選べるようにわかりやすく解説する。

WebPとPNGでファイルサイズはどう違う？

ここがWebPの強みだ。同じ画像でも、WebPファイルはかなり小さくなる。

画像の種類	PNGサイズ	WebP（非可逆 85%）	WebP（可逆）	削減率
透過付き商品写真	1.5 MB	180 KB	1.1 MB	27-88%
ロゴ	80 KB	22 KB	55 KB	31-73%
スクリーンショット	400 KB	120 KB	280 KB	30-70%
アイコンスプライトシート	200 KB	55 KB	140 KB	30-73%
インフォグラフィック	900 KB	250 KB	630 KB	30-72%

可逆WebP（ピクセル完全一致、画質劣化なし）でもPNGより25-30%小さい。そして非可逆WebPの品質85%なら、70-88%小さくなるのにほぼ同じ見た目だ。

20枚の画像があるウェブサイトの場合、PNGからWebPに切り替えると合計画像サイズが8 MBから2 MBに減る可能性がある。これは大きな速度向上だ。

WebPはPNGと同じように透過をサポートしている？

はい。WebPはPNGと同じくらい上手に透過を扱える。完全なアルファチャンネル。部分的な透過。なめらかなアンチエイリアスの縁。全て問題なく動く。

違いは、各フォーマットがどれだけ効率的に透過データを保存するかだ。PNGは全てのピクセルをそのまま保持する。WebPは透過レイヤーをカラーデータと一緒に圧縮する。見た目は同じだが、ファイルサイズはずっと小さい。

一つだけ注意点がある。非可逆WebPは低品質設定で、透明な縁の周りにとても微細なアーティファクトが出ることがある。80%以上なら見えない。心配なら可逆WebPを使おう。それでもPNGより小さい。

どちらのフォーマットのブラウザ対応が良い？

PNGはどこでも動く。全てのブラウザ、全てのメールクライアント、全てのアプリ、全てのデバイス。1996年から存在している。対応は完全だ。

WebPは全てのモダンブラウザで動く。Chrome、Firefox、Safari、Edge、Operaが全て対応している。これはウェブユーザーの97%以上をカバーしている。Safariが最後の大物で、2020年にWebP対応を追加した。

唯一のギャップはとても古いブラウザだ。Internet ExplorerはWebPに対応していない。2020年以前のブラウザも同様だ。これらに対応する必要があるなら、HTMLの<picture>要素を使ってモダンブラウザにはWebPを、フォールバックとしてPNGを配信できる。

2026年のほとんどのプロジェクトでは、WebP対応は問題にならない。でもメールマガジン用の画像を作るなら、PNGの方が安全だ。多くのメールクライアントはWebPを表示しない。戻す必要がある場合は、いつでもWebPをPNGに変換できる。

PNGの方が良い場面はいつ？

PNGは、ファイルサイズよりも他の強みが重要な特定の場面で勝つ。

メール。 ほとんどのメールクライアントはPNGを完璧に処理する。メールでのWebP対応はまだ不安定だ。画像をメールに入れるなら、PNGを使おう。

ファビコン。 一部のブラウザはまだPNGのファビコンを期待している。標準のfavicon.icoやAppleタッチアイコンはPNGにすべきだ。

編集用のソースファイル。 Photoshop、GIMP、Figmaで後から画像を編集するなら、ソースはPNGで保存しよう。デザインツールでのWebP編集対応は改善されたが、PNGの方が確実だ。

最高画質のアーカイブ。 PNGは定義上、可逆圧縮だ。全てのピクセルが正確に保存される。大事な画像をアーカイブして画質の心配をしたくないなら、PNGが最も安全な選択だ。

WebPを受け付けないプラットフォーム。 古いCMSシステム、印刷サービス、ドキュメントテンプレートの中にはPNGしか受け付けないものがある。プラットフォームの要件を確認しよう。

SNSのプレビュー画像。 FacebookやTwitterのシェアカード用のOpen Graph画像は、PNGの方がうまく表示されることがある。全てのソーシャルクローラーがWebPを適切に処理するわけではない。

PNGよりWebPを選ぶべき場面はいつ？

ほとんどのウェブシナリオでは、WebPの方が良い選択だ。

ウェブサイトの画像。 ウェブページに表示する画像は全てWebP（またはAVIF）にすべきだ。ファイルサイズの削減は、読み込み時間、Core Web Vitalsスコア、ユーザー体験を直接改善する。WebPは写真圧縮でJPGとの比較でも優れている。

アプリのアセット。 モバイルアプリやウェブアプリは小さい画像から恩恵を受ける。帯域幅が少なくて済む。描画が速い。遅い接続でもパフォーマンスが良い。

ウェブ用の透過グラフィック。 ロゴ、アイコン、透過付きのUI要素はWebPに最適だ。PNGと同じ見た目で、ファイルは30-70%小さい。

CSSの背景画像。 大きな装飾画像はWebPでうまく圧縮できる。2 MBのPNG背景が400 KBのWebPになる。

ECサイトの商品写真。 背景を切り抜いた（透過の）商品画像は、ページ上で最も重い画像であることが多い。WebPはそれを適切なサイズに縮小する。アップロード前にCompressIMGで画像を圧縮することもできる。

代替としてAVIFはどう？

AVIFはWebPよりもさらに高い圧縮率を実現する。同じ画質でWebPより20-30%小さいファイルを生成する。透過をサポートしている。そしてブラウザ対応は現在約93%だ。

トレードオフとして、AVIFはエンコードが遅い。画像のバッチをAVIFに変換するのはWebPへの変換より時間がかかる。そして93%のブラウザ対応は、フォールバックなしでは7%のユーザーがAVIF画像を見られない可能性があることを意味する。

ウェブ配信の理想的なアプローチは、AVIFを第一候補、WebPをフォールバック、PNGを最終手段として配信すること。HTMLの<picture>要素でこれが簡単にできる。

一つのフォーマットだけ選ぶなら、最も安全な賭けはWebPだ。AVIFより広い対応があり、PNGよりはるかに良い圧縮率がある。ほぼ全てに対応できる中間点だ。もっと知りたい？AVIF vs WebPの比較記事で次世代フォーマットの詳細を確認できる。

すべての画像フォーマットの詳しい比較については、画像フォーマット完全ガイドをご覧ください。

WebPとPNGの間でどう変換する？

ConvertIMGは両方向に対応している。ウェブ配信用にPNGをWebPに変換。より広い互換性が必要な時はWebPをPNGに変換。全てブラウザ内で処理される。ファイルがデバイスの外に出ることはない。

画質レベルを選んで、ファイルをドロップして、ダウンロード。大きなプロジェクト向けにバッチ変換にも対応している。切り替える準備はできた？PNGをWebPに変換のステップバイステップガイドを確認しよう。