MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

<picture>

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

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


関連項目

ドキュメントのタグと貢献者

 このページの貢献者: hamasaki, YuichiNukiyama
 最終更新者: hamasaki,