<img>
タグの srcset
属性で、画像サイズの単位として「w
」(width descriptor)を使った場合、sizes
属性も必要になります(*1)。
こんな感じです。
<img loading="lazy" alt="foo"
width="1024" height="683"
src="foo-1024x683.jpg"
srcset="foo.jpg 1470w,
foo-1024x683.jpg 1024w,
foo-768x513.jpg 768w,
foo-300x200.jpg 300w"
sizes="(max-width: 1024px) 100vw, 1024px">
(1*) なぜ sizes
属性も必要になるかというと、srcset
属性で指定されたそれぞれの画像の「幅」を、sizes
属性で決定された「幅」で 割ることで、画像毎の「ピクセル密度記述子 (pixel density descriptor)」と呼ばれる値を算出する必要があるからです。ブラウザは、そのデバイスのディスプレイが持っているデバイスピクセル比に近いピクセル密度記述子の値を持った画像を自動的に選択してダウンロードします。
sizes
属性を指定しなかった場合の Webページを、Ready to check – Nu Html Checker でチェックすると以下のエラーが表示されます。
エラーになるくらいよくないことではあるのですが、そこまで深刻なレベルの問題ではないので、Webページ自体は表示されます。
ではそのとき、sizes
属性の値はどういう扱いになっているのか?というと「100vw
」になっています。それならエラーにする必要はないような気もします。
sizes
属性のパース処理の仕様が 4.8.4.3.10 Parsing a sizes attribute | HTML Standard で説明されているのですが、値がなかった場合は「100vwを返す」と書いてあります。