srcset and sizes
HTMLImageElement の srcset プロパティは、文字列で 1 つ以上の画像候補文字列を表します。それぞれはカンマ (,) で区切り、指定された状況下で使用する画像リソースを指定します。
それぞれの画像候補文字列は、画像 URL と、その候補が src プロパティで指定した画像の代わりに使用されるべき条件を示す、幅またはピクセル密度の記述子をオプションとして含んでいます。
srcset プロパティは sizes プロパティとともに、レスポンシブウェブサイトを設計する上で重要な要素です。これらのプロパティを併用することにより、描画状況に適した画像を使用するページを作成できます。
メモ: srcset 属性が幅記述子を使用した場合、sizes 属性も指定する必要があります。さもないと srcset 自体が無視されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 34 | 12 | 38 | 8 | 34 | 8 | |
| HTML 属性 | ||||||
sizes | 38 | 12 | 38 | 9.1 | 38 | 9.3 |
srcset | 34 | 12 | 38 | 8 | 34 | 8 |
sizes | 38 | 13 | 38 | 9.1 | 38 | 9.3 |
srcset | 38 | 13 | 38 | 9.1 | 38 | 9.3 |
| DOM API | ||||||
| HTMLImageElement の sizes プロパティによって、メディア条件のリストごとに、画像のレイアウト幅を指定することができます。これにより、様々なメディア条件に合わせて文書の状態が変化したときに、異なる画像（方向やアスペクト比の異なる画像も含む）を自動的に選択する機能が提供されます。 | 38 | 13 | 38 | 9.1 | 38 | 9.3 |
| HTMLSourceElement インターフェースの sizes プロパティは、リソースが適用されるブレークポイント間のサイズを表す、1つ以上のサイズのリストを表す文字列です。 | 38 | 13 | 38 | 10.1 | 38 | 10.3 |
| HTMLSourceElement インターフェースの srcset プロパティは、画像の候補をカンマ区切りで並べた文字列です。 | 38 | 13 | 38 | 10.1 | 38 | 10.3 |
- このバージョンで機能が削除されました (38)
- 解像度の切り替えのための構文のサブセット（`x`記述子を使用）をサポートするが、`sizes`で使用できる完全な構文（`w`記述子を使用）はサポートしない。
- このバージョンで機能が削除されました (38)
- 解像度の切り替えのための構文のサブセット（`x`記述子を使用）をサポートするが、`sizes`で使用できる完全な構文（`w`記述子を使用）はサポートしない。
- このバージョンで機能が削除されました (38)
- 解像度の切り替えのための構文のサブセット（`x`記述子を使用）をサポートするが、`sizes`で使用できる完全な構文（`w`記述子を使用）はサポートしない。
- このバージョンで機能が削除されました (38)
- 解像度の切り替えのための構文のサブセット（`x`記述子を使用）をサポートするが、`sizes`で使用できる完全な構文（`w`記述子を使用）はサポートしない。
- sizes`属性はSafari 9.1からサポートされています。
- sizes`属性はiOS 9.1のSafariからサポートされています。
- srcset`属性はSafari 9.1からサポートされています。
- srcset`属性はiOS 9.1のSafariからサポートされています。
基本構文
<!-- resolution-based --> <img src="photo-1x.jpg" srcset="photo-1x.jpg 1x, photo-2x.jpg 2x" alt="responsive image"> <!-- viewport width-based --> <img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="responsive image"> <!ライブデモ
Responsive image candidates
Pair srcset with a normal img fallback and let the browser choose a candidate.
Card with responsive thumbnail
Use srcset inside a content card so the preview scales without changing semantics.
実務での使いどころ
-
srcset and sizes の活用
HTMLImageElement の srcset プロパティは、文字列で 1 つ以上の画像候補文字列を表します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。