PNG vs WebP vs AVIF：2026年における正しい画像フォーマットの選び方
サイトに画像をアップロードした瞬間、普遍的に正しい答えのない質問に直面します。どのフォーマットにすべきか？PNGはどこにでもあり、常に機能します。WebPはファイルサイズを三分の一削減します。AVIFはさらに深く圧縮しますが、エンコードが遅い。JPEG XLは地平線上に潜んでいます。その間も、意図ではなく習慣から選択したせいで、Lighthouseスコアが下がり続けています。
このガイドはノイズを切り抜けます。最後には、コンテンツの種類、オーディエンス、パフォーマンスの制約に基づいて、どのフォーマットを使うべきか、そしてなぜかを正確に把握できます。
フォーマットの概要
個々のトレードオフに深入りする前に、この記事で取り上げるフォーマットの並べて比較した参照表を示します。
ブラウザサポートの数値は2026年初頭のCan I Useデータに基づく概算です。
JPEG：普遍的な基準
JPEGは1990年代半ばからウェブ上の写真のデフォルトフォーマットでした。この長寿性はその強みであり、同時に限界でもあります。
JPEGが得意なこと
JPEGは離散コサイン変換（DCT）圧縮を使用して、人間の目が最も敏感でない視覚情報を破棄します。写真、グラデーション、レンダリングされた3Dシーンなどの連続トーン画像に対しては非常に効果的です。75〜85前後の品質設定では、JPEG画像はほとんどの視聴者には元の画像と見分けがつきません。
ブラウザサポートは実質100%です。地球上のすべてのメールクライアント、すべてのSNSプラットフォーム、すべてのデバイスがJPEGを問題なく読み取ります。
JPEGが不得意なこと
JPEGは透明（アルファ）チャンネルを保存できません。透明な背景が必要な画像——カラーカードに配置されたロゴ、背景不明の製品写真——はJPEGにできません。
JPEGはシャープなエッジとフラットなカラーブロックの処理も苦手です。コードのスクリーンショットやくっきりしたテキストのある図表を圧縮すると、すべてのエッジにブロック状のアーティファクトが見えます。コントラストの強い境界がある場合、JPEGは間違ったツールです。
JPEGではなくPNGで保存された写真では、サイズのペナルティは深刻です。写真のPNGファイルは、JPEG相当のファイルより日常的に5〜10倍大きく、視覚的な品質のメリットはゼロです。
PNG：必要なときのロスレス精度
PNG（Portable Network Graphics）はすべてのピクセルを保存したとおりに記録します。何も破棄されません。トレードオフはファイルサイズです。PNGはロスレス圧縮を使用するため、複雑な色の変化がある画像（写真）は大きいままです。
PNGが得意なこと
ピクセル完璧な忠実度が重要な場合、PNGが正しいフォーマットです：
- ロゴとブランドマーク — シャープなエッジ、フラットカラー、あらゆる背景に配置できる透明度
- スクリーンショット — UIエレメント、コードスニペット、テキストをどのズームレベルでもくっきりレンダリング
- 図表とイラスト — チャート、フローチャート、定義されたエッジを持つアイコンセット
- 再度編集される画像 — JPEGを保存するたびに再圧縮されて品質が低下する。PNGは損失なしに往復できる
PNGは完全なアルファ透明度もサポートしており、オン/オフのマスキングだけでなく、半透明のピクセルを持つことができます。これはドロップシャドウ、グロー、非矩形の形状のアンチエイリアスエッジに重要です。
PNGが不得意なこと
ウェブで提供しようとしている写真をPNGとして保存しないでください。フル解像度の一眼レフ写真は、品質85のJPEGなら3MBで、PNGなら25MBになる場合があります。その決定をユーザーも帯域幅の請求書も評価しません。写真コンテンツには、PNGはほぼ毎回間違ったフォーマットです。
WebP：実用的な万能選手
Googleは2010年にWebPを導入し、続く10年間をあらゆるブラウザに統合することに費やしました。2026年時点で、グローバルなブラウザサポートは約**97%**で、実用的にはほとんどのオーディエンスに対してフォールバックなしで使用できることを意味します。
圧縮の数値
同等のSSIM（構造的類似性指数）品質でWebPをJPEGと比較したGoogleの元の研究では、WebPはJPEGより25〜34%小さいことがわかりました。その後の独立した研究でも、このレンジが多様な画像ライブラリにわたって有効であることが確認されています。月に何千もの画像を配信するサイトでは、この削減は直接CDNコストの削減とページの読み込み速度向上に繋がります。
WebPはロッシーとロスレスの両モードをサポートしており、ほとんどの状況でJPEG（ロッシーモード）とPNG（ロスレスモード）の両方の真の代替品となります。重要なのは、両モードで完全なアルファ透明度もサポートしているという点で、これはJPEGにはまったくできないことです。
WebPを使う場面
- 幅広い互換性が優先される汎用ウェブ画像
- 製品写真、編集画像、ヒーロー画像のJPEG代替
- PNGよりも小さいフットプリントで透明度が必要なロゴやグラフィックのPNG代替
- 画像ライブラリ全体で機能する単一のフォーマット決定が欲しい状況
WebPに画像を圧縮したり、PNG、JPEG、WebP間で画像フォーマットを変換したりするには、何もインストールせずにブラウザで直接行えます。
WebPが低パフォーマンスになるエッジケース
WebPのロッシーモードは、攻撃的な圧縮設定でなめらかなグラデーションに微妙なバンディングを引き起こすことがあります。同等のファイルサイズのJPEGよりも多い場合があります。一部の写真コンテンツ、特に肌色や空のグラデーションでは、AVIFが同じファイルサイズでよりクリーンな結果を生み出します。
AVIF：最大圧縮、拡大するサポート
AVIF（AV1 Image File Format）は、Alliance for Open Mediaが開発したAV1ビデオコーデックから派生しています。圧縮効率において世代的な飛躍を表しています。
圧縮の数値
AVIFを同等の視覚品質のJPEGと比較した研究では、一貫して50%以上のファイルサイズ削減が示されています。200KBのJPEGは、通常の視聴距離では区別がつかない90〜100KBのAVIFとして再現できることが多いです。Netflixは、大量のサムネイルとプレビュー画像をエンコードしており、AVIFがJPEGと比較して画像帯域幅を50%削減するという結果を発表しています。
高容量の画像配信——ECサイトの製品カタログ、SNSプラットフォーム、画像の多いニュースサイト——では、これらの節約は些細ではありません。CDN支出とページ読み込み時間に意味のある影響を与えます。
HDRとワイドカラーガモットのサポート
AVIFはHDR（ハイダイナミックレンジ）カラーとDisplay P3などのワイドカラーガモットをネイティブにサポートしています。互換性のあるディスプレイでは、AVIF画像はSDRフォーマットよりも明るいハイライトと深いシャドウを表示できます。フォトグラフィーのショーケース、デザインポートフォリオ、プレミアムディスプレイでの画像忠実度が重要なサイトでは、これは重要な差別化要因です。
エンコード速度の問題
AVIFの弱点はエンコード時間です。JPEGやWebPと比較して、AVIFのエンコードは大幅に遅く——同等の品質設定では5〜10倍遅いことが多い。何千もの画像を処理するビルドパイプラインでは、これは積み重なります。ほとんどのチームは、オンデマンドではなく、ビルド時または1回限りのバッチジョブとしてAVIFをエンコードすることでこれを緩和しています。
デコード速度（ブラウザが画像をレンダリングするときに行うこと）は速く、最新のハードウェアではユーザー側の懸念事項ではありません。
2026年のブラウザサポート
2026年初頭時点で、AVIFのブラウザサポートは約**93%**で、完全なカバレッジのためにはWebPまたはJPEGフォールバックを提供すべきです。標準的なパターン：
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="説明" />
</picture>このプログレッシブエンハンスメントアプローチにより、AVIF対応ブラウザは最小のファイルを取得し、WebP対応ブラウザは堅実な中間点を取得し、その他すべてはJPEGにフォールバックします。
JPEG XL：注目すべきだが、まだ準備不足
JPEG XL（.jxl）はこのリストの中で技術的に最も有能なフォーマットです。圧縮においてAVIFと同等またはそれ以上であり、品質を損なわずに既存のJPEGファイルをロスレスで再エンコードでき（アーカイブに特別に有用）、HDR、ワイドカラーガモット、アニメーションを処理します。JPEGコミッティーはそれをJPEGエコシステム全体の長期的な代替品として設計しました。
問題はブラウザのサポートです。2026年初頭時点で、JPEG XLはほとんどのブラウザで実験的なフラグの後ろに留まっており、Safari（2022年にサポートを追加）以外でデフォルトで有効になっているところはありません。Chromiumは2022年に実験的サポートを削除しましたが、Chromiumのイシュートラッカーでは議論が続いています。
私たちの推奨： 今日のウェブ配信にJPEG XLを使用しないでください。注目しておいてください。写真のアーカイブパイプラインを構築しているか、Appleエコシステムのアプリで作業している場合は、注目に値します。本番のウェブ作業には、AVIF + WebPフォールバックが今の適切な組み合わせです。
決定ツリー
これを使って素早くフォーマット決定を行いましょう。
透明度が必要ですか？
はい — 主要フォーマットとしてWebP（ロスレスモード）を使用してください。PNGより小さいファイルで透明度を提供します。ピクセル完璧なロスレス忠実度が必要な場合（印刷用に再利用されるロゴ、ソースアセット）はPNGを使用してください。JPEGは選択肢ではありません。
いいえ — 以下に続きます。
写真ですかグラフィックですか？
写真（連続トーン、複雑なカラー）：
- 可能な限り幅広いブラウザサポートが必要な場合：JPEG
- ほぼ普遍的なサポートで意味のある小さいファイルが必要な場合：WebP（ロッシーモード）
- 大規模に帯域幅を最適化しフォールバックを提供できる場合：WebPフォールバック付きAVIF
グラフィック（ロゴ、図表、スクリーンショット、テキスト）：
- ファイルサイズとツール互換性のどちらが重要かに応じてWebP（ロスレスモード）またはPNGを使用
- シャープなエッジやフラットカラーエリアのあるグラフィックにはJPEGを使用しない
大規模に配信していますか？
サイトが1日に数千件以上の画像リクエストを配信する場合、JPEGとAVIFの圧縮差は実際のコストで重要になります。AVIF + WebP + JPEGフォールバックを含む<picture>要素を実装してください。エンジニアリングコストは低く、インフラの節約は時間とともに積み重なります。
クイックリファレンスサマリー
フォーマット間の変換方法
ほとんどの画像エディタは、ここで取り上げる4つのフォーマットすべてをエクスポートします。ファイルのバッチをプログラムで変換する必要があるウェブ開発者には：
ImageMagick（コマンドライン）：
# JPEGをWebPに変換
magick input.jpg -quality 82 output.webp
# JPEGをAVIFに変換
magick input.jpg -quality 60 output.avif
# PNGをWebPロスレスに変換
magick input.png -define webp:lossless=true output.webpSquoosh（ブラウザベース）： GoogleのSquooshアプリでは、品質スライダーとライブのファイルサイズプレビューでフォーマットを並べて比較できます。バッチ変換に入る前に圧縮設定を視覚的に調整するのに便利です。
FileCrank： 何もインストールせずに、画像フォーマットの変換をブラウザで直接行えます。単発の変換や、ローカルツールのないマシンで作業しているときに便利です。
バルク処理とサイズ削減のためには、画像圧縮ツールがフォーマット変換と品質最適化を1ステップで処理します。
フォーマット選択と圧縮の関係
正しいフォーマットを選ぶのは、半分しか達成できていません。異なる品質設定の2つのWebPファイルは、ほとんど視覚的な差がないのに3倍のファイルサイズ差になることがあります。品質対サイズのキャリブレーションをより深く掘り下げたい場合、品質を損なわずに画像を圧縮する方法に関する記事では、品質設定、プログレッシブローディング、SSIMやDSSIMなどの知覚品質指標の実用的なメカニズムを扱っています。
ロッシー圧縮とロスレス圧縮がこれほど異なる結果を生み出す理由と、それぞれのアプローチが適切な場面についての基礎的な説明については、ロッシーvsロスレスファイル変換の解説をご覧ください。
まとめ
フォーマットの決定は3つの質問に帰着します。透明度が必要か？写真かグラフィックか？最大圧縮を最適化しているか？
2026年のほとんどの現代ウェブプロジェクトにとって、実用的な答えは：
- WebP をデフォルトフォーマットとして — 透明度を処理し、ロッシーとロスレスの両モードで機能し、ほぼ普遍的なブラウザサポートを持ち、JPEGより25〜34%小さい
- AVIF を帯域幅の節約が最も重要なところで — 残りの7%のブラウザのためにWebPまたはJPEGの
<picture>フォールバックと共に - PNG はロスレス精度またはツール互換性が特に必要な場合のみ
- JPEG を最後の手段のフォールバックとして、またメールには依然として正しい選択
習慣ではなく、コンテンツの種類と配信コンテキストに基づいて選択してください。同じ画像の200KB AVIFと600KB PNGの違いは、訪問者には見えませんが、ページ読み込み時間とインフラコストには非常に明白に見えます。
実践に移す準備はできていますか？画像をWebPまたはAVIFに変換するか、既存の画像を圧縮して、現在のフォーマット選択からどれだけのサイズを取り戻せるか確認してください。