<picture>: 画像要素

HTML の <picture> 要素は、0個以上の <source> 要素と一つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供します。ブラウザーは複数の <source> 子要素を検討し、その中から最も適切なものを選択します。適切なものがない場合や、ブラウザーが <picture> 要素に対応してない場合、 <img> 要素の src 属性で指定された URL が選択されます。選択された画像は <img> 要素が占有する領域に表示されます。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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

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

• アートディレクション — 様々な media の条件に合わせて画像を切り抜いたり変更したりする (例えば、小さな画面では、詳細すぎないより簡単な版の画像を読み込むなど)
• 特定の形式がすべてのブラウザーで対応しているわけではない場合、異なる画像形式で提供する
• 見る人の画面に基づいて、正しい寸法や大きさを持つ適切な版の画像を読み込むことで、ページの読み込みをより速くする

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

属性

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

使用上のメモ

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

例

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

media 属性

media 属性はユーザーエージェントがそれぞれの <source> 要素を評価するメディア条件を (メディアクエリと同様に) 指定します。メディア条件が false と評価された場合、 <source> 要素はスキップされます。

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

type 属性

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