JPEG, WebP, AVIF の違いと使い分け - 画像圧縮フォーマット比較ガイド
JPEG・WebP・AVIF の仕組みと得意分野
画像の圧縮フォーマットを選ぶときに迷いやすいのが、JPEG、WebP、AVIF の三つです。いずれも「見た目をほとんど変えずにファイルを小さくする」非可逆圧縮を主な用途としていますが、生まれた時代と内部の仕組みが異なるため、得意な画像の種類や使える機能に差があります。
JPEG は長い歴史を持ち、ほぼすべての環境で開けるフォーマットです。MDN の画像ファイル形式ガイド (2026 年 8 月更新) は、静止画の非可逆圧縮では現在も最も普及した選択肢と位置づけており、対応ブラウザは Chrome、Edge、Firefox、Opera、Safari の全バージョンとされています。画像を 8x8 画素のブロックに分けて周波数成分へ変換し、人の目が気づきにくい高周波成分を粗く記録することでサイズを削ります。連続的なトーンの写真には向いていますが、透過 (アルファチャンネル) を扱えず、強く圧縮するとブロック境界のノイズや文字周りのにじみが目立ちやすいのが弱点です。
WebP は Google が開発したフォーマットで、動画コーデック VP8 のキーフレーム符号化を静止画に応用しています。周囲の画素から内容を予測して差分だけを記録する予測符号化を使うため、同じ品質なら JPEG より小さくなりやすく、非可逆・可逆の両方に加えて透過とアニメーションにも対応します。Google の WebP 公式文書 (2025 年 8 月更新) は、可逆圧縮では PNG より 26% 小さく、非可逆圧縮では同等品質の JPEG より 25〜34% 小さくなると説明しています。一方で、画像の 1 辺は 16383 画素までという上限があります (同 FAQ・2026 年 2 月更新)。
AVIF は Alliance for Open Media (AOMedia) が策定した AV1 Image File Format の略で、動画コーデック AV1 の静止画符号化を HEIF 系のコンテナに収めたものです (AVIF 仕様 v1.2.0・2025 年 10 月)。JPEG の 8x8 より大きな可変サイズのブロックと高度な予測を使うため、平坦な色面や大きな画像で効率が高く、8 / 10 / 12 ビットの色深度、透過、HDR、画像シーケンス (アニメーション) に対応します (MDN・2026 年 8 月更新)。ロイヤリティフリーで利用できる点も、Web での採用が進んだ理由の一つです。
まとめると、互換性を最優先するなら JPEG、互換性と圧縮率のバランスを取るなら WebP、圧縮率と機能を最優先するなら AVIF という位置づけになります。以下では、この違いが品質・容量・ブラウザ対応・用途にどう表れるかを順に見ていきます。
品質と容量のトレードオフ - 圧縮率を左右する要因
「AVIF は JPEG より何% 小さい」という単一の数字は、実際には条件しだいで大きく変わります。同じフォーマットでも、品質設定・画像の内容・解像度・エンコーダの実装と設定によって圧縮率は上下するため、数字を見るときは必ず測定条件を確かめる必要があります。
品質設定: 非可逆圧縮では、品質パラメータを下げるほどファイルは小さくなりますが、ある点を超えると劣化が目に見えて現れます。フォーマットが違えば品質パラメータの意味も違うため、JPEG と WebP に同じ品質値を指定しても同じ画質にはなりません。公平に比べるなら、SSIM のような画質指標や目視で品質を揃えたうえでサイズを比べるのが前提です。
画像の内容: 空のグラデーションや肌のような滑らかな領域は予測が当たりやすく、どのフォーマットでもよく縮みます。逆に、布地や木目、砂利のような細かいテクスチャは予測が外れやすく、圧縮率が落ちるうえ、強く圧縮すると細部がつぶれて塗ったような見え方になることがあります。文字やシャープな線を含むスクリーンショットでは、JPEG は輪郭の周りにリンギングと呼ばれるにじみが出やすく、同じ見た目を保つには高い品質設定が必要になります。
解像度: AVIF が使う可変サイズの大きなブロックは、広い平坦領域をまとめて表現できるため、大きな画像ほど有利に働く傾向があります。小さなサムネイルではフォーマット間の差が縮まりがちなので、サイズ別に確かめておきたいところです。
エンコーダと速度設定: 同じフォーマットでも、エンコーダの実装や速度 (effort) 設定によって結果は変わります。一般に、時間をかけて探索するほど圧縮率は上がり、速度優先にすると圧縮率は下がります。AVIF のエンコードは JPEG や WebP より時間がかかる傾向があり、ビルド時の一括変換には向いていても、アップロード直後のリアルタイム変換では速度設定の調整や後回しの処理が必要になることがあります。デコード (表示) の負荷もフォーマットによって異なるため、画像の多いページでは decoding="async" や遅延読み込みを併用すると安心です。
結論として、圧縮率の数字は「その条件での一例」として読み、自分の画像で確かめて判断します。手順は後述の「自分の画像で比べる方法」で説明します。
ブラウザ対応の現状とフォールバック
圧縮率が高くても、閲覧者のブラウザが表示できなければ意味がありません。caniuse のデータ (2026 年 8 月更新) では、世界の利用シェアで見た対応率は WebP が約 96% です。AVIF も約 95% に達しており、Chrome、Edge、Firefox、Safari の現行版はいずれも両フォーマットを表示できます。
ただし、対応が広がった時期には差があります。同データでは、Safari が WebP に全面対応したのはバージョン 16.0 から (14.0〜15.6 は macOS 11 以降に限る)、AVIF に全面対応したのはバージョン 16.4 からで、それ以前の Safari を使う閲覧者にはフォールバックが要ります。AVIF のアニメーション (画像シーケンス) は静止画より対応が遅れ、同データでは Safari 16.1〜16.3 と Firefox 93〜112 に「静止画のみ対応」の注記が付いています (Safari 16.0 以前は AVIF 自体が非対応)。
実務的な解は、picture 要素で新しいフォーマットから順に候補を並べ、最後に JPEG や PNG を置く方法です。ブラウザは自分が表示できる最初の source を選ぶため、対応状況を調べて分岐するコードを書く必要はありません。
<picture>
<source type="image/avif" srcset="photo.avif">
<source type="image/webp" srcset="photo.webp">
<img src="photo.jpg" alt="写真の説明">
</picture>CDN や画像変換サービスの中には、リクエストの Accept ヘッダを見てサーバー側で最適なフォーマットを返すものもあります。この方法なら HTML を変えずに移行できますが、キャッシュが Accept ヘッダごとに分かれる点は設計時に考慮が必要です。
用途別の選び方 - 写真・イラスト・透過・アニメーション
フォーマットの向き不向きは画像の種類で決まります。用途ごとの考え方を整理します。
- 写真: 非可逆圧縮がよく効く代表的な領域です。AVIF を第一候補、WebP を次候補、JPEG を最終フォールバックにする 3 段構成が基本形になります。テクスチャの多い写真では AVIF の品質を下げすぎると細部がつぶれることがあるため、品質設定は控えめから始めて目視で詰めます。
- イラスト・フラットデザイン: 均一な色面が多いため、WebP や AVIF の予測符号化がよく効きます。線のにじみが許されない場合は非可逆ではなく可逆モードを選び、可逆 WebP (PNG より小さくなることが多い) か PNG を使います。
- スクリーンショット・文字を含む画像: 文字の輪郭を保つことが最優先です。非可逆にするなら JPEG は避け、WebP か AVIF を高品質で使うか、PNG や可逆 WebP を選びます。
- 透過画像 (アイコン・切り抜き商品写真): JPEG は透過を扱えないため、従来は PNG が定番でした。WebP と AVIF はどちらもアルファチャンネル付きの非可逆圧縮ができるため、PNG からの移行でサイズを大きく減らせる場面が多く、EC サイトの商品画像などでは最初に取り組む価値があります。
- アニメーション: GIF の置き換えには WebP アニメーションが定番で、MDN のガイドもアニメーション用途に WebP、AVIF、APNG の検討を勧めています。AVIF の画像シーケンスは仕様上は対応しますが、前節のとおりブラウザ側の対応時期に差があるため、長いものは動画 (MP4 / WebM) の
video要素で代替する選択肢も含めて検討します。 - HDR・高ビット深度: MDN のガイド (2026 年 8 月更新) が 8 / 10 / 12 ビットの色深度と HDR への対応を挙げているのは AVIF で、WebP は 8 ビットです。写真作品の配信など色の階調を重視する用途では、AVIF を選ぶ理由になります。
移行の優先順位は、効果の大きさと手間で決めます。多くのサイトでは (1) 透過画像 (PNG からの置き換え)、(2) ヒーロー画像や LCP になる画像、(3) 枚数の多い写真、(4) すでに WebP になっているイラストやスクリーンショットの AVIF 化の順に進めるのが効率的です。
自分の画像で比べる方法 - Squoosh・cwebp・avifenc
フォーマットの差は画像と設定によって変わるため、導入前に自分のサイトで実際に配信する画像を数枚選んで試すのが確実です。ここでは手軽な順に二つの手段と、結果を公平に比べるための原則を紹介します。
ブラウザで試す (Squoosh): Squoosh (squoosh.app) は、ブラウザ上で画像を圧縮し、コーデックや品質を変えながら元画像と見比べられるツールです。ファイルサイズがその場で表示されるので、見た目が許容できる最小の品質を探すのに向いています。インストールは不要です。
コマンドラインで試す (cwebp / avifenc): libwebp に含まれる cwebp は -q で 0〜100 の品質を指定し (既定値 75・cwebp 文書 2025 年 8 月更新)、-lossless を付けると可逆モードになります。libavif に含まれる avifenc も -q で品質を指定できます (libavif README)。同じ画像を品質を変えて数パターン書き出し、サイズと見た目を表にすると、自分の画像に合う設定が見えてきます。
cwebp -q 75 input.png -o output.webp
avifenc -q 75 input.png output.avif品質を揃えて比べる: 公平に比べるには、ファイルサイズを揃えて見た目を比べるか、見た目を揃えてサイズを比べるかのどちらかに決めます。SSIM のような画質指標を使う方法もありますが、最終判断は実際の表示サイズでの目視確認に置きます。特に文字、肌、空のグラデーション、細かいテクスチャの 4 箇所は劣化が出やすいので、重点的に見ます。
この段階で得た数字は、あくまで自分の画像とその設定での結果です。他のサイトが公開している比較値と食い違っても不思議ではなく、判断の根拠は自分の測定に置くのが安全です。
まとめ - 迷ったときの判断手順
最後に、判断の流れを整理します。
- 互換性を最優先し、手間をかけたくない場合は、JPEG (写真) と PNG (透過・文字) のまま、画質設定の見直しだけを行います。
- 大きな削減を狙いつつ運用は簡単にしたい場合は、WebP へ移行し、
picture要素で JPEG / PNG をフォールバックに残します。 - さらに削減したい、あるいは HDR や高ビット深度が必要な場合は、AVIF を第一候補にし、WebP と JPEG の 3 段フォールバックを組みます。エンコード時間の増加はビルド時の一括処理で吸収します。
- アニメーションは WebP アニメーションを基本に、長いものは動画要素で代替します。
どの段階でも、導入前に自分の画像で品質とサイズを確かめ、picture 要素によるフォールバックで古い環境を切り捨てないことが、失敗しない移行の要点です。フォーマットの対応状況やエンコーダは今も更新が続いているため、caniuse や各公式文書の最新版も定期的に確認してください。