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

img 要素の srcset属性に w単位の値を指定する例です。この場合、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 100w, 
             ./c-200.png 200w,      
             ./c-300.png 300w,      
             ./c-400.png 400w" 
     sizes="200px">

画像を表示する

実験2: メディアクエリー有り（場合分け）

HTMLソース

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

画像を表示する

メモ

メディアクエリーで場合分けしている場合は、width属性を指定してはいけない。width属性で指定したサイズに固定されてしまい、場合分けが効かなくなる。