HTML の <picture>
要素は、0個以上の <source>
要素と一つの <img>
要素を含み、様々な画面や端末の条件に応じた画像を提供します。
ブラウザーは複数の <source>
子要素を検討し、その中から最も適切なものを選択します。適切なものがない場合や、ブラウザーが <picture>
要素に対応してない場合、 <img>
要素の src
属性で指定された URL が選択されます。選択された画像は <img>
要素が占有する領域に表示されます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
どの 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
関連情報
<img>
要素<source>
要素- フレーム内の画像の位置や寸法の設定:
object-position
及びobject-fit
- 画像ファイルのImage file type and format guide