<picture>: 画像要素

HTML の <picture> 要素は、0個以上の <source> 要素と一つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供します。

ブラウザーは複数の <source> 子要素を検討し、その中から最も適切なものを選択します。適切なものがない場合や、ブラウザーが <picture> 要素に対応してない場合、 <img> 要素の src 属性で指定された URL が選択されます。選択された画像は <img> 要素が占有する領域に表示されます。

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

<img> 要素は2つの役割を担います。

画像の寸法やその他の属性を記述します。
<source> 要素で利用可能な画像を提供できなかった場合の代替策を提供します。

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

アートディレクション 様々な media の条件に合わせて画像を切り抜いたり変更したりする (例えば、小さな画面では、詳細すぎない、より簡単な版の画像を読み込むなど)。
特定の形式に対応していないブラウザーに対して、代替画像形式を提供する。
見る人の画面に最も適合する画像を読み込むことで、通信帯域を節約しページの読み込みをより速くする。

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

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

属性

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

使用上のメモ

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

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

例

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

media 属性

media 属性はユーザーエージェントがそれぞれの <source> 要素を評価するメディア条件を (メディアクエリと同様に) 指定します。

メディア条件が false と評価された場合、 <source> 要素はスキップされ、 <picture> 内の次の要素が評価されます。

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

srcset 属性

srcset 属性は、寸法に基づいた利用可能な画像のリストを提供するために使用します。

これは画像記述子のカンマ区切りのリストで構成されます。それぞれの画像記述子は画像の URL と、次のいずれかで構成されます。

幅記述子 は w に続けて書きます (300w など)
または
ピクセル密度記述子 は x に続けて書き (2x など)、高 DPI 画面の高解像度画像を提供します。

<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png" alt="logo">
</picture>

type 属性

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

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser