responsive-images

レスポンシブ画像

ステータス：本番環境対応 ✅ 最終更新日：2026-01-14 標準：ウェブパフォーマンスのベストプラクティス、Core Web Vitals

---

クイックスタート

基本的なレスポンシブ画像

<img
  src="/images/hero-800.jpg"
  srcset="
    /images/hero-400.jpg 400w,
    /images/hero-800.jpg 800w,
    /images/hero-1200.jpg 1200w,
    /images/hero-1600.jpg 1600w
  "
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 90vw,
         1200px"
  alt="Hero image description"
  width="1200"
  height="675"
  loading="lazy"
/>

ヒーロー画像（LCP）

<img
  src="/images/hero-1200.jpg"
  srcset="
    /images/hero-800.jpg 800w,
    /images/hero-1200.jpg 1200w,
    /images/hero-1600.jpg 1600w
  "
  sizes="100vw"
  alt="Hero image"
  width="1600"
  height="900"
  loading="eager"
  fetchpriority="high"
/>

---

設定

推奨画像サイズ

用途	生成する幅	Sizes 属性
全幅のヒーロー画像	800w, 1200w, 1600w, 2400w	100vw
コンテンツ幅	400w, 800w, 1200w	(max-width: 768px) 100vw, 800px
グリッドカード（3列）	300w, 600w, 900w	(max-width: 768px) 100vw, 33vw
サイドバーのサムネイル	150w, 300w	150px

遅延読み込みのルール

画像の位置	loading	fetchpriority	理由
ヒーロー画像／LCP	eager	high	LCP を最適化し、ダウンロードを優先します
ファーストビュー内（LCP 以外）	eager	省略	通常どおり読み込みます
ファーストビュー外	lazy	省略	ビューポートに近づくまで読み込みを遅らせます
画面外のカルーセル	lazy	省略	操作があるまで読み込みを遅らせます

---

よく使われるパターン

全幅のレスポンシブ画像

<img
  src="/images/banner-1200.jpg"
  srcset="
    /images/banner-600.jpg 600w,
    /images/banner-1200.jpg 1200w,
    /images/banner-1800.jpg 1800w,
    /images/banner-2400.jpg 2400w
  "
  sizes="100vw"
  alt="Full width banner"
  width="2400"
  height="800"
  loading="lazy"
  class="w-full h-auto"
/>

グリッドカードの画像（3列）

<img
  src="/images/card-600.jpg"
  srcset="
    /images/card-300.jpg 300w,
    /images/card-600.jpg 600w,
    /images/card-900.jpg 900w
  "
  sizes="(max-width: 768px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  alt="Card image"
  width="900"
  height="600"
  loading="lazy"
  class="w-full h-auto"
/>

固定アスペクト比のコンテナー

<div class="aspect-[16/9] overflow-hidden">
  <img
    src="/images/video-thumbnail-800.jpg"
    srcset="
      /images/video-thumbnail-400.jpg 400w,
      /images/video-thumbnail-800.jpg 800w,
      /images/video-thumbnail-1200.jpg 1200w
    "
    sizes="(max-width: 768px) 100vw, 800px"
    alt="Video thumbnail"
    width="800"
    height="450"
    loading="lazy"
    class="w-full h-full object-cover"
  />
</div>

モダンな形式（WebP + AVIF）

<picture>
  <source
    srcset="
      /images/hero-800.avif 800w,
      /images/hero-1200.avif 1200w,
      /images/hero-1600.avif 1600w
    "
    sizes="100vw"
    type="image/avif"
  />
  <source
    srcset="
      /images/hero-800.webp 800w,
      /images/hero-1200.webp 1200w,
      /images/hero-1600.webp 1600w
    "
    sizes="100vw"
    type="image/webp"
  />
  <img
    src="/images/hero-1200.jpg"
    srcset="
      /images/hero-800.jpg 800w,
      /images/hero-1200.jpg 1200w,
      /images/hero-1600.jpg 1600w
    "
    sizes="100vw"
    alt="Hero image"
    width="1600"
    height="900"
    loading="eager"
    fetchpriority="high"
  />
</picture>

アートディレクション（異なるトリミング）

<picture>
  <source
    media="(max-width: 640px)"
    srcset="
      /images/product-portrait-400.jpg 400w,
      /images/product-portrait-800.jpg 800w
    "
    sizes="100vw"
  />
  <source
    media="(min-width: 641px)"
    srcset="
      /images/product-landscape-800.jpg 800w,
      /images/product-landscape-1200.jpg 1200w,
      /images/product-landscape-1600.jpg 1600w
    "
    sizes="(max-width: 1024px) 90vw, 1200px"
  />
  <img
    src="/images/product-landscape-1200.jpg"
    alt="Product image"
    width="1200"
    height="675"
    loading="lazy"
  />
</picture>

---

エラーの防止

width と height を必ず指定する

問題：画像の読み込み時にレイアウトシフトが発生する（CLS スコアが低下します）

<img src="/image.jpg" alt="Image" loading="lazy" />


<img
  src="/image.jpg"
  alt="Image"
  width="800"
  height="600"
  loading="lazy"
/>

出典：Web.dev - CLS の最適化

LCP 画像を遅延読み込みしない

問題：LCP が遅れ、Core Web Vitals のスコアが低下します

<img
  src="/hero.jpg"
  alt="Hero"
  loading="lazy"
/>


<img
  src="/hero.jpg"
  alt="Hero"
  loading="eager"
  fetchpriority="high"
/>

出典：Web.dev - LCP の最適化

密度記述子（x）ではなく、幅記述子（w）を使う

問題：ブラウザーがビューポートに適した画像を選べません

<img
  src="/image.jpg"
  srcset="/image.jpg 1x, /[email protected] 2x"
  alt="Image"
/>


<img
  src="/image-800.jpg"
  srcset="
    /image-400.jpg 400w,
    /image-800.jpg 800w,
    /image-1200.jpg 1200w
  "
  sizes="(max-width: 768px) 100vw, 800px"
  alt="Image"
  width="800"
  height="600"
/>

例外：密度記述子は、ロゴなどの固定サイズ画像に適しています。

alt テキストを必ず指定する

問題：アクセシビリティ、SEO、スクリーンリーダーへの対応に問題が生じます

<img src="/product.jpg" />


<img src="/product.jpg" alt="Red leather messenger bag with brass buckles" />


<img src="/decorative-line.svg" alt="" role="presentation" />

object-fit とアスペクト比

問題：コンテナーのサイズが画像の寸法と異なる場合、画像が引き伸ばされたり、つぶれたりします

<div class="w-full h-64">
  <img src="/image.jpg" alt="Image" class="w-full h-full" />
</div>


<div class="w-full h-64">
  <img
    src="/image.jpg"
    alt="Image"
    class="w-full h-full object-cover"
  />
</div>

---

クイックリファレンス

Sizes 属性のパターン

sizes="100vw"


sizes="(max-width: 768px) 100vw, 800px"


sizes="300px"


sizes="(max-width: 768px) 100vw, 50vw"


sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"


sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px"

よく使われるアスペクト比

比率	CSS	用途
16:9	aspect-[16/9]	動画のサムネイル、ヒーロー画像
4:3	aspect-[4/3]	標準的な写真
3:2	aspect-[3/2]	デジタル一眼レフカメラの写真
1:1	aspect-square	プロフィール写真、Instagram 風の画像
21:9	aspect-[21/9]	ウルトラワイドバナー

object-fit の値

値	動作	用途
cover	コンテナーを埋め、端をトリミングします	カード画像、背景
contain	すべての内容を保持して収めます	ロゴ、商品写真
fill	引き伸ばして埋めます	必要な場合を除き、使用を避けてください
scale-down	contain と元のサイズのうち小さい方を適用します	サイズが混在するコンテンツ

形式の比較

形式	品質	ファイルサイズ	ブラウザーのサポート	用途
JPEG	良好	中	100%	写真、複雑な画像
PNG	可逆圧縮	大	100%	ロゴ、透過画像
WebP	優秀	小	97%+	モダンブラウザー、写真
AVIF	優秀	最小	90%+	最新の環境、フォールバックが必要

推奨戦略：<picture> を使って、AVIF → WebP → JPEG の順にフォールバックします

---

リソース

• Web.dev：レスポンシブ画像
• MDN：レスポンシブ画像
• Web.dev：モダンな形式で画像を配信する
• Web.dev：累積レイアウトシフトの最適化
• Cloudflare Images のドキュメント

---

トークン効率：srcset/sizes の構文を試行錯誤せずに済むため、約70%削減 防止できるエラー：上記で説明した、レスポンシブ画像に関するよくある問題6件