srcset属性が理解できない

Question

srcset属性について質問です。

ｗという単位について調べると、
①その画像を表示したい時のブラウザ幅px。
②画像の実際の幅（ピクセル）。これによりブラウザは複数用意された画像のうち、どれを使うのが最適か判断できるようになる。

などと出てきて、ブラウザ幅？画像のサイズ？どっち？？となっています。イメージがつきません。
下のコードの解釈ですが、

<img src="small.jpg"
     srcset="small.jpg 500w,(500×300)
             medium.jpg 800w,(800×480)
             large.jpg 1200w"(1200×720)

     sizes="100vw"

「デバイスの画面幅が500px」の時、small.jpgを表示するよ。
「デバイスの画面幅が800px」の時、medium.jpgを表示するよ。
「デバイスの画面幅が1200px」の時、large.jpgを表示するよ。
その画像は、表示領域100％で表示するよ。であっていますか。

だとしたら500px、800px、1200px以外の画面幅だと画像はどう表示される？適するものを勝手に選んでくれて表示するのか？
2xのデバイスだと半分のサイズになる？
と混乱しています。シンプルに仕組みを教えてくださいませんか。

Comments

[m.ts10806]

> ｗという単位について調べると、

出展明示してください。

> だとしたら500px、800px、1200px以外の画面幅だと画像はどう表示される？適するものを勝手に選んでくれて表示するのか？
2xのデバイスだと半分のサイズになる？

試してみたら分かるのでは？

Answer 1

コードのsrcsetのところに(500×300)などとありますが、それらはコードの一部ではないですよね？

srcsetとsizesについては、こちらのページが詳しく、デモページもあってわかりやすいのではないかと思います。

【HTML】img 要素の srcset 属性 と sizes 属性について – ラボラジアン

wは画像ファイルの実際のピクセルサイズの指定ですね。srcsetは「デバイスの幅がこれならこの画像ファイル」といった指定をするものではなく、サイズの違う複数の画像ファイルを候補として羅列しておくだけのもので（そこで各画像ファイルの実際のピクセルサイズを情報として付記しておいて）、あとはブラウザにsizesとデバイスピクセル比に応じた選択を任せるということですね。