AVIF、WebP、JPEG、PNG：2026年、どの場面でどの形式を使うべきか
公開日 2026-07-20
2026年には、4つの形式でウェブ上のほぼすべての画像がカバーされており、良いニュースは、どんな作業であっても、実際に検討すべき形式は2つ程度で済むことがほとんどだという点です。ここでは実際の数値に基づく実践的な判断ガイドと、30年前から使われているJPEGが今なお正解となるケースを紹介します。
候補たちを一行ずつ
JPEG（1992年）：非可逆、写真向けに作られ、あらゆる場所で受け入れられている。PNG（1996年）：可逆、透明度対応、シャープな輪郭、あらゆる場所で受け入れられている。WebP（2010年）：可逆・非可逆の両モード、透明度、アニメーションに対応し、圧縮性能はJPEGよりおおよそ一世代分優れている。AVIF（2019年、AV1動画コーデックをベースに構築）：現時点での圧縮チャンピオンで、透明度、アニメーション、HDRに対応しているが、そのぶんエンコードが遅く、ブラウザ以外でのサポートにはばらつきがある。
HEICとJPEG XLはどうなのか
遭遇はするものの、基本的に公開用としては使うべきでない2つの形式があります。HEICはiPhoneがデフォルトで撮影する形式です。圧縮効率は優れていますが、実質的にAppleエコシステム専用の形式であり、ブラウザやWindowsでのサポートは不安定なため、共有前にJPEGへ変換すべきです。JPEG XLは技術的には非常に優れており、机上の性能だけを見れば最も万能と言えるかもしれませんが、その普及の経緯は混乱しています。Chromeは2022年に実験的サポートを削除した一方、Safariは後になって対応を追加し、この対立状態のせいで「安全に使える形式」のリストには入れないままになっています。この状況が落ち着くまでは、両方とも配信用ではなく撮影用またはアーカイブ用の形式として扱うのが賢明です。
具体的な数値で見る圧縮効率
同等の視覚的品質で典型的な写真を比較すると、WebPはJPEGよりおよそ25〜30パーセント小さくなり、AVIFはJPEGよりおよそ40〜50パーセント小さくなります。特にAVIFの優位性は、圧縮率を強めに設定した場合に最も顕著です。具体的には、品質80で保存された1.2MBのJPEGは、WebPに変換するとおよそ850KB、同程度の品質のAVIFでは600〜700KB程度になる傾向があります。可逆圧縮の作業では、最適化されたPNGが基準となり、可逆WebPは通常それより20〜25パーセント優れています。
AVIFのこうした数値には2つの注意点が伴います。まずエンコードが遅く、1画像あたりミリ秒ではなく秒単位の時間がかかるため、ビルドパイプラインや一括変換において無視できない要素です。さらに、非常に低い品質設定にすると、AVIFはJPEGとは異なる形で劣化します。ブロック状のアーティファクトが出る代わりに、肌の質感や葉のディテールといった細かいテクスチャを平滑化してしまうのです。一見するときれいに見えますが、じっくり見るとプラスチックのような質感に見えることがあります。
比較する際の落とし穴が1つあります。品質スライダーは形式をまたいで比較できません。JPEGの品質80、WebPの品質80、AVIFの品質80は、それぞれ内部的にまったく異なる尺度を表しているため、「同じ品質設定」での比較には意味がありません。自分が許容できると感じる視覚的品質のもとで、出力サイズを基準に比較すべきです。実際には、目標サイズまで圧縮してから結果を並べて確認する、という形になります。
ブラウザ対応は解決済み。それ以外は未解決
2026年現在、ブラウザに関する問題はシンプルです。あらゆる主要なモダンブラウザが4つの形式すべてをレンダリングできます。WebPは2020年以降どこでも安全に使え、AVIFは2022年にSafari 16がリリースされて以降、同様に安全です。実際の互換性の問題は、今やブラウザの外側にあります。WebPやAVIFをレンダリングしないメールクライアント、旧式の内蔵フォトビューア、.jpgと.pngしか受け付けないアップロードフォーム、印刷会社、そして見慣れない形式を再エンコードしたり拒否したりするCMSやSNSのパイプラインなどです。これが、このガイドで最も実用的なルールにつながります。自分が管理するウェブページ上では最新の形式を自由に使い、他人のシステムに渡すファイルについては、JPEGとPNGが依然として共通言語であり続けるということです。
透明度とアニメーション
JPEGには透明度がまったくありません。これは議論の余地がありません。PNG、WebP、AVIFはいずれもアルファチャンネルに対応しています。興味深いのは、背景を切り抜いた商品写真のような、透明度を持つ写真系の画像です。これをPNGとして保存すると非常に巨大になります。PNGは写真のディテールをうまく圧縮できないためです。これをアルファ付きのWebPに変換すると、サイズを80〜90パーセントも削減できるのが常です。アニメーションについては、アニメーションWebPとAVIFは、256色と1987年当時の圧縮技術に縛られたGIFよりもはるかに小さくなります。ただし数秒を超える長さになると、音声なしのループ動画ファイルがどの画像形式よりも優れています。
JPEGとPNGが今も正解であるケース
互換性がバイト数よりも優先される場面では、JPEGは依然として正しい選択肢です。メールの添付ファイル、フォームやポータルサイトに送る予定のファイル、印刷に回すもの、そしてどのみちアップロードを再エンコードするプラットフォーム（ほとんどのソーシャルネットワーク）などです。こうした場では、せっかく丁寧に調整したAVIFも、到着時に相手側のJPEGへ変換されてしまいます。JPEGはほぼ瞬時にエンコードでき、プログレッシブレンダリングにも対応しているため、低速な回線でも早い段階で使える画像が表示されます。
PNGは、スクリーンショット、UIモックアップ、図表、ロゴなど、はっきりした輪郭とベタ塗りの色が支配的な場面で今も正解です。非可逆コーデックは鋭い輪郭の周りに目に見えるリンギングを生じさせるためです。よくある逆方向の間違いは、写真をPNGとして保存してしまうことです。これは目に見える恩恵がないまま、ファイルサイズを5〜10倍に膨らませてしまいます。この落とし穴と、3つの古い形式それぞれの基礎については、「JPG対PNG対WebP」で取り上げています。
5行でわかる判断基準
自分が管理するサイト上の写真：picture要素を通じてWebPまたはJPEGのフォールバックを備えたAVIF。メール、アップロードフォーム、印刷に向かう写真：JPEG。スクリーンショット、図表、ロゴ：PNG、または配信先を自分で管理できる場合は可逆WebP。透明度が必要な写真：WebPまたはAVIF。短いアニメーション：アニメーションWebPまたはAVIF、あるいはそれ以上に望ましいのは小さなループ動画。
そして形式を選ぶよりも前に、解像度を確認してください。幅800ピクセルのカラムに表示される幅4000ピクセルの写真は、どんなコーデックを使っても取り戻せないほど多くのバイトを無駄にします。まずは表示サイズに合わせてリサイズし、それから形式を選んでください。
変換作業そのものについては、noritoの画像コンバーターがブラウザ内で直接JPG、PNG、WebPを相互に変換し、画像圧縮ツールはそのいずれも目標のファイルサイズまで圧縮します。画質が目に見えて劣化する前にどこまで圧縮できるか迷っている場合は、このガイドで重要な設定を解説しています。