srcset 属性の実験

img 要素の srcset属性を使い、ウィンドウ幅によって大きさの違う画像を表示しています。

画面をロードした時 / ウィンドウをリサイズした時に、その時のウィンドウ幅や読み込んでいる画像がどれなのかをリアルタイムで表示しています。

実験

この画像のHTMLソース

<img src="./c-400.png"
     alt="" class="" id="target_img"
     srcset="./c-100.png 500w,
             ./c-200.png 600w,
             ./c-300.png 700w,
             ./c-400.png 800w"
     sizes="(max-width: 800px) 100vw, 800px">

現在のウィンドウ幅:

現在の画像:

現在の画像のサイズ:

元の画像:

デバイスピクセル比:

分かったこと