JPG・PNG・WebP・AVIFの比較：どれを何时使うべきか

4つのフォーマット、4つの個性。JPGは写真の定番、PNGは グラフィックの鉄板、WebPは現代の万能選手、AVIFは最もファイルが 小さい新世代。間違った組み合わせは、ファイル肥大化、目に見えるノイズ、互換性問題のどれかを 連れてきます。

この記事ではそれぞれのフォーマットを1分で説明し、ブラウザでの対応状況まで整理します。 圧縮の仕組みをもっと深く知りたい方は画質を落とさずに圧縮する方法の記事もご参照ください。

JPG — 写真の定番

JPG（正式にはJPEG）は1992年に標準化されて以来、Web画像の3分の1を動かし続けて きました。仕組みはシンプル：画像を8×8ブロックに分け、各ブロックに離散コサイン変換を掛けて、 結果を粗く量子化します。高周波（細部）は強く丸め、低周波（形）は丸めない——人間の視覚は後者 に敏感なので、写真では自然に小さくできるわけです。

欠点は2つ。透明度をサポートしないこと、そして非可逆であることです。何度も 保存し直すと少しずつ劣化します。逆に強みは、ほぼすべてのブラウザ・カメラ・CMSで開けること。 mozjpegのような最新エンコーダは、視覚的な見た目を保ったまま旧来より10〜20%小さくできます。

向く用途：写真、ヒーロー画像、色グラデーションのある大きなWeb画像。

苦手な用途：ロゴ、スクリーンショット、アイコンなど、エッジや文字を含む画像。

PNG — 可逆で透過対応

PNGは可逆圧縮の代名詞として、JPGの代わりに生まれました。やり方は 「情報を捨てる」のではなく「冗長性を省く」。行ごとに、隣接ピクセルから現在のピクセルを 予測し（Sub／Up／Average／Paeth）、差分だけを保存。それを最後にZIPと同じdeflateで圧縮します。

フラットな配色 UI のスクショは元の数%のサイズになり、透明度を含むロゴもエッジが鋭く保てます。 ただし写真のように冗長性が低い素材では、JPGの5〜10倍に膨れるのが普通です。

向く用途：ロゴ、UIスクショ、アイコン、透過背景の画像。

苦手な用途：写真、透過を必要としない大きなバナー画像。

WebP — 現代の万能選手

WebPは2010年にGoogleが公開し、非可逆と可逆の両方モードを持ちます。 非可逆モードではVP8のイントラ予測を使い、ブロックを近傍から推測し差分だけを符号化します。 同じ視覚品質でJPGより25〜35%小さく、PNGより20〜30%小さいのが可逆モードです。

ブラウザ対応はもう十分に行き渡っています。Chrome、Firefox、Safari、Edge どれも問題なく開けます。 古いクライアント（一部のメーラなど）を狙う場合は、JPG/PNG のフォールバックを用意します。 透過、アニメーション、アルファチャンネルも対応——事実上のJPG/PNG後継フォーマットです。

AVIF — 一番小さい新世代

AVIFはストリーミングの4K動画で使われている AV1 動画コーデックを静止画に 流用したものです。同じ視覚品質でJPGより40〜50%小さく、可逆モードでは可逆WebPをも上回ります。

裏返しに、エンコード時間は長く、古いツール（一部CMSや画像編集ソフト）はまだ安定して 対応していません。Safariは16以降で対応したばかりなので、わずかながら訪問者の一部は JPGへのフォールバックが必要です。それでもCore Web Vitalsへの寄与は明確で、 メインのWeb配信では魅力的な選択肢です。

結局どれを使えばいい？

経験則としては：写真？非可逆。今はWebPかAVIFが標準で、JPGは古いクライアント 用のフォールバック。エッジや透過のある画像？可逆。PNGか可逆WebP。アニメーション？短いループならWebP、数秒以上ならMP4動画。 迷ったら試してみるのが正解です。ImagEliteの変換ツールなら、ファイルサイズとプレビューを並べて見られるので、あなたの素材に一番合うフォーマットを 視覚的に選べます。すべてブラウザ内で完結するので、画像が端末の外に出ることはありません。