srcset と sizes 属性の実験(2)

img 要素の srcset属性を使っていろいろな指定の仕方を試しています。

実際どの画像がダウンロードされたかは、実験毎にHTMLを分けて実験し、ブラウザの開発ツールで確認しました。

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

現在のウィンドウ幅：

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

実験1

HTMLソース

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

画像を表示する