HTML Academy · レッスン

srcsetとsizesによるレスポンシブ画像

Q: 「srcsetとsizesによるレスポンシブ画像」で何を学びますか？

異なる画面密度に適したサイズの画像を配信します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

異なる画面密度に適したサイズの画像を配信します。

「srcsetとsizesによるレスポンシブ画像」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

単一画像の問題点

すべてのデバイスに1枚の大きな画像を配信すると、小さな画面では帯域幅が無駄になります。

画面幅390pxのスマートフォンに2400pxの画像は必要ない
4Kモニターには96dpiより高解像度の画像が適している
レスポンシブ画像を使用すると、画面に適した画像を適切に配信できる

srcset属性

srcsetを使用すると、幅とともに複数の画像ソースを指定できます。

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

ピクセル密度記述子

サイズが固定された画像を異なる解像度で用意する場合は、1x、2x、3xの記述子を使用します。

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

sizes属性

sizesを使用すると、ビューポートのサイズごとに画像が表示される幅をブラウザーに伝えられます。

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

ブラウザーが画像を選択する仕組み

ブラウザーは、sizesの値 × デバイスピクセル比を計算して、srcsetから画像を選択します。

ビューポート600px、DPR 2倍、size=100vw → 1200pxの画像が必要 → 1600wを選択
ビューポート1200px、DPR 1倍、size=50vw → 600pxの画像が必要 → 800wを選択
一度読み込まれると、ブラウザーはキャッシュし、再読み込みしない場合がある

sizesのデフォルト値

sizesがない場合、ブラウザーは画像がビューポート幅いっぱい（100vw）に表示されると仮定します。

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

srcsetの幅記述子とx記述子

srcsetには2つのモードがあります。

幅記述子（w） — sizesと組み合わせる：レイアウトに応じて柔軟に選択する
ピクセル密度記述子（x） — 複数の解像度を持つ固定サイズの画像に使用する

ほとんどのレスポンシブ画像にはw記述子を使用します。アイコン、ロゴ、固定サイズの要素にはxを使用します。

srcset用ファイルを生成する

レスポンシブ画像のバリエーションを生成するツール：

Sharp (Node.js) — プログラムによる画像のリサイズ
Squoosh — ブラウザー上で動作し、視覚的に比較できる
Cloudinary / Imgix — URLベースでオンデマンドにリサイズする
Webpack / Vite plugins — ビルド時に生成する

WebPとフォールバックを組み合わせたsrcset

形式のフォールバックには、srcsetと<picture>を組み合わせます。

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

アートディレクションと解像度切り替え

レスポンシブ画像に関する問題には2つの種類があります。

解像度切り替え — 同じ画像で解像度だけが異なる場合 → srcset + sizesを使用する
アートディレクション — 画面ごとに異なるトリミングや構図にする場合 → <source media>を指定した<picture>を使用する

レスポンシブ画像をテストする

srcsetが機能していることを確認する方法：

DevToolsを開く → Networkタブ → Imagesでフィルターする
デバイスのエミュレーションを異なるビューポートサイズとDPRに設定する
再読み込みし、ブラウザーがどのファイルをリクエストしたか確認する
次も確認する：Lighthouse → Performance → Properly sized images監査

srcsetのブラウザー対応

srcsetのブラウザー対応は非常に優れています。

すべてのモダンブラウザー（Chrome、Firefox、Safari、Edge）に対応している
srcのフォールバックにより、古いブラウザーにも対応できる
本番環境で使用するためのポリフィルは不要

確認問題

sizes属性はブラウザーに何を伝えますか。

まとめ：srcsetとsizes

レスポンシブ画像の要点：

srcset — 画像本来の幅またはピクセル密度とともに指定した画像ファイルの一覧
sizes — 画像が表示される幅を示すメディア条件
ブラウザーは「sizesの値 × デバイスのDPR」で最適な画像を選択する
流動的な画像には幅記述子（w）、固定サイズの要素にはxを使用する
必ずフォールバックとしてsrcを指定する

よくある質問

「srcsetとsizesによるレスポンシブ画像」レッスンは無料ですか？

はい。「srcsetとsizesによるレスポンシブ画像」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「srcsetとsizesによるレスポンシブ画像」で何を学びますか？

異なる画面密度に適したサイズの画像を配信します。ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「srcsetとsizesによるレスポンシブ画像」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る