HTML <picture> タグ

定義と使用方法

<picture> タグは、web開発者が指定する際に画像リソースをより柔軟にするために使用されます。

<picture> 要素は、リスポンシブデザインでのアートディレクションの最も一般的な用途です。ブラウザのビューポートをよりよく埋めるために、画像を複数設計することができます。画像はビューポートの幅に応じて比例的に拡大または縮小されるのではなく、

<picture> 要素は2つのタグを含んでいます：1つまたは複数 <source>タグ および <img>タグ。

ブラウザは、現在のビューポートの幅に一致する最初の<source>要素を検索し、正しい画像（srcset属性で指定）を表示します。<img>要素は <picture> 要素の最後の子要素は必須で、sourceタグが一致しない場合の代替オプションとして使用されます。

ヒント：<picture> 要素の動作は、 <video> および <audio> 似たもの。異なるソースを設定できますが、最初の好みに適したソースが使用されます。

も参照してください：

HTML 教程：HTML <picture> 要素

CSS 教程：CSS レスポンシブデザイン - イメージ

例

<picture> タグの使用方法：

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

実際に試してみる

グローバル属性

<picture> タグは以下のサポートもしています HTMLでのグローバル属性。

イベント属性

<picture> タグは以下のサポートもしています HTMLでのイベント属性。

ブラウザのサポート

表の数字は、そのタグを最初に完全にサポートしたブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0