WebP / AVIF / JPEG の使い分け — 2026年の実用選択ガイド

項目	JPEG	WebP	AVIF
登場年	1992	2010	2019
開発元	JPEG委員会	Google	AOMedia (Netflix, Google, Amazon...)
圧縮効率	基準	JPEG比 25-35%小	JPEG比 50%小、WebP比 20%小
透過	×	◯	◯
アニメ	×	◯	◯
ロスレス	×	◯	◯
ブラウザ対応	100%	97%+	94%+
エンコード速度	最速	速い	遅い(10-50倍)
デコード速度	最速	速い	やや遅い

対応率は caniuse.com 2026年初頭時点。数値は Web 全体のアクセス比率で、日本国内だと iPhone シェアが高いため AVIF 対応率はもう少し低め(90%程度)です。

AVIF は動画コーデック AV1 のキーフレームを静止画として切り出した形式です。HEIC(iPhoneの写真)と同じく次世代圧縮技術の流れにあり、以下の強みがあります。

• 圧縮効率: 高画質を保ったまま JPEG の半分のファイルサイズ
• ビット深度: 10bit/12bit カラーに対応(HDR対応)
• 透過と アニメーション: 単一フォーマットでカバー

欠点:

• エンコードが遅い: サーバーサイドの一括変換や、静的サイトジェネレータのビルド時間に影響
• 小さい画像では効果が薄い: アイコン・サムネイルレベルではメタデータのオーバーヘッドで JPEG より大きくなることも
• Safari 16+ 必要: iOS 16 未満では非対応

最もクリーンな実装は HTML の <picture> 要素です。ブラウザが対応形式を上から順に試して、最初に対応するものを使う仕組みです。

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1200" height="630" />
</picture>

注意点:

• <img> には必ず width と height を指定する(CLS 対策)
• alt 属性を忘れない
• source の順番は最新 → 古いで並べる。最初にマッチしたものが使われるため順序が重要

Next.js (Image コンポーネント)

Next.js 13+ の next/image はデフォルトで AVIF と WebP を自動生成します。設定は next.config.js で:

// next.config.js
images: {
  formats: ["image/avif", "image/webp"],
}

WordPress

WordPress 6.5+ で WebP が自動生成されます。AVIF 対応はプラグイン(EWWW Image Optimizer、ShortPixel等)が必要です。

Cloudflare Images / Cloudinary

URL パラメータで自動フォーマット選択(?format=auto)を提供。リクエストの Accept ヘッダーを見て最適な形式を返します。手動でフォールバックを書く必要がありません。

写真(JPEG がデファクトだった領域)

AVIF → WebP → JPEG の3段フォールバック。ブログのサムネイルや ヒーロー画像に最適です。エンコード時間が許せる限り AVIF を用意するとベスト。

透過が必要な画像(PNG 領域)

AVIF → WebP → PNG。ロゴや UI パーツで、透過が必要なら PNG の代わりに。ただしロゴは SVG 化のほうが良いケースも多い。

アニメーション(GIF 領域)

動画(MP4 や WebM)に置換が第一選択。どうしても画像タグで扱う必要があるなら AVIF/WebP アニメ。ファイルサイズが劇的に小さくなります。

アイコン・超小サイズ画像(1KB未満)

SVG が最適。ラスタが必要でも JPEG/PNG で十分。AVIF はメタデータのオーバーヘッドで逆に肥大します。

レガシー対応が絶対必要(IE11含む)

JPEG 一本。picture 要素自体が動かないため、古い環境では素の <img> + JPEG のほうが確実です。ただし IE11 は既にサポート終了している点を再確認してください。

AVIF/WebP 採用はLargest Contentful Paint (LCP) の改善に直結します。ヒーロー画像が 400KB → 150KB になれば、ファーストビューの読み込み時間が数百ms短縮されることが珍しくありません。

さらに loading="lazy" と組み合わせ、ファーストビュー外の画像を遅延読み込みすれば、モバイル環境の指標が大きく改善します。

<picture>
  <source srcset="/img.avif" type="image/avif" />
  <source srcset="/img.webp" type="image/webp" />
  <img
    src="/img.jpg"
    alt="..."
    width="800"
    height="600"
    loading="lazy"
    decoding="async"
  />
</picture>

ヒーロー画像にだけは lazy を付けないのが定石です。LCP 候補を遅延させると指標が悪化します。

• 2026年現在、AVIF → WebP → JPEG のフォールバックが堅実
• AVIF は 50% 小さい代わりにエンコードが遅い — ビルド時間とのトレードオフを検討
• picture 要素は AVIF/WebP/JPEG の並び順を必ず新しいもの → 古いものに
• width/height 必須(CLS 対策)、ヒーロー画像以外は loading="lazy"
• 小さいアイコンは SVG、それ以外のラスタは 3段フォールバック
• Cloudflare Images や Cloudinary の format=auto を使うと実装が楽