<picture>: 画像要素

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

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

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

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

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

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

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

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

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

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 属性は、寸法に基づいた利用可能な画像のリストを提供するために使用します。

これは画像記述子のカンマ区切りのリストで構成されます。それぞれの画像記述子は画像の 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 属性は、 <source> 要素の srcset 属性で与えられるリソース URL の MIME タイプを指定します。ユーザーエージェントが指定されたタイプに対応していない場合、その <source> 要素はスキップされます。

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

• <img> 要素
• <source> 要素
• フレーム内の画像の位置や寸法の設定: object-position 及び object-fit
• 画像ファイルの Image file type and format guide