画像優先度の最短設計：preload / fetchpriority / priority の使い分け（Next.js 15）
画像の優先度設計は、LCPを速くしつつ他の画像やJSを詰まらせないための要。 使いどころはシンプルに「LCP候補だけを最短で」「他は遠慮」。本稿はpreload・fetchpriority・priority（Next.js）の使い分けを、 二重ダウンロードの回避まで含めて最短ルールに落とします。
先に結論（最短ルール）
- ヒーロー（LCP）は preload + fetchpriority="high"（lazy禁止）。
- 折り返し以降は loading="lazy" + fetchpriority="low"。
- 重複DLを回避するため、preload には
imagesrcset/imagesizesを本体と一致させる。 - 背景ヒーローは 背景の設計 に従い、必要なときのみ代表サイズを preload。
要点（TL;DR）
- LCP候補 = preload + fetchpriority="high"、その他 = lazy + low。
- preload は1枚だけ。
imagesrcset/imagesizesを付けて二重DLを防止。 - Next.js の
<Image priority>は LCP用の近道（ただし乱用しない）。 - 全画像に width/height を入れて CLSゼロ を維持。
1. なぜ“指定しすぎ”が遅くなるのか
preload を多用すると、ネットワークキューが高優先度だらけになり、肝心のLCPやCSS/JSを 逆に圧迫します。fetchpriority はブラウザの優先度ヒントで、状況により最適化されますが、付けすぎは競合の元。LCP候補だけを確実に速くし、他は控えめにするのが最短です。
2. 最短フロー（実務）
- ヒーロー（LCP候補）を特定し、
preload+fetchpriority="high"。 - 残りの画像は
loading="lazy"とfetchpriority="low"を基本に。 preloadにはimagesrcset/imagesizesを付け、本体と一致させて重複DLを回避。- 背景ヒーローは装飾扱いなら CSS 背景（必要時のみ代表サイズをpreload）。意味があるなら
<img>に寄せる。
3. 実装レシピ（コピペOK）
3.1 preload + fetchpriority（ヒーロー）
// HTML<!-- 1) LCP候補のヒーローを “1枚だけ” 先読み -->
<link
rel="preload"
as="image"
href="/images/hero-1200.avif"
imagesrcset="/images/hero-800.avif 800w, /images/hero-1200.avif 1200w, /images/hero-1600.avif 1600w"
imagesizes="(min-width: 1024px) 1000px, 92vw"
/>3.2 本体の <img>（lazy禁止）
// HTML<!-- 2) 本体の <img> は fetchpriority="high"（lazy禁止） -->
<img
src="/images/hero-1200.avif"
srcset="/images/hero-800.avif 800w, /images/hero-1200.avif 1200w, /images/hero-1600.avif 1600w"
sizes="(min-width: 1024px) 1000px, 92vw"
width="1600" height="900"
alt="ヒーロー"
fetchpriority="high"
decoding="async"
/>3.3 Next.js 15 の <Image priority>
// TSX (Next.js)// 3) Next.js 15 で LCP（<Image priority> を使用）
import Image from "next/image";
export default function Hero() {
return (
<div className="relative" style={{ aspectRatio: "16/9" }}>
<Image
src="/images/hero-1600.avif"
alt="製品の利用シーン"
fill
sizes="(min-width: 1024px) 1000px, 92vw"
// priority=true で <link rel="preload"> + 高優先度 相当が付与されます
priority
/>
</div>
);
}3.4 カード/サムネ（lazy + low）
// HTML<!-- 4) 折り返し以降は “詰まらない” 設計（lazy + 低優先度） -->
<img
src="/thumb-640.webp"
srcset="/thumb-320.webp 320w, /thumb-480.webp 480w, /thumb-640.webp 640w"
sizes="(min-width: 1024px) 320px, (min-width: 640px) 33vw, 45vw"
width="640" height="400"
alt="カード"
loading="lazy"
fetchpriority="low"
decoding="async"
/>3.5 背景ヒーロー（装飾）
// CSS/* 5) 背景ヒーロー（装飾）は CSS で管理（必要なら代表サイズだけ preload）
- 詳細なやり方は「背景画像のレスポンシブ設計」を参照
*/
.hero {
aspect-ratio: 16/9;
background: no-repeat center / cover;
background-image: image-set(
url("/images/hero-1200.avif") type("image/avif") 1x,
url("/images/hero-2400.avif") type("image/avif") 2x
);
}3.6 画像CDNなら preconnect
// HTML<!-- 6) 画像CDNが別オリジンなら preconnect で往復削減 -->
<link rel="preconnect" href="https://img.example-cdn.com" crossorigin />4. 応用とハマりどころ
- カルーセルは初期表示分のみ高優先度、スライド外は lazy + low。関連： INP時代の画像遅延読み込み。
- LCPは描画幅と密接。
sizesを正しく入れて過大DLを防ぐ（関連： srcset/sizes設計）。 - すべての
<img>に width/height を付け、 CLSゼロ と両立。
5. 公開前チェック
// Checklist# 公開前チェック（優先度）
- LCP候補は 1枚だけ preload（imagesrcset/imagesizes も指定して重複DL防止）
- 本体は fetchpriority="high"（または <Image priority>）。lazyは使わない
- 折り返し以降は loading="lazy" + fetchpriority="low"
- すべての <img> に width/height（CLS対策）。背景は aspect-ratio で予約
- 画像の描画幅に合わせた sizes を入れて過大DLを抑制
- 代表的な3ケースを計測：初回訪問/再訪/低速回線。LCPとINPが悪化しないこと6. まとめ
迷ったら「LCPだけ最短・それ以外は控えめ」。preload と fetchpriority は最小限に使い、sizes と width/height を揃えるだけで大半の問題は解けます。 最後は /compare と /compressor で目視と容量を確認しましょう。
FAQ（よくある質問）
画像形式の基本方針は？（写真/スクショ/透過）
写真は AVIF / WebP（画質80–85%目安）、UIやスクショはPNG / WebP Lossless、単色ロゴはSVGが基本です。 実装の詳細は srcset/sizes設計ガイド と スクショ最適化 を参照してください。
圧縮しても画質を落とさないコツは？
実表示幅に合わせたリサイズ → 過大ダウンロードを防ぎ、
srcset/sizes を 実描画幅に一致させます。画質は写真で 80–85% を起点に、ノイズやエッジを目視確認。 仕上げは /compare で Before/After を見比べるのがおすすめです。