レスポンシブイメージ

画像をレスポンシブ対応させるために出し分けする例

MEMO: 画像にスタイルを適用する場合は mainvisual__picture img でOK

<figure class="mainvisual__picture">
	<picture>
		<source media="(max-width:767px)" srcset="./family-sp.png 1x, ./family-sp@2x.png 2x">
		<source media="(min-width:768px)" srcset="./family.png">
		<img src="./family.png" width="1400" height="890" alt="写真：家族の画像">
	</picture>
</figure>

2. picture 要素 + webp による画像の出し分け

Chromeではディベロッパーツールで小さい画面から大きくしていく/リロードすると画像の切り替わりを確認できる。

WebPフォーマットに対応したブラウザでは source、非対応では img の画像が表示される

<picture>
	<source
	type="image/webp"
	srcset="img400.webp 400w,
			img800.webp 800w,
			img.webp 1600w"
	sizes="(max-width: 1600px) 100vw, 1600px"
	>
	<img src="img.jpg"
	srcset="img400.jpg 400w,
			img800.jpg 800w,
			img.jpg 1600w"
	sizes="(max-width: 1600px) 100vw, 1600px"
	alt="">
</picture>

3. srcset sizes 属性による画像の出し分け

Chromeではディベロッパーツールで小さい画面から大きくしていく/リロードすると画像の切り替わりを確認できる。

<figure class="mainvisual__picture">
	<picture>
		<source media="(max-width:767px)" srcset="./family-sp.png 1x, ./family-sp@2x.png 2x">
		<source media="(min-width:768px)" srcset="./family.png">
		<img src="./family.png" width="1400" height="890" alt="写真：家族の画像">
	</picture>
</figure>