これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
HTML <picture> 要素は、特定の<img>のための複数の<source>を含むことができるコンテナです。ブラウザは、現在のページレイアウト（画像が表示されるボックスの制約）と（通常やhiDPIデバイスのような）表示のためのデバイスに応じて最適な source を選択します。
使用コンテキスト
- コンテンツカテゴリ フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ
- 許可されたコンテンツ0個以上の
<source>要素とオプションとしてscript-supporting要素と混合された1つの<img>要素 - タグの省略 不可。開始と終了タグの両方が必要。
- 許可された親要素埋め込みコンテンツを受け入れるすべての要素
- DOMインターフェイス
HTMLPictureElement
属性
この要素はグローバル属性のみを持ちます。
例1: media属性の使用
media属性でユーザーエージェントが <source>要素の選択をするためのメディアクエリを設定できます。メディアクエリがfalseと評価した場合、その <source> 要素はスキップされます。
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture>
例2: type属性の使用
type属性は、<source> 要素のsrcset属性で与えられるリソースのMIMEタイプを指定します。ユーザーエージェントが与えられたtypeをサポートしてない場合、その <source> 要素はスキップされます。
<picture> <source srcset="mdn-logo.svg" type="image/svg+xml"> <img src="mdn-logo.png" alt="MDN"> </picture>
仕様
| 仕様 | 状態 | コメント |
|---|---|---|
| WHATWG HTML Living Standard <picture> の定義 |
現行の標準 | 初期定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 38 | 38 (38) | Edge 13 | 25 | 9.1 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 38 | 38.0 (38) | 未サポート | 25 | iOS 9.3 |
関連項目
<img>要素