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要素
    • 任意でスクリプトサポート要素が混在できます。

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

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

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2017年9月5日

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報