picture と srcset の使い方｜sizes・レスポンシブ画像の書き方

picture と srcset の使い方とは

画面幅や解像度が違う端末すべてに同じ大きな画像を配ると、スマホで無駄な通信が発生します。HTMLの srcset・sizes 属性と <picture> 要素は、ブラウザに複数の画像候補を渡し、状況に合うものを選ばせる仕組みです。

MDN は、画像は CSS や JavaScript の解析より先に読み込みが始まるため、JSで後から差し替える方法は適さず、HTMLの属性で表現する必要があると説明しています。ここでは3つの技法を使い分けます。

基本（構文・仕組み）

技法 目的 使う記法
解像度の切り替え 同じ表示サイズで、高解像度画面に高精細な画像 srcset の x 記述子
サイズの切り替え 画面幅に応じて、軽い画像と大きな画像を選ぶ srcset の w 記述子 + sizes
アートディレクション 画面幅で画像の切り取りや構図を変える <picture> + <source media>

ポイントは次のとおりです。

  • w 記述子は「その画像ファイルの実際の横幅(px)」です。sizes は「その画像が画面上でどの幅で表示されるか」を条件つきで示します。ブラウザはこの2つと端末の画素密度から、最適な候補を選びます。
  • sizes に使える長さは px や vw などで、割合（%）は使えません（MDN）。
  • x 記述子では sizes は不要です。
  • <picture> の中の <img> は必須で、src・alt を持ちます。source の条件に合わなかった場合と、非対応ブラウザのフォールバックを担います。
  • 画像形式（WebP や AVIF）を切り替えるときは <source type="image/avif"> のように type を使います。

サンプルコード（実行結果つき）

サイズの切り替え（w 記述子）です。

<img
  srcset="s480.svg 480w, s800.svg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="s800.svg" width="800" height="400" alt="説明文">

解像度の切り替え（x 記述子）です。

<img srcset="logo-1x.png, logo-2x.png 2x" src="logo-2x.png" width="160" height="40" alt="ロゴ">

アートディレクション（スマホでは正方形に切り抜いた画像）です。

<picture>
  <source media="(max-width: 600px)" srcset="sq.svg">
  <img src="wide.svg" width="800" height="400" alt="説明文">
</picture>

形式の出し分けの例です。

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" width="800" height="533" alt="説明文">
</picture>

動作確認（検証環境と結果）

  • 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（Chromium系、render.ps1）。
  • 確認方法: 色と名前を変えた4つのSVGファイル(sq / wide / s480 / s800)を用意し、currentSrc で実際に選ばれた画像を取得。
  • 結果（表示幅 約500px、max-width:600px に一致）: picture は sq.svg、srcset + sizes は s480.svg が選ばれました。
  • 結果（表示幅 約1200px）: picture は wide.svg、srcset + sizes は s800.svg が選ばれました。
  • 追加確認（表示幅 約500px）: 同じ srcset で sizes を省略すると、s480.svg ではなく s800.svg が選ばれました（sizes の既定値 100vw ≒ 496px に対し、480w では足りないと判断されたため）。
  • 注意: 実際の画像選択はブラウザの判断で、画素密度や通信状況でも変わります。本検証は等倍画面での結果です。AVIF/WebP の type 出し分けは実ファイルを用意しておらず未検証です。
  • ログ: C:Tempks2techtestspicture-srcset.md。

picture と srcset の使い方の注意点

  • width と height 属性を付けると、画像の読み込み前に表示領域を確保でき、レイアウトのずれ（CLS）を減らせます。CSSで max-width: 100%; height: auto; と併用します。
  • 画像の内容が同じでサイズ違いなら srcset + sizes、構図が変わるなら picture、と使い分けます。迷うときは srcset を先に検討します。
  • alt は img に書きます。source には alt はありません。
  • 画像の候補を増やしすぎると、制作・管理コストが膨らみます。幅 480・800・1200 程度の少数から始めます。

picture と srcset の使い方でよくあるミス

  • sizes を省略して、w 記述子だけを書く（表示幅100vwとみなされ、意図より大きな画像が選ばれやすい）。
  • picture 内の img を書き忘れて、画像が出ない。
  • w 記述子に実際と違う幅を書く。
  • source の順序を逆にして、広い条件が先に一致してしまう（上から順に評価されます）。
  • media 条件に min-width と max-width を混在させて、重複や隙間ができる。

ブラウザ対応・バージョン

srcset・sizes・picture は現行の主要ブラウザで利用できます。非対応の古いブラウザは src の画像を表示するため、フォールバックの src は必ず指定します。AVIF など新しい画像形式は対応状況が異なるため、最新の対応は can I use や MDN で確認してください。

picture と srcset の使い方のチェックリスト

  • [ ] img に src・alt・width・height がある。
  • [ ] w 記述子を使うときは sizes を併記している。
  • [ ] w の値が実際の画像幅と一致している。
  • [ ] 構図を変える場合だけ picture を使っている。
  • [ ] 開発者ツールのネットワークで、実際に読み込まれたファイルを確認した。

picture と srcset の使い方のFAQ（よくある質問）

Q. 背景画像でも srcset は使えますか。
A. CSSの背景には使えず、image-set() やメディアクエリで切り替えます。

Q. sizes の値はどう決めればよいですか。
A. レイアウトで画像が実際に占める幅を、画面幅の条件ごとに書きます。たとえば「600px以下は画面いっぱい(100vw)、それ以上は800px」といった具合です。

Q. 遅延読み込みはどうしますか。
A. loading="lazy" を使えますが、ファーストビューの画像には付けないのが一般的です。この記事では実際の動作を確認していません。

筆者の見解（picture と srcset の使い方）

私見では、レスポンシブ画像で最も効果が大きいのは、srcset と sizes を正しく書いて小さな画面に軽い画像を配ることだと考えます。picture は構図を変える明確な理由があるときだけに絞ると、HTMLが読みやすく保てます。sizes は書き方が難しいので、まずは設計通りの幅を一度計算して書き、開発者ツールで選ばれる画像を確認する習慣をおすすめします。

picture と srcset の使い方の関連項目

出典（一次情報）

タイトルとURLをコピーしました