JPG vs PNG vs WebP vs AVIF: 2026年に正しい画像フォーマットを選ぶ

Webで画像を配信するなら、選ぶフォーマットほどページ重量に影響を与える要素は他にあまりありません。4 MBのヒーロー画像と180 KBのヒーロー画像の差は、不安定な4G回線で中位スペックのAndroid端末から見たときに、瞬時に感じるサイトと這うようなサイトの違いを生みます。2026年にはケアすべき主要選手が4つあります: 老舗のJPG、可逆のPNG、今や普遍的なWebP、そして成熟が進むAVIFです。

本ガイドでは、各フォーマットが裏でどう動くか、バイト節約はどこから来るのか、何を引き換えに受け入れるのか、そしていつどれを使うべきかの明確な推奨をたどります。読み終える頃には、「2026年のWebに最適な画像フォーマットは?」という問いに手を振らずに答えられるようになり、金曜午後5時にデザイナーから28 MBのPNGスクリーンショットを渡されても何をすべきか正確に分かるはずです。

登場人物

JPG(時にJPEGとも綴られる)は1992年に標準化され、いまだに多くのカメラが撮影に使うフォーマットです。8x8ブロックに対して離散コサイン変換(DCT)を行い、周波数係数を量子化し、ハフマン符号化します。設計上不可逆で、アルファチャンネルを持ちませんが、高速で、デコードが軽く、過去30年に作られた事実上すべてのデバイスでサポートされています。

PNGは1996年にGIFの特許不要な代替として登場しました。オプションの行フィルターの上にDEFLATE(zipやgzipと同じアルゴリズム)を使うため、完全に可逆です。本物の8ビットアルファチャンネル、インデックスパレット、さらにはチャンネルあたり16ビットのカラーまでサポートします。代償はファイルサイズで、写真的なコンテンツはDEFLATEでは縮みにくいです。

WebPは2010年にGoogleが公開し、2020年頃に主要ブラウザで完全サポートされました。WebPの不可逆モードは、純粋なDCTではなくVP8のイントラフレーム符号化(VP8動画コーデックと同じ予測モード)を使います。可逆WebPは、カラーキャッシュと予測変換のトリックを持つ独自フォーマットVP8Lを使います。WebPは両モードでアルファとアニメーションをサポートします。

AVIFは、2018年に確定し2024年までに事実上どこでも採用された動画コーデックAV1の静止画プロファイルです。VP8よりはるかに大きく賢い予測ブロック、より多くの変換オプション、そしてはるかに優れたエントロピー符号化器を使います。AVIFは最大12ビットカラー、アルファ、HDR、アニメーションをサポートします。

実際の圧縮の仕組み

JPGは画像を8x8ブロックに分割し、各ブロックにDCTを適用し、結果の係数を量子化マトリックスで割ります。人間の目は細部に対する感度が低いため、高周波は低周波よりも強く潰されます。低品質設定は単にこの量子化マトリックスを大きなスカラー倍するだけです。これがJPGのアーティファクトが硬いエッジ周りでブロック状のリンギングに見える理由です。エンコーダはエッジを記述する高周波係数を保持できないのです。

PNGは知覚的圧縮を一切行いません。ピクセル各行に1バイトのフィルタプレフィックス(None, Sub, Up, Average, Paeth)を付けて隣接ピクセルから予測し、DEFLATEで残差を圧縮します。写真ならば残差は依然として高エントロピーのノイズで、ほとんど節約できません。繰り返しの単色とくっきりしたエッジでいっぱいのスクリーンショットなら、節約は莫大です。

WebP不可逆はVP8の空間イントラ予測を借ります。各4x4または16x16ブロックを、すでにデコードされた隣接ピクセルから10種の予測モードのいずれかで予測し、残差だけを変換・量子化します。予測が良いほど残差が小さくなり、ビット数も少なくなります。WebP可逆(VP8L)はさらに、独自カラーキャッシュ、パレット変換、コンテキスト適応型エントロピー符号化器で進化しています。

AVIFは本質的に最新の動画キーフレームエンコーダ全体を使います。ブロックサイズは4x4から128x128まで、変換にはDCT、ADST、恒等を複数サイズで含み、56以上のイントラ予測モード(細かい角度粒度の方向性予測子を含む)があります。CABAC型の算術符号化器はJPGのハフマン表よりビットあたりかなり多くの情報を詰め込みます。結果として同じ視覚品質でJPGより約50%小さいファイルになりますが、エンコードはずっと重いです。

ファイルサイズ一覧

同じ4000x3000の写真 (日中の風景、透過なし):
JPG  (q=85)   ->  1,180 KB
JPG  (q=92)   ->  1,940 KB
PNG  (24-bit) -> 12,420 KB
WebP (q=85)   ->    810 KB
WebP (lossless) -> 9,860 KB
AVIF (q=60)   ->    495 KB
AVIF (q=80)   ->    760 KB

同じ1920x1080のUIスクリーンショット (フラットな色、シャープな文字):
JPG  (q=92)   ->    410 KB  (文字の縁が目に見えて滲む)
PNG  (8-bit indexed) ->  92 KB
PNG  (24-bit) ->    280 KB
WebP (lossless) ->  74 KB
AVIF (lossless) ->  88 KB

この数値からの2つの示唆。第一に、自然写真ではAVIFは同等知覚品質でJPGより約40~60%、WebPより30~40%小さいです。第二に、スクリーンショットやUIエクスポートのような合成コンテンツでは、可逆WebPがほぼ完勝し、パレットが収まればPNG-8が僅差で続きます。

2026年のブラウザサポート

JPGとPNG: 100%。議論の余地はありません。10年前のAndroidタブレットや忘れていた組み込みWebViewを含め、ブラウザがあるところならどこでも動きます。

WebP: 事実上ブラウザトラフィックの100%。SafariはiOS 14とmacOS Big Surで2020年にサポートし、ChromeとFirefoxはずっと前からあり、ほとんどのアプリ内ブラウザもデコードします。2026年現在、典型的なコンシューマーサイトでJPGフォールバックなしにWebPを配信するのはもはや無謀ではありません。

AVIF: 2026年でブラウザの約95~97%。Chrome、Edge、Firefox、Safari(16.4以降)、主要なAndroid WebViewはすべてデコードします。残るギャップは主に非常に古いAndroid、古いスマートTVの組み込みWebView、企業のロックダウン端末のロングテールです。一般公開サイトでは、WebPまたはJPGをフォールバックにしたAVIFが安全なデフォルトです。

透過、アニメーション、色深度

JPGはアルファチャンネルを一切持ちません。何らかの透過が必要なら使えません。これがデザイナーが本来必要ないのにPNGに手を伸ばす最大の理由です。

PNGは本物の8ビットアルファチャンネルを提供し、カラーチャンネルあたり最大16ビットをサポートするため、グラフィックスパイプラインの高精度中間データに有用です。標準PNGにアニメーションはありません。APNGは存在しますが、ステッカーや絵文字以外のサポートは不均一です。

WebPは可逆と不可逆の両モードでアルファをサポートし、アニメーションGIFよりはるかに効率的なアニメーションサポートを持ちます。色深度はチャンネルあたり8ビットで、ほぼすべてのWebコンテンツに十分です。

AVIFはアルファ、アニメーション、10・12ビットカラー、広色域、HDR伝達関数をサポートします。HDR写真や広色域アートを公開するなら、AVIFは現在データを忠実に運べる唯一の主要Webフォーマットです。

ハードウェアデコードと電力

JPGデコードは最新ハードウェアでは安価すぎて気にする意味がほぼなく、2015年のスマホでも画面が表示するより速くJPGをデコードします。PNGデコードはDEFLATEが並列に向かないためピクセルあたりは重いですが、PNGのペイロードはスクリーンショット用途では画像あたり一般に小さいので、実用上は相殺されます。

WebP不可逆デコードは、モバイルチップが10年以上持っているのと同じVP8シリコンパスを使います。デコードは速く電力効率が良いです。WebP可逆デコードはほとんどのチップでソフトウェアのみですが、それでも十分予算内です。

AVIFは興味深いところです。ソフトウェアデコードはJPGやWebPよりも本当に重く、1枚あたり3~5倍になることもあります。良いニュースは、2022年以降に出荷されたほとんどのスマホがAV1ハードウェアデコードを持ち、ブラウザは静止画もそこに通せることです。これらの端末ではAVIFは実際にJPGと同じか速いです。AV1シリコンを持たない古いノートPCでは、AVIFサムネイルの壁をデコードするとCPUプロファイルに現れることがあるので慎重に使い、最も小さなバリアントだけがデコードされるようにレスポンシブ画像マークアップに頼ってください。

それぞれの使いどころ: 短く

• JPGは写真用に、最大限の互換性が必要で複数バリアントを保守したくないときに使う。品質82~88が定番のスイートスポット。
• PNGはスクリーンショット、UIエクスポート、ロゴ、ハードエッジ、急ぎで可逆透過が必要なものに。パレットが収まる場合は8ビットインデックスPNGを優先。
• WebPは2026年のWebデフォルトとして使う。写真には不可逆WebP、これまでPNGだったUIアセットやアイコンには可逆WebP。
• AVIFは帯域とCore Web Vitalsが最重要のとき、HDRや広色域コンテンツを配信するとき、または最小のLCP画像が必要なときに使う。常にpicture要素でWebPまたはJPGフォールバックを併用。
• GIFは完全に避ける。アニメーションWebPとAVIFは同じバイト予算でより小さく、より良く見えます。

実用的な変換ワークフロー

ほとんどのチームは、最新フォーマットを活用するために手の込んだビルドパイプラインを必要としません。最小のワークフローはシンプルです: カメラまたはデザインツールの元の書き出しを真実の源として保ち、デプロイ時にJPG、WebP、AVIFのバリアントを生成する。1回限りの変換なら、CLIで数秒で済みます。

# 1枚の写真を3つの最新バリアントに変換
cwebp -q 85 hero.jpg -o hero.webp
avifenc --min 20 --max 30 -s 6 hero.jpg hero.avif

# picture要素でブラウザが理解できる最良のものを選ぶ
# <picture>
#   <source srcset="hero.avif" type="image/avif">
#   <source srcset="hero.webp" type="image/webp">
#   <img src="hero.jpg" alt="..." width="1600" height="900">
# </picture>

コマンドラインツールをインストールしたくなく、画像が数枚しかない場合は、Multilitiesが/tools/image-convertでブラウザベースの画像変換ツールを提供しています。JPG、PNG、WebP、AVIFを任意の方向で扱い、ファイルをどこにもアップロードしません。すべてはタブ内で動作します。フォーマットを変えずに既存のJPGやPNGから余分なバイトを絞り出したいなら、/tools/image-compressが選んだ品質で再エンコードし、前後のバイト数を表示します。

WebP vs PNG: 消えない問い

2026年に最も多い混乱は依然としてWebP vs PNGです。短い答え: 可逆WebPはほぼすべてのWeb用途でPNGより厳密に優れています。より小さく、同じアルファチャンネルをサポートし、気にすべきすべてのブラウザがデコードします。今日PNGを使い続ける唯一の理由は、WebPを受け入れない下流ツール(一部の広告ネットワーク、レガシーCMSプラグイン、印刷ワークフロー)と、PNGがデザイナー間の事実上の交換フォーマットであることです。

新製品をゼロから作るなら、UIには可逆WebP、写真には不可逆AVIFをアセットパイプラインのデフォルトにし、最新フォーマットを受け入れないものがあるときだけPNGとJPGにフォールバックしてください。

よくある落とし穴

• JPGをより高い品質で別のJPGとして再エンコードしてファイルが良く見えると期待しない。元の量子化はすでに情報を捨てており、ファイルが大きくなるだけです。
• スクリーンショットをJPGで保存しない。文字周りのブロック状リンギングは紛れもなく修復不能です。PNGまたは可逆WebPを使ってください。
• カラープロファイルに注意。AVIFと最新のWebPエンコーダはICCプロファイルをデフォルトで保持しますが、古いツールは剥がすため、広色域ディスプレイで色相が変わることがあります。
• AVIFエンコーダの品質スケールをテストする。エンコーダによって慣習が異なります: libavifは0~100の品質を使い、avifencは歴史的に0~63の量子化min/maxを使い、低いほど良いとされてきました。
• オンザフライで再エンコードするCDNを使うなら、Acceptヘッダーで実際にAVIFをネゴシエートしているか確認してください。多くのCDNは設定を切り替えない限りWebPのみがデフォルトです。

JPEG XLについては?

JPEG XLは本当に良いフォーマットで、技術的にAVIFと競争力があり、既存のJPGを約20%小さく可逆トランスコードできるユニークな技を持ちます。2026年現在、SafariはJXLを出荷し、Firefoxはフラグの背後でサポートしており、Chromeはまだデフォルトで有効化していません。それが変わるまで、JXLはデプロイするフォーマットというより注視するフォーマットとして扱ってください。AVIFが今日クロスブラウザサポートを持つ最新フォーマットです。

30秒の決定木

写真ならAVIFとWebPを生成し、JPGにフォールバック。透過やシャープなエッジがあるなら可逆WebPを生成し、PNGにフォールバック。ビルドステップを実行できないなら、写真にJPG、それ以外にはPNGを配信して人生を進めましょう。2026年に画像フォーマットはもはや研究プロジェクトではなく、答えはおおむね固まり、ツールも成熟しています。正しいフォーマットを選び、フォールバックを設定し、節約した時間を別のことに使ってください。