ウェブに最適な画像フォーマット：PNG vs JPG vs WebP vs AVIF（2026年）

2026年3月28日公開 • 12分で読めます

1. 画像フォーマット選択が重要な理由

画像は平均的なウェブページの総重量の約50%を占めています。HTTP Archiveの2026年初頭のデータによると、ページの中央値は画像だけで1.8MBを読み込みます。この数値は、画像を多用するEコマースサイトやポートフォリオサイトでは4MBを超えます。間違ったフォーマットを選択すると、目に見える品質の向上なしにページの重量が2倍または3倍になる可能性があります。

ページ速度は収益に直接影響します。Googleは、読み込み時間が100ms増加すると、Amazonの売上が1%減少すると記録しています。Walmartは、ページ読み込みが1秒改善されるごとにコンバージョンが2%増加することを発見しました。4G接続のモバイルユーザーにとって、180KBのWebPと680KBのJPEGの違いは、画像1枚あたり約1.5秒の追加読み込み時間です。

パフォーマンスを超えて、フォーマットの選択は透明性、アニメーション、またはプログレッシブ読み込みを使用できるかどうかを決定します。アルファ透明度を持つPNGロゴは、透明な背景を失うことなくJPEGに置き換えることはできません。アニメーション製品デモには、静的フォーマットではなく、GIFまたはWebPが必要です。各フォーマットが得意とすること、そして不足している点を理解することで、サイト上のすべての画像に対して適切なトレードオフを行うことができます。

検索エンジンはページ速度をランキングに考慮します。GoogleのCore Web Vitals、特にLargest Contentful Paint（LCP）は、最大の画像がどれだけ速く読み込まれるかを直接測定します。最適化されたフォーマットを提供することは、LCPを改善し、まだ最適化されていないJPEGを配信している競合他社よりもランキングで優位に立つための最も簡単な方法の1つです。

2. JPEG：ユニバーサルスタンダード

JPEG（Joint Photographic Experts Group）は、1992年にフォーマットが標準化されて以来、ウェブ画像の基盤となってきました。30年以上経った今でも、W3Techsのデータによると、ウェブ上で提供されるすべての画像の約72%を占め、インターネット上で最も広く使用されている画像フォーマットです。

JPEG圧縮の仕組み

JPEGは離散コサイン変換（DCT）に基づく非可逆圧縮アルゴリズムを使用します。プロセスは3つの段階で機能します。まず、画像はRGBからYCbCr色空間に変換され、輝度（明るさ）と色度（色）が分離されます。人間の目は色の変化よりも明るさの変化に敏感であるため、JPEGはこれを利用して色度チャネルをダウンサンプリングします。通常、両方の次元で色解像度を半分に減らします（4:2:0サブサンプリング）。

次に、画像は8x8ピクセルのブロックに分割され、各ブロックはDCTを受けます。これにより、空間ピクセルデータが周波数係数に変換されます。高周波の詳細（鋭いエッジ、細かいテクスチャ）は、より高い係数で表されます。次に、量子化ステップでこれらの係数を品質依存の行列で除算し、結果を丸めます。これがデータが実際に失われる場所です。圧縮が高いほど、より積極的な丸めが行われ、より多くの高周波詳細が破棄されます。

最後に、量子化された係数はハフマン符号化（または新しい実装では算術符号化）を使用してエンコードされ、圧縮されたビットストリームが生成されます。

品質設定：スイートスポットを見つける

JPEGの品質は0〜100のスケールで指定されますが、品質番号とファイルサイズの関係は線形ではありません。ウェブ使用の実用的な範囲は60〜95です：

長所と短所

3. PNG：透明性と精度

PNG（Portable Network Graphics）は、UnisysがLZW特許の執行を開始した後、GIFの特許フリーの代替として1996年に作成されました。透明性またはピクセルパーフェクトな再現を必要とする画像、つまりロゴ、アイコン、スクリーンショット、UI要素、テキスト付きグラフィックスの標準としてすぐに定着しました。

PNG-8 vs PNG-24

PNGには2つの主要なバリアントがあります。PNG-8は、GIFと同様に、最大256色のインデックス付きカラーパレットを使用します。各ピクセルは完全な色データを保存するのではなく、パレットエントリを参照するため、シンプルなグラフィックスでは非常に小さなファイルになります。単色のアイコンはPNG-8としてわずか2〜5KBになる可能性があります。PNG-8はバイナリ透明性（完全に透明または完全に不透明）をサポートし、一部の実装ではパレットベースのアルファ透明性をサポートします。

PNG-24は、完全な24ビットRGBカラー（1670万色）と、滑らかな透明グラデーション用のオプションの8ビットアルファチャネルを保存します。これにより、任意の背景色に配置する必要があるロゴ、UIモックアップ、部分的な透明性（ドロップシャドウ、ガラス効果、アンチエイリアスエッジ）が必要な画像に最適なフォーマットになります。トレードオフはファイルサイズです。アルファ付きのPNG-24は、通常、同等のJPEGの5〜10倍の大きさです。

PNG圧縮の仕組み

PNGはDEFLATE圧縮を使用します。これはgzipとzlibの背後にある同じアルゴリズムです。圧縮前に、PNGは各ピクセル行に予測フィルターを適用します。フィルターは、隣接するピクセル（左、上、左上）に基づいて各ピクセル値を予測し、差分のみを保存します。類似した色の大きな領域を持つ画像（フラットUIデザイン、チャート、スクリーンショット）の場合、この予測ステップは非常に効果的で、DEFLATEが実行される前にデータをほぼゼロに削減することがよくあります。

PNGはまた、Adam7アルゴリズムによるインターレースをサポートしており、解像度が増加する7つのパスで画像を保存します。これにより、ブラウザはほぼ即座に低解像度のプレビューを表示し、その後徐々に洗練させることができます。欠点は、インターレースされたPNGは通常、非インターレースバージョンよりも5〜10%大きいことです。

長所と短所

4. GIF：アニメーションとシンプルさ

GIF（Graphics Interchange Format）は1987年にさかのぼり、ウェブアニメーションで最初に広くサポートされたフォーマットでした。深刻な技術的制限にもかかわらず、GIFは2026年でも1つの理由で遍在しています：普遍的で摩擦のないアニメーションサポート。すべてのブラウザ、メールクライアント、メッセージングアプリ、ソーシャルプラットフォームは、プラグインや特別な処理なしでアニメーションGIFをレンダリングします。

GIFはフレームあたり256色に制限され、LZWロスレス圧縮を使用し、フレームごとのタイミングで完全または部分的なフレームのシーケンスとしてアニメーションを保存します。これにより、写真コンテンツには驚くほど非効率的です。480pの3秒のGIFクリップは簡単に5〜10MBに達する可能性がありますが、WebPアニメーションとしての同じクリップは500KB〜1MBになります。

静止画像の場合、GIFはPNG（より良く圧縮され、より多くの色をサポート）とWebPに完全に取って代わられました。GIFの唯一の残りの使用例は、WebPまたはビデオがサポートされていないコンテキストでのアニメーションです。主にメールキャンペーンとレガシーメッセージングプラットフォームです。ウェブ使用の場合、アニメーションWebPまたは短いMP4/WebMビデオは、測定可能なすべての方法でより良い選択です：より小さなファイル、より多くの色、よりスムーズな再生。

長所と短所

5. WebP：モダンスタンダード

Googleによって開発され、2010年にリリースされたWebPは、2026年にウェブ画像配信の事実上の標準となっています。非可逆および可逆圧縮、アルファ透明性、アニメーションの両方をサポートしており、事実上JPEG、PNG、GIFを単一のフォーマットで置き換えます。ブラウザサポートは現在、Chrome、Firefox、Safari（バージョン14以降）、Edge、Operaをカバーし、世界中で97%を超えています。

WebPがより小さなファイルを実現する方法

非可逆WebPは、VP8ビデオコーデックから派生した予測符号化を使用します。JPEGの固定8x8 DCTブロックの代わりに、WebPは最大64x64ピクセルの可変ブロックサイズを使用し、フレーム内予測を適用します。各ブロックは隣接するブロックから予測され、予測誤差のみがエンコードされます。この適応的なアプローチは、JPEGの万能ブロックよりも滑らかなグラデーションと鋭いエッジの両方をより効率的に処理します。

実際には、非可逆WebPは同等の視覚品質でJPEGよりも25〜35%小さいファイルを生成します。Googleの100万のランダムに選択されたウェブ画像にわたる独自の研究では、平均30%の削減が見られました。ロスレス圧縮の場合、WebPは空間予測、カラーキャッシュ、後方参照、ハフマン符号化などの技術を使用して、平均でPNGよりも26%小さくなります。

アニメーション用のWebP

アニメーションWebPは、フレームごとに適用される非可逆WebPと同じ圧縮を使用し、フレーム間の差分のみをエンコードするフレーム間予測を使用します。結果は、Googleのベンチマークによると、同等のGIFよりも64%小さいアニメーション画像です。2MBのアニメーションGIFは通常、より良い色深度（8ビットに対して24ビット）とオプションのアルファ透明性を持つ400〜700KBのアニメーションWebPに変換されます。

実用的な考慮事項

WebPエンコーディングはJPEGよりもわずかに遅く（約2〜5倍）、リアルタイム変換には重要ですが、事前処理されたアセットには無関係です。デコード速度はJPEGに匹敵します。最大画像寸法は16383x16383ピクセルで、事実上すべてのウェブ使用例をカバーしますが、超高解像度印刷またはパノラマ画像には制限がある可能性があります。

長所と短所

6. AVIF：次世代圧縮

AVIF（AV1 Image File Format）は、ウェブ画像フォーマット空間で最も新しい競合者です。Alliance for Open Media（Google、Apple、Mozilla、Microsoft、Netflix、Amazonを含む）によって開発されたAV1ビデオコーデックに基づいて、AVIFは今日利用可能な最も積極的な圧縮を提供します。同等の視覚品質でJPEGよりも約50%小さく、WebPよりも20%小さくなります。

AVIFの仕組み

AVIFはAV1の高度なコーディングツールを活用します：4x4から最大128x128のブロックサイズ、56の方向モードを持つイントラ予測（WebPの10と比較）、クロマ・フロム・ルマ予測、および出力に到達する前にアーティファクトを削減する洗練されたインループフィルタリングパイプライン。このフォーマットは10ビットおよび12ビットの色深度、HDR（PQおよびHLG転送関数）、および広色域（BT.2020）をサポートしており、スマートフォンやモニターで標準になりつつあるHDRディスプレイに対応しています。

AVIFはまた、非可逆および可逆圧縮、アルファ透明性、アニメーションの両方をサポートします（ただし、アニメーションAVIFのサポートはブラウザ間でまだ一貫していません）。AppleのHEIC写真で使用されているのと同じコンテナであるHEIFコンテナフォーマットを使用します。

エンコード速度のトレードオフ

AVIFの主な欠点はエンコード速度です。デフォルト設定では、AVIFエンコーディングはJPEGの10〜100倍遅く、WebPの5〜20倍遅くなります。単一の1920x1080画像のエンコードには、品質設定とCPUに応じて5〜30秒かかる場合があります。これにより、ほとんどの使用例でリアルタイム変換は実用的ではありません。ただし、事前処理されたアセット（ビルド時変換、CDNパイプライン）の場合、エンコード速度は永続的に小さなファイルで報われる1回限りのコストです。

ブラウザサポートは2026年初頭までに世界中で93%に達し、Chrome、Firefox、Opera、Samsung Internetが完全なサポートを提供しています。Safariはバージョン16.4（2023年）でAVIFサポートを追加しました。残りのギャップは主に古いSafariバージョンとニッチなブラウザです。

長所と短所