HTML の <picture> 要素は、0個以上の <source> 要素と一つの <img> 要素を内包し、異なる表示機器の条件に応じた画像を提供します。ブラウザーは複数の <source> 子要素を検討して、最もふさわしい一つを選択します。 <source> 要素に適切なものがなければ、 <img> 要素の src 属性で指定された値が選択されます。選択された画像は <img> 要素が占有する空間に表示されます。

最適な画像を選択するために、ユーザーエージェントはそれぞれの soruce 要素の srcset, media, type 属性を調べて、現在のページのレイアウトや、表示機器の性質などの条件に最も合う画像を検討します。

よくある使い方としては、高解像度のディスプレイを使用している時に、高解像度に対応した画像を提供し、古いブラウザーで新しい形式に対応していない場合はフォールバック用の画像を提供するものがあります。

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ
許可されている内容 0個以上の <source> 要素、その後に1個の <img> 要素、任意でスクリプト対応要素と混在。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 埋め込みコンテンツを含むことができるすべての要素。
許可されている ARIA ロール なし
DOM インターフェイス HTMLPictureElement

属性

この要素はグローバル属性のみを持ちます。

使用上のメモ

object-position プロパティを使用して、要素の枠内で画像の位置を調整したり、 object-fit プロパティを使用して、枠内に合わせるための画像の寸法の調整方法を制御したりすることができます。

これらの例は <picture> の中で使用されたとき、 <source> 要素の様々な属性による表示する画像の選択への影響を示します。

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>

type 属性

type 属性は、 <source> 要素の srcset 属性で与えられるリソースの MIME タイプを指定します。ユーザーエージェントが与えられたタイプに対応していない場合、その <source> 要素はスキップされます。

​<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

仕様書

仕様書 状態 備考
HTML Living Standard
<picture> の定義
現行の標準 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応3813

38

32 — 521

なし259.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応3838 あり

38

32 — 521

259.3 あり

1. From version 32 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連項目

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

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