画面幅によって画像を切り替える方法

はじめに

レスポンシブなサイトを制作する際に、PC用とスマホ用で、違う画像を表示させたい場合に使えます。

方法

pictureタグの子要素に、sourceタグとimgタグを書きます。

・imgタグ必須
・sourceは何個でもOK、なくてもいい

HTML

    <picture>
        <!-- PC用の画像 -->
        <source media="(min-width: 768px)" srcset="./img/fv.png" />
        <!-- スマホ用の画像 -->
        <img
          src="./img/sp/fv.png"
          alt="素材の美味しさをそのままに Sweet Delight"
        />
    </picture>

sourceタグのmedia属性によって、画面幅を指定できるため、PC用とスマホ用で異なる画像を指定できます。

上記のコードを見ると、sourceタグのmedia属性には、768pxより大きい画面幅を指定しているので、PC用の画像を指定しています。また、srcset属性に画像のURLを書きます。

imgタグに指定した画像は、自動的に画面幅が768pxより小さい場合に表示されるため、スマホ用の画像を指定しています。