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

フォーマットを間違えると、ファイルが必要の3〜5倍に膨らむことがあります。本ガイドは実際のベンチマークデータでPNG・JPG・WebPを比較し、毎回正しく選べるよう手助けします。

結論を先に

フォーマット概要

ベンチマーク：ファイルサイズ比較

同等の品質設定で、50枚の画像（写真25枚＋図形25枚）を3フォーマットそれぞれで圧縮しました：

写真（25枚、平均3000×2000px）

図形とスクリーンショット（25枚）

詳しく：JPG（JPEG）

仕組み：JPGは画像を8×8ピクセルのブロックに分け、各ブロックに離散コサイン変換（DCT）を適用します。高周波の細部（微妙な質感）が最初に捨てられ、全体の見た目は保たれます。

強み：

• 汎用対応 — あらゆるブラウザ・アプリ・端末
• 複雑な色のグラデーションを含む写真に最適
• 数十年の最適化を経た成熟したエコシステム

弱み：

• 透過に非対応
• 保存のたびに画質が低下（世代劣化）
• 低品質では「ブロック」ノイズが目立つ、特に鋭いエッジや文字の周辺

詳しく：PNG

仕組み：PNGはピクセルデータにDEFLATE圧縮（ZIPに類似）と予測フィルタを適用します。すべてのピクセルが正確に保たれ — 画質劣化はゼロです。

強み：

• ピクセル単位で完璧 — スクリーンショット、図解、文字の重ねに理想的
• 完全なアルファ透過に対応
• 再保存で画質が落ちない

弱み：

• 写真ではファイルが大きい（JPGの3〜5倍）
• さらに小さくするネイティブの非可逆モードがない

詳しく：WebP

仕組み：Googleが開発したWebPは、非可逆圧縮にVP8動画コーデック技術を、可逆圧縮には独自の方式を使います。固定の8×8ではなく最大16×16のブロック全体を分析し、より良い予測を行います。

強み：

• 同等の見た目の品質でJPGより25〜35%小さい
• 可逆・非可逆の両圧縮に対応
• 透過に対応（JPGと違い）
• アニメーション対応（GIFを置き換え）
• 2026年時点でブラウザ対応97%以上

弱み：

• 一部の古いメールクライアントやツールが非対応
• 一部のSNSはWebPをJPGに再圧縮する

判断フローチャート

1. その画像は写真または写実的な画像ですか？
   • はい → WebPを使う（またはJPGをフォールバック）
   • いいえ → 次へ
2. 透過は必要ですか？
   • はい → WebPを使う（またはPNGをフォールバック）
   • いいえ → 次へ
3. 文字・コード・鋭いエッジを含みますか？
   • はい → ピクセル単位ならPNG、またはWebP可逆
   • いいえ → WebP非可逆

AVIFはどう？

AVIFは最新の対抗馬で、WebPよりさらに20%高い圧縮率を誇ります。ただしブラウザ対応はまだ約92%、エンコードは大幅に遅く、ツールも未成熟です。2026年のほとんどの用途では、WebPが実用的な選択肢のままです。AVIFは今後の記事で詳しく取り上げます。

まとめ

2026年のWeb用途ではWebPが明確な勝者で、ファイルサイズでJPGとPNGを上回り、品質も同等以上です。写真の汎用フォールバックにはJPGを、透過付きでピクセル単位の図形が必要ならPNGを使いましょう。どのフォーマットでも、公開前に必ず圧縮を。