HTMLのimgタグでブラウザ幅によって異なる画像を表示する方法

あるサイトのコーディングデータを貰った際に1つのimgタグに対して複数の画像が指定されているということがあった。これ何？　と思って調べたところ、imgタグに対してsrcset属性とsizes属性を指定してブラウザ幅によって異なる画像を表示できるみたい。以下に利用方法をメモ。

サンプル

https://taitan916.info/sample/img_srcset_sizes/

ブラウザ幅が1200 / 900 / 600pxになると画像が切り替わる。

また、ブラウザの開発ツールを見ると画像が切り替わるタイミングで当該画像が読み込まれる。つまりページ表示時は1枚しか読み込まれない。

ソースコード

<img src="./img/1200.jpg"
    srcset="./img/1200.jpg 1200w, ./img/900.jpg 900w, ./img/600.jpg 600w"
    sizes="(max-width:1200px) 100vw, 1200px">

リファレンス

srcset属性

https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/srcset

sizes属性

https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/sizes

所感

当該のコーディングデータなんだけど「普段は通常の画像を表示させるが、Retinaディスプレイ等の高解像度の場合に高画質の画像を表示させる」という意図で設定されているように見受けられた。

逆に「小さい画像に合わせて低画質画像を表示させる」という意図ではあまり使うことは無いのかも。

尚、Firefoxの場合ブラウザ幅を変えることで画像が随時切り替わるが、Chrome / Edgeの場合は挙動が異なり多少不安定になった。

参考サイト

https://ics.media/entry/13324/