HTML の <picture> 要素は、0個以上の <source> 要素と一つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供します。ブラウザーは複数の <source> 子要素を検討し、その中から最も適切なものを選択します。適切なものがなければ、 <img> 要素の src 属性で指定された URL が選択されます。選択された画像は <img> 要素が占有する空間に表示されます。

どの URL を読み込むかを選択するには、ユーザーエージェントはそれぞれの <source> 要素の srcset, media, type 属性を調べて、現在のページのレイアウトや、表示端末の特性などの条件に最も合う画像を検討します。

<picture> をよく使う場面は以下の通りです。

  • アートディレクション — 様々な media の条件に合わせて画像を切り抜いたり変更したりする
  • 特定の形式がすべてのブラウザーで対応しているわけではない場合、異なる画像形式で提供する

DPI の高い (高解像度の) ディスプレイのために高解像度版の画像を提供する場合は、代わりに srcset 属性を <img> に使用してください。これによってブラウザーはデータ節約モードでは低解像度版を選択することができ、 media 条件を明示的に書かなくてもよくなります。

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

属性

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

使用上のメモ

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

メモ: これらのプロパティは子の <img> 要素に用い、 <picture> 要素には用いないでください。

これらの例は、 <source> 要素の様々な属性がどのように <picture> 内の画像の選択を変更するかを示しています。

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

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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
pictureChrome 完全対応 38Edge 完全対応 13Firefox 完全対応 38
完全対応 38
未対応 32 — 52
無効
無効 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.
IE 未対応 なしOpera 完全対応 25Safari 完全対応 9.1WebView Android 完全対応 38Chrome Android 完全対応 38Firefox Android 完全対応 38
完全対応 38
未対応 32 — 52
無効
無効 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.
Opera Android 完全対応 25Safari iOS 完全対応 9.3Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報