picture タグエレメント

　picture タグエレメントは、レスポンシブ web デザインに対応した画像表示を可能する HTML タグエレメントです。 <img> エレメントだけよりも柔軟にイメージリソースを定義できます。

　例えばデバイスによっては画面の解像度や大きさが違いますが、その違いによって画像リソースを替えることや変化させることができます。

<picture>
	<source srcset="example1500.jpg" media="(min-width: 1500px)" />
	<source srcset="example1200.jpg" media="(min-width: 1200px)" />
	<img src="example760.jpg" alt="example image" />
</picture>

　<picture>エレメントには、<source> エレメントと <img> エレメントが必要です。

　<source> エレメントでmedia属性による条件ごとの画像リソースを指定できます。 ブラウザは <source> エレメントのmedia属性値から、最適な画像をロードします。

　<img> エレメントは最後に定義します。 もしも<picture>エレメントに未対応なブラウザや <source> エレメントにマッチしない場合は最後の<img> エレメントが適応されます。
　ここでは、大きい画像が可能化を評価する順で、最後に最も小さい画像になるという評価をしています。

　<source> エレメントによって条件を与えらるなど、<picture>エレメントは <video>、<audio> エレメントに似ています。