picture要素

picture要素はHTML5から新たに追加された要素です。
ユーザーの閲覧環境に応じて最適な画像を表示させることができます。

読み込まれるソースセットのコンテナとして機能し、picture要素自身は意味を持たずソースセットの中で表示されている子要素を表します。

使用例

後述するコード断片は、次に列挙するリストの順にリソースの埋め込みを試みる使用例です。

1. 画面幅が1280px以上だった場合「dummy-c.png」を表示する
2. 画面幅が768px以上だった場合「dummy-b.png」を表示する
3. 画面幅が640px以上だった場合「dummy-a.png」を表示する
4. いずれにも該当しなかった場合「dummy.png」を表示する
5. dummy.pngが読み込めなかった場合、代替テキストを表示する

<picture>

<source srcset="dummy-c.png" media="(min-width: 1280px)">

<source srcset="dummy-b.png" media="(min-width: 768px)">

<source srcset="dummy-a.png" media="(min-width: 640px)">

<img src="dummy.png" alt="代替テキスト">

</picture>

後述するコード断片は、次に列挙するリストの順にリソースの埋め込みを試みる使用例です。

1. svgファイルの埋め込みを試みる
2. svgファイルに対応していない環境だった場合、pngファイルの埋め込みを試みる
3. pngファイルに対応していない環境だった場合、gifファイルの埋め込みを試みる
4. gifファイルに対応していない環境、またはdummy.gifが読み込めなかった場合、代替テキストを表示する

<picture>

<source srcset="dummy.svg" type="image/svg+xml">

<source srcset="dummy.png" type="image/png">

<img src="dummy.gif" alt="代替テキスト">

</picture>

使用可能な属性

• すべてのグローバル属性

コンテンツカテゴリ

• フローコンテンツ
• フレージングコンテンツ
• エンベディッドコンテンツ

子要素にしていい要素の種類

• 1つ以上のsource要素、その後に来る1つのimg要素
  • 任意でスクリプトサポート要素が混在できます。

親要素にしていい要素の種類

• エンベディッドコンテンツが期待されているすべての要素

仕様書と策定状況