【HTML】pictureタグによるレスポンシブ毎に画像切り替え

レスポンシブごとに画像切り替え

これまではpc、スマホごとの画像切り替えはcssによるブレイクポイントごとのスタイル表示、非表示で行っていたが、それではpcで読み込む必要のないsp画像を読み込むなど、無駄な読み込みを行っていた。なのでpictureタグ、srcset属性による画像切り替えを行うようにする。

pictureタグによる画像の切り替え

pictureタグを使用すると、cssを使わず、画面幅による画像切り替え、webp未対応ブラウザに別画像表示などのことが可能になる。

解説

<picture>の中に一つ以上の<source>と一つの<img>を記述。
<source>を上から1つずつ順番に読んでいくので、記述順に注意。
条件に当てはまれば、その画像を表示。当てはまらなければ、下の<source>へと進む。
<source>のどれにも条件が当てはまらなければ<img>を表示する

ブラウザ幅による画像切り替え

media属性でメディアクエリ（画面幅に応じた条件）を指定。
media="(min-width: 765px)" srcset="img_2.jpg"なら765px以上で'img_2.jpg'を表示する。

<picture>
		<source media="(min-width: 765px)" srcset="img_2.jpg">
		<source media="(min-width: 375px)" srcset="img_1.jpg">
		<img src="img_3.jpg" alt="pictureタグで画像を切り替えてます">
</picture>

画像形式による切り替え

type="image/webp"でwebp対応ブラウザには表示させることができる。
webp対応ブラウザと未対応ブラウザで画像切り替える記述。

<picture>
  <source srcset="/sample.webp" type="image/webp"/>
  <img src="/sample.png" /><!-- ブラウザがwebpに対応していない場合に表示 -->
</picture>