pictureタグで画面サイズにより画像を切替る

pictureタグを活用しPC、タブレット、スマホ、等の画面サイズにより表示させる画像を切替える方法を解説。

画面のサイズを変えると画像が切替わる

画面のサイズを変更すると以下に表示されている画像が自動で切替わります。

pictureタグのコード全部

画面の横幅、1025px 、600px 、をブレークポイントとしています。

​​<picture>
  <source media="(min-width: 1025px)" srcset="https://bti.tokyo/wp-content/uploads/2021/10/bootstrap2021-10-5-1rev.jpg">
  <source media="(min-width: 600px)" srcset="https://bti.tokyo/wp-content/uploads/2021/10/bootstrap2021-10-5-2rev.jpg">
<img src="https://bti.tokyo/wp-content/uploads/2021/10/bootstrap2021-10-5-3rev.jpg" alt="">
</picture>

ブレークポイント

PC：1025px～
タブレット：600px ～1025px
スマホ：～600px
がブレークポイントとなっています。

画像サイズ

準備する画像サイズは、横幅1920px、1050px、600px、にしています。

参考サイト

https://www.bti-partner.com/download

LPの制作などでも効果あり

LPの場合、リスティング広告やSNS広告の受け皿として使用するケースが多いため、PC、スマホ、タブレット毎でキャッチコピーのファーストビューを分かりやすくする必要があります。

そこでこのpictureタグのコードが活用できます。