画像の優先度設計とpreloadの最適解 2025

“最初に見える画像を、最短距離で正しく届ける”——検索とUXの土台はここから始まります。

先に結論（TL;DR）

• LCP候補の1枚だけに fetchpriority="high" を付ける

• LCP候補は必要なら <link rel="preload" as="image"> を併用（やりすぎ厳禁）

• レスポンシブは imagesrcset/imagesizes を正しく指定、CSSのobject-fitやaspect-ratioと整合

• それ以外は loading="lazy" + decoding="async" を基本にしてINPを守る

• CDNは Vary: Accept を設計しAVIF/WebP配信の競合を避ける

• 内部リンク: INPを悪化させない配信, フォーマット比較, スプライト最適化

判断フロー（ケース別）

1. ヒーロー画像・ファーストビューに入る？ → はい: LCP候補
2. ビューポート内で面積が大きい？ → はい: fetchpriority="high" 検討
3. レンダリングブロック回避が必要？ → Criticalなら preload、それ以外は不要
4. アート/写真？ → エンコードとimagesrcsetを用意、sizesで実サイズに寄せる
5. INP懸念？ → 遅延読み込み/低優先度が基本、JS初期化は遅らせる

実装スニペット（正解パターン）

<!-- LCP候補: fetchpriority と preload を併用（過剰指定に注意） -->
<link
  rel="preload"
  as="image"
  href="/hero/landing.avif"
  imagesrcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  imagesizes="(max-width: 768px) 92vw, 1200px"
  type="image/avif"
/>
<img
  src="/hero/landing-1200.avif"
  srcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630"
  fetchpriority="high"
  decoding="async"
  alt="主要ビジュアル"
  style="aspect-ratio: 1200/630; object-fit: cover"
/>

よくある落とし穴と対策

• すべてにpreload → 転送競合で逆効果。LCP候補だけに限定
• sizes未指定 → 本来より大きい画像が選ばれLCP悪化。実描画幅に合わせる
• fetchpriorityの乱発 → 重要度が分散し並列効率低下。1ページ1枚（原則）
• CSSで見た目のみ最適化 → レイアウト情報が遅く確定し遅延。aspect-ratioで先に確保

配信とINP/LCPの設計

• LCP: fetchpriority="high" + 適正な imagesrcset/imagesizes
• 非LCP: loading="lazy"/decoding="async"、インターラクション直前にプリロード
• CDN: Vary: Accept + キャッシュキー最適化、HTTP/2優先度の確認

チェックリスト（保存版）

• [ ] LCP候補は1枚に限定し、preloadは必要最小限
• [ ] sizesは実描画幅に準拠、srcsetは十分な段差を用意
• [ ] aspect-ratioでCLSゼロ、object-fitでトリミング
• [ ] 計測でLCP/INPのリグレッションがないか検証

FAQ

• Q: fetchpriority と preload はどちらが優先？

• A: 役割が違います。前者は優先度ヒント、後者は先行取得の指示。併用はLCP候補だけに。

• Q: preload すると srcset が効かない？

• A: imagesrcset/imagesizes を <link rel="preload"> 側にも指定すればOKです。

まとめ

“どの画像に、いつ、どれだけ早く着手させるか”を設計できれば、LCPと体感の両方が安定します。まずはLCP候補の同定と、fetchpriority/preload/sizesの三点セットから始めましょう。