レスポンシブに画像を出し分けるpictureタグ

PCとスマホで、違う画像をどうやって出し分けるんだろう？

cssで調整するというやり方もあるのですが、pictureタグという便利なHTMLタグがあるのでご紹介します。

pictureタグの使いかた

See the Pen pictureタグ by YT (@YT-the-scripter) on CodePen.

CODEPENだと分かりづらいですが、下記動画のように画面幅に従って画像を切り替えることができます。

出力条件に従ってまずsourceの画像が表示されます。

今回だとmedia=”(max-width: 600px)なので、600px以下の時はsorceタグの画像が表示され、

それ以下のサイズの場合は、imgタグの画像が表示されます。

<picture>
  <source srcset="https://images.~~省略" media="(max-width: 600px)" />
  <img src="https://images.~~省略" alt="" />
</picture>

cssのメディアクエリで出し分ける場合と比べて、読み込み効率が良いと言うメリットがあります。

またsourceタグを増やすことで、さらに条件を細かく設定して画像を出し分けることもできます。

まとめ

以上、picutureタグの解説でした。

レスポンシブに画像を出し分ける際に非常に便利です。

またサイトスピードも向上させることができるので、積極的に使用しましょう。