pictureタグで画像をレスポンシブに切り替える方法

レスポンシブサイトなどでPCとSPの画像を切り替えるときはどうしていますか？

一つはcssで画像を切り替える方法などがあります。

この方法だと画面幅によってPCもSPも両方の画像を読み込んでしまうためにパフォーマンスが悪くなります。

<picture>タグを使うことでcssを使わずに画面幅によって表示させる画像を切り替えることができます。

それでは <picture> の使い方と書き方を見ていきましょう。

<picture> の使い方

下記のように<picture>タグは基本、sourceとimgタグと使います。

参考の書き方は下記になります。

<picture>
  <source srcset="xxx03.jpg" media="(min-width: 1000px)"/><!-- 668px以上の場合 -->
  <source srcset="xxx02.jpg" media="(max-width: 667px)"/><!-- 667px以下の場合 -->
  <img src="xxx01.jpg"><!-- 上記以外で表示 -->
<picture>

メディアクエリを指定することによって画面幅によって画像の切り替えをすることができます。

<source>タグは、条件分岐に必要な数だけ増やすことができます。