実験
この画像の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">
現在のウィンドウ幅：
現在の画像：
現在の画像のサイズ：
元の画像：
デバイスピクセル比：
分かったこと
- width, height 属性をセットしていると srcset は効かない。
- 4.8.4.3.5 Updating the image data | HTML Standard あたりに詳細が載っていそう。（複雑なので詳しくはまだ理解していない）
- [2019-04 追記]
max-width:100%を指定するとよいようだ。 - [2020? 追記] srcset が決めるのは、「どの画像ファイルをダウンロードするか？」であって「どの画像ファイルを表示するか？」ではない。
- 画像に対して「画像のURLをコピー」をすると、その時表示している画像のアドレスがコピーされる。(Firefox)
- Chrome だと「現在の画像」の正常な値が取得できない。
- それぞの画像が表示される時、実際の幅・高さより少し小さく表示される。