Domain 151 / 225
次世代画像フォーマットは AVIF > WebP > JPEG/PNG の優先で配信する
AVIF / WebP の要点
AVIF は 2026 年時点でブラウザ対応 90% 超、JPEG 比 50% 軽量。WebP は対応 96%、JPEG 比 30% 軽量。picture 要素 + source で AVIF → WebP → JPEG の段階フォールバック。Next.js next/image / Cloudflare Polish などで自動配信
なぜこれを学ぶか
LCP / 帯域 / SEO 全方位で 画像フォーマット選択は重要。 JPEG / PNG のままでは数十 % の無駄、AVIF / WebP に切り替えるだけで体感が変わる。
画像が多いサイトすべてで重要。
学ばないと起きること
| よくある事故 | 被害 |
|---|---|
| JPEG / PNG のみで配信 | LCP 不良 / 帯域コスト過大 |
| WebP のみでフォールバックなし | 古いブラウザで非表示 |
| AVIF を知らない | 最新フォーマット未活用 |
学ぶメリット
- LCP 改善
- 帯域コスト削減
- 商談で「AVIF / WebP / picture」を即答
仕組み
フォーマット比較
| AVIF | WebP | JPEG | PNG | |
|---|---|---|---|---|
| 圧縮率 | 最高 | 高 | 中 | 低（可逆） |
| ブラウザ対応 | 90%+ | 96%+ | 100% | 100% |
| 透過 | 対応 | 対応 | 非対応 | 対応 |
| アニメーション | 対応 | 対応 | 非対応 | 非対応 |
picture 要素でフォールバック
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="..." width="1200" height="800">
</picture>
ブラウザが対応する最初の source を使用。
Next.js next/image
import Image from 'next/image';
<Image
src="/hero.jpg"
width={1200}
height={800}
alt="..."
priority
/>
Next.js が AVIF / WebP を自動配信、サイズ別 srcset 生成。
Cloudflare Polish / Image Resizing
CDN レベルで自動変換:
- ユーザーのブラウザ判定
- AVIF / WebP に動的変換
- 元画像 1 枚で全フォーマット対応
キー概念
LCP 改善効果
JPEG → AVIF で:
- ファイルサイズ 50% 削減
- 読み込み時間半減
- LCP 1-2 秒短縮も可能
適切なサイズ
| 用途 | サイズ |
|---|---|
| Hero 画像 | 1200-1920px 幅 |
| 記事サムネ | 800-1200px |
| サイドバー | 400-600px |
| アイコン | 128-256px |
過剰サイズは無駄、不足は荒く見える。
srcset でレスポンシブ
<img
srcset="
hero-400.webp 400w,
hero-800.webp 800w,
hero-1200.webp 1200w,
hero-1600.webp 1600w
"
sizes="(max-width: 600px) 100vw, 50vw"
src="hero-1200.webp"
alt="..."
>
ブラウザがビューポートに最適なサイズを選択。
よくある誤解
| よくある誤解 | 実際のところ | 出典 |
|---|---|---|
| AVIF は対応ブラウザ少ない | 2026 年時点 90% 超 | Can I Use AVIF |
| WebP で十分、AVIF 不要 | AVIF はさらに 20-30% 軽量 | WebP vs AVIF |
| 画像最適化はバッチで一度 | レスポンシブ srcset で動的最適化 | レスポンシブ画像 |
実務での適用
段階的導入
- JPEG / PNG をそのまま配信（現状）
- WebP 追加 + picture フォールバック
- AVIF 追加（picture の最優先）
- CDN 自動変換（Cloudflare Polish 等）
- Next.js next/image で完全自動化
ビルド時 vs 動的変換
| 方式 | メリット |
|---|---|
| ビルド時 | 配信高速 |
| 動的変換（CDN） | 元画像 1 枚で済む |
| Next.js / Vercel | ハイブリッド（オンデマンド） |
トラブル別の対処
| 症状 | 確認すべきこと |
|---|---|
| LCP 改善されない | 画像フォーマット / srcset / preload |
| 古いブラウザで画像表示されない | picture 要素のフォールバック |
公式ソース
自己テスト
Q1. 推奨される画像フォーマット優先順位は？
AVIF > WebP > JPEG/PNG
Q2. picture 要素でのフォールバック構造は？
source（AVIF）→ source（WebP）→ img（JPEG）の優先順位
Q3. レスポンシブ画像の指定方法は？
srcset で解像度別画像 + sizes でビューポート条件指定
これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。