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

どうも、くまだです。

Web制作のコンテンツ作成で、画像を配置することはよくあることです。その画像は、pictureタグを使って画像をレスポンシブごとに切り替えることができます。

ちなみにweb制作学習初期はdisplay: none;でやっていた気がします…

画像のアスペクト比維持のコーディング記事はこちらです。

【CSS】画像のアスペクト比を維持

画像のアスペクト比を維持して、画像サイズが変わったとしてもレイアウトを崩すことなく出力させたいときに使えるネタです。

weblife.ppmp556.com

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

結論からいうと、下記のようになります。

<div class="imgbox">
 <picture>
  <source srcset="img.png" media="(min-width: 768px)" width="680" height="414" />
  <img src="img.png" alt="" width="680" height="414">
 </picture>
</div>

imgタグをpictureタグで囲い、imgタグの前にsourceタグを記述します。mediaの部分で例えば768px幅以上ではAの画像、そうでなければimgの画像、というふうに画像を切りかえています。

このpictureタグの存在を知らなかったころはimgタグを2つ並べて、classでpc-noneとかsp-noneとか当てて、cssでdisplay: none;で切り替えていた気がします…

メディアクエリだけでなく例えばwebpを使いたい場合も切り替えできます。

<div class="imgbox">
 <picture>
  <source srcset="img.webp" media="(min-width: 768px)" type="image/webp" width="680" height="414">
  <source srcset="img.png" media="(min-width: 768px)" width="680" height="414" />
  <img src="img.png" alt="" width="680" height="414">
 </picture>
</div>

webp対応ブラウザであればwebpの画像が出力され、対応ブラウザでない場合はJPEGやPNGなどの画像に出しわけられます。

if文で切り替えるようなイメージです。

今回は短いですが、ここまで読んでくださりありがとうございました。