レスポンシブ画像（srcset/sizes）完全ガイド — 最短で “軽く・崩れない”
結論：まず解像度（本文 1200–1600px ／ 一覧 600–800px）を決め、 次に 形式（写真=WebP／互換=JPEG／ロゴ=PNG）、最後に 品質（WebP 80% 起点）。 その上で srcset（解像度違いを並べる）と sizes（実表示幅の予告）をセットにすると、LCPを守りつつ帯域を最小化できます。
1. 基礎：srcset と sizes は “セット” で使う
srcset は「用意してある解像度の一覧」、sizes は「CSSに基づく実表示幅の見込み」をブラウザへ伝える属性です。 ブラウザは sizes の条件に合わせて srcset の中で最適な1枚を選びます。
- srcset：
image-640.webp 640w, image-960.webp 960w, image-1280.webp 1280w - sizes：
(min-width: 1024px) 800px, 92vw（= 1024px 以上は 800px 固定、それ未満はビューポート幅の 92%）
2. 判断フロー（解像度 → 形式 → 品質 → srcset/sizes）
3. 実装パターン（最短の書き方）
A. 記事本文の横幅 1200px を上限にする
2カラム程度の一般的な記事レイアウト。XL 以上では 800px 程度、モバイルでは 92vw 程度で収まる前提。
<img src="/images/hero-960.webp" srcSet="/images/hero-640.webp 640w, /images/hero-960.webp 960w, /images/hero-1280.webp 1280w" sizes="(min-width:1024px) 800px, 92vw" width="1280" height="720" alt="サンプル" />
B. カード一覧（3～4列）のサムネ
カード幅がブレないよう、ブレークポイントごとの “想定カード幅” を sizes に書きます。
<img src="/thumbs/item-400.webp" srcSet="/thumbs/item-300.webp 300w, /thumbs/item-400.webp 400w, /thumbs/item-600.webp 600w" sizes="(min-width:1280px) 300px, (min-width:768px) 33vw, 50vw" width="600" height="338" alt="アイテム" />
C. ヒーロー画像（LCP 最優先）
LCP はヒーロー画像の“解像度・形式・優先ロード”でほぼ決まります。srcset も適切に用意しつつ、過剰な 2x を避けて転送量を抑えます。 詳しくは CWVと画像最適化 を参照。
4. ケース別レシピ
A. 写真＋小さな文字が混在
WebP 80% → 文字滲みがあれば 85%。それでも厳しい箇所は部分的に PNG（ロゴ等）へ差し替え。
B. カード一覧で CLS が出る
width/height を付与して骨格を固定。広告枠はプレースホルダで高さ確保。
C. OGP/サムネで文字が欠ける
1200×630・四辺広めの安全域・7語以内・高コントラストで再出力。 → サムネ一括生成
5. よくある落とし穴（回避策）
- 解像度を先に落とさない：品質だけ上げても容量は減らない。まず画素数（解像度）を根本カット。
- sizes を現実より大きく書く：過剰な解像度が選ばれて帯域浪費。実表示幅に合わせる。
- 寸法なし img による CLS：
width/height必須。広告は固定高のプレースホルダ。
6. 公開前チェックリスト（10項目）
- 本文=横 1200–1600px ／ 一覧=横 600–800px に統一したか。
- 写真=WebP、互換=JPEG、ロゴ=PNG の原則を守ったか。
- 品質は WebP 80% 起点で ±5% だけ動かしたか。
- ヒーローは優先ロード、一覧は遅延にしたか。
- すべての img に width/height を付けたか。
- srcset は 2～3段階（640/960/1280 等）で過剰にしすぎていないか。
- sizes は実表示幅の現実に寄せたか（例：800px / 92vw 等）。
- OGP は 1200×630・安全域広め・高コントラストか。
- CDN のキャッシュとファイル名ハッシュの運用ができているか。
- 本番の CWV（field data）で劣化がないか。