画像最適化

21.3.1. フォーマット選択

画像フォーマットは圧縮効率と品質を考慮して最適な形式を使用しなければなりません。

フォーマット	用途	優先順位
AVIF	写真、複雑な画像	最優先（ブラウザサポート時）
WebP	写真、複雑な画像	デフォルト
PNG	透過が必要な画像、アイコン	fallback
JPEG	透過が不要な写真	fallback
SVG	アイコン、ロゴ、シンプルなグラフィック	ベクター画像専用

• WebP をデフォルトの画像フォーマットとして使用しなければなりません。
• AVIF をサポートするブラウザでは AVIF を優先的に提供しなければなりません。
• <picture> タグを使用してフォーマット別の fallback を提供しなければなりません。

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="メイン画像" width="1200" height="600">
</picture>

• アイコンとロゴには SVG フォーマットを使用することを推奨します。

---

21.3.2. 遅延読み込み

ビューポート外に位置する画像には遅延読み込みを適用して初期読み込みパフォーマンスを確保しなければなりません。

• ビューポート下部に位置するすべての画像に loading="lazy" 属性を指定しなければなりません。
• 初期表示領域（Above the Fold）に表示される画像には loading="lazy" を適用してはなりません。
• 細かな制御が必要な場合は Intersection Observer API を活用できます。

<!-- ビューポート下部の画像 -->
<img src="/images/product.webp" alt="商品画像" loading="lazy" width="400" height="300">

<!-- 初期表示画像：lazy を適用しない -->
<img src="/images/hero.webp" alt="メインバナー" width="1200" height="600" fetchpriority="high">

• 画像読み込み前にスケルトン UI またはプレースホルダーを表示してユーザー体験を保証することを推奨します。
• 低解像度プレースホルダー画像（LQIP）を適用することを推奨します。

---

21.3.3. レスポンシブ画像

デバイスの画面サイズと解像度に合った画像を提供し、不要なデータ転送を防止しなければなりません。

• srcset 属性と sizes 属性を使用して解像度別の画像を提供しなければなりません。

<img
  srcset="
    /images/banner-480w.webp 480w,
    /images/banner-768w.webp 768w,
    /images/banner-1200w.webp 1200w,
    /images/banner-1920w.webp 1920w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  src="/images/banner-1200w.webp"
  alt="バナー画像"
  width="1200"
  height="400"
>

• DPR（Device Pixel Ratio）2x 以上の高解像度ディスプレイ向けの画像を提供しなければなりません。
• モバイル環境でデスクトップ用の大型画像が読み込まれないよう、適切な sizes 値を設定しなければなりません。
• 画像 CDN を活用してリクエストパラメータベースの動的リサイズを適用することを推奨します。

---

21.3.4. サイズ制限

画像ファイルサイズは用途別に以下の基準を超過してはなりません。

用途	最大サイズ	備考
アイコン	10KB	SVG フォーマット推奨
サムネイル	100KB	一覧、カードなどで使用される画像
一般コンテンツ画像	300KB	本文内の挿入画像
ヒーロー画像	500KB	メインバナー、全面画像

• 上記基準は圧縮後のファイルサイズを基準とします。
• すべての <img> タグに width と height 属性を明示して CLS を防止しなければなりません。
• CI パイプラインで画像サイズを自動検証することを推奨します。
• 基準を超過する画像が発見された場合、圧縮またはリサイズを実行してからデプロイしなければなりません。
• ビルド時に自動画像最適化プラグイン（vite-plugin-imagemin など）を適用することを推奨します。