<picture>要素

<picture>要素の定義

英語で「絵画」や「写真」を表す、”picture”より。
HTML文書では、様々な画面や端末の条件に応じた画像を提供するために使用します。
通常は、0個以上の <source> 要素と <img> 要素を含み、ブラウザ側でその中から適切なものを選択して表示します。
<source> 要素の中に適切なものが無かった場合や、ブラウザが <picture> 要素に対応していない場合は、<img> 要素のsrc属性に指定した画像が表示されます。

子要素として使用できるもの

0個以上の <source> 要素、その後に1個の <img> 要素、任意でスクリプト対応要素と混在。

親要素として使えるもの

埋め込みコンテンツを受け入れるすべての要素。

許可されているARIAロール

なし

DOMインターフェース

HTMLPictureElement

属性

グローバル属性のみが指定できます。

サンプル

See the Pen 画像切り替え by Masahiko Iwakiri (@m-iwakiri) on CodePen.