imgタグのsizes属性

imgタグのsrcset属性のwの指定と組み合わせて使う

x指定の場合はsizesは無視される ref

雑な理解(合ってるかわからない #?? )

@mediaと併用して、表示する際のCSS pixel値を記述する

実データの画像の横幅(device pixel)ではなく、表示する際の画像の横幅(CSS pixel)を指定する

いつもどおりwidthとかをしているノリで書けばいい

そこにmediaqueryも備わっている

だから(?)、sizesを指定する際はwidthを指定してはいけない(?)

無理やりわけるなら以下の3パターンがある

①mediaqueryを用いて複数指定

code:html

sizes="(max-width: 320px) 280px,

(max-width: 480px) 440px,

800px"

②mediaqueryを用いずに1つ指定

code:html

sizes="800px"

③指定なし

②③は①の特殊版と見ればいい

②はmediaqueryの指定が1つだった時

③はmediaqueryの指定が1つでdefualt値(100wx)を使用した時

だから、①を理解すれば、②③は自動的に理解できる

使用できる単位

だから%とかは使えない

もう少し正確な話

sizes 属性によって決定されたサイズと w 単位の値の2つからピクセル密度記述子としての値に変換されます。（ピクセル密度記述子 = wの値 / sizes で決定されたサイズ）

Webブラウザがデバイスのデバイスピクセル比と比較して、最適な画像を選んでくれます。 ref

これ、合ってるのか #??

ここ正確な計算式を理解していない #??

@mediaの書き方は3項演算子と同じ

例

code:html

ブラウザの横幅が1280px以下のときは、100vm(画面幅)、それ以外では1280pxで表示

<max-width: 1280px> ? 100vw : 1280pxというイメージ

だから三項演算子のときと同じ様に連鎖して複数条件書ける

code:html

<img sizes="(max-width: 320px) 280px

(max-width: 480px) 440px

800px" ... />