`srcset` と `sizes` 属性の実験(3)

img 要素の srcset属性に x単位の値を指定する例です。sizes は使いません。

実際どの画像がダウンロードされたかは、実験毎にHTMLを分けて実験し、ブラウザの開発ツールで確認します（画像にも元サイズが書いてあります）。

現在使用中のデバイスのデバイスピクセル比：

現在のウィンドウ幅：

各画像の幅： c-100.png(100px), c-200.png(200px), c-300.png(300px), c-400.png(400px)

実験1

HTMLソース

<img src="./c-200.png"
     alt="" class="" id="target_img"
     width="200"
     srcset="./c-100.png 0.5x,
             ./c-200.png 1x,
             ./c-300.png 1.5x,
             ./c-400.png 2x">

画像を表示する

メモ

sizes属性を指定しても無視されるようだ。
width属性には、srcset属性値で 1x を指定した画像のサイズを指定するべきだと思われる。
sizes属性を使わないので、メディアクエリーでサイズを場合わけできない。