pictureタグを使って画像をレスポンシブに切り替えるやり方の話

概要

最近、ご利用ガイドページのマークアップを修正するタスクがあったのですが、「あれ、PC版とSP版ってどうやってだし分ければいいだっけ」となり、その時の解決方法を備忘録的にも残しておこうと思い、執筆しました。
結論としてはpictureタグを使えばよかったです。下に実際のコード載せておきます。

実際に使ってみた

srcset属性を、media属性で条件が一致したときに表示する画像のパスにしてあげる。
使い方はこんな感じ。

<picture>
  <source srcset="画像のパス" media="(min-width: 1024px)">
  <img src="画像のパス" alt=”代替テキスト”>
</picture>

ちなみにsourceタグは複数使えます。

<picture>
  <source srcset="画像のパス" media="(min-width: 1024px)">
  <source srcset="画像のパス" media="(min-width: 768px)">
  <img src="画像のパス" alt=”代替テキスト”>
</picture>

これだと、最初のsourceタグの画像が最も優先度が高くなる。

ちなみに、画像を別で表示したいとき(ここでいうと画像1と画像2)はpictureタグは分けて作ってあげてね(当たり前やろ)。
僕はこれでやらかしたので。

<picture>
  <source srcset="画像1のパス" media="(min-width: 1024px)">
  <img src="画像1のパス" alt=”代替テキスト”>
</picture>

<picture>
  <source srcset="画像2のパス" media="(min-width: 1024px)">
  <img src="画像2のパス" alt=”代替テキスト”>
</picture>

divタグをpictureタグで代用もできそうだね。
めちゃくちゃ初歩的な記事だけど許して。