レスポンシブでサイトを構築しているときに、画像をPC用とスマホ用に変更したいときが出てきます。
そんな時にお役立ちのタグが<picture>！

IEでは非対応だったこのタグ。
いちいちcssでブラウザサイズごとにhiddenとかしなくても簡単に切り替えできます^^
とっても便利なのでぜひ活用してください！

説明

<picture>要素の中に複数の<source>と1つの<img>である子要素を含めることによって
ブラウザが最適な子要素を選択して表示します。

<source>の中に適切なものがない場合や、<picture>が非対応ブラウザには<img>が選択され、表示します。

選択された<source>は<img>要素で使用している属性を引き継ぎます。

デモページ
デモページのブラウザサイズを変更してみてください！画像が切り替わります

属性

必須属性

srcset=""

画像のURLをいれます

画像の横幅を指定する場合にはwを用いります。
※sizes属性とセットで使用する必要があります。

画像の倍率を指定する場合にはxを用いります。

記述例

<source srcset="(画像名).jpg 480w, (画像名-2).jpg 2x" size="100vw">

任意属性

media=""

メディアクエリと同様の使い方をします

type=""

URLのMIMEタイプを指定します

sizes=""

画像の表示サイズを指定します

サンプル

デモページのソースです

デモページ
デモページのブラウザサイズを変更してみてください！画像が切り替わります

<picture>
	<source media="(min-width: 1280px)" srcset="picture/l-size.jpg">
	<source media="(min-width: 640px)" srcset="picture/m-size.jpg">
	<img src="picture/s-size.jpg" alt="サンプル画像">
</picture>