sizes属性のデフォルト値は 100vw である

投稿日：2021年10月28日

<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を返す」と書いてあります。

参考

📂-Web

執筆者：labo