レスポンシブイメージ

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

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>

キービジュアルに設定する場合

html

<div class="keyvisual">
    <h1 class="u-visually-hidden">XXXXXXXXXXXXXX</h1>
    <p class="u-visually-hidden">XXXXXXXXXXXX</p>
    <picture>
    <source media="(max-width: 767px)" srcset="./assets/img/keyvisual-sp.jpg">
    <source media="(min-width: 768px)" srcset="./assets/img/keyvisual.jpg">
    <img src="./assets/images/keyvisual.jpg" width="2160" height="1148" alt="">
    </picture>
</div>

CSS

.u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}