画像最適化トラブルシュート集【2025年版】：ぼやけ・切り抜き・色ズレ・遅いを一掃

症状別・最短チェックリスト

1) ぼやけ（解像度不足）

• 原因: sizes が実表示より小さく、低解像を配信している
• 解法: ビューポート幅に応じた sizes を正しく設定

<Image
  src="/hero.jpg"
  alt=""
  width={1280}
  height={720}
  priority
  sizes="(max-width: 768px) 100vw, 1280px"
/> 

2) 切り抜きが崩れる

• 原因: CSSで伸縮（width:100% height:auto 以外）やobject-fitの指定ミス
• 解法: レイアウトはコンテナで確定し、object-fit を意図通り設定

.thumb { width: 100%; height: auto; object-fit: cover; }

3) 色ズレ/ディザ（AVIF/WebP/ICC）

• 原因: ICCプロファイル非対応、P3→sRGB変換、AVIFの低品質
• 解法: sRGBへ変換、イラストは品質上げ or WebP/PNG、カラープロファイルを明示

4) EXIF Orientation（向きがおかしい）

• 対策: アップロード時にEXIFをstrip、正規化して保存（CDNで自動も可）

5) 遅い（LCP悪化）

• ヒーローは priority、preload（自動）
• formats: ['image/avif','image/webp'] で次世代化
• 解像度は必要最小（初期ビュー合計≲250KB目安）

// next.config.js
module.exports = { images: { formats: ['image/avif','image/webp'] } };

6) サードパーティ/OGP生成の注意

• OGPの自動生成はキャッシュを長めに。破損時はstale-if-errorでフォールバック
• CDNのauto=formatはイラストにバンディングを生むことがある → 品質を上げる/PNG固定

7) デバッグ手順（再現→原因→修正）

1. DevToolsで要素→Rendered size/Intrinsic size を確認
2. sizes/srcset を調整、priority の適用有無を比較
3. カラープロファイル/EXIFをImageMagick等で確認

まとめ

根本は「適切な解像度・正しいレイアウト・正しいフォーマット」。まずヒーローを直し、次にCDNとキャッシュで横展開しましょう。