Web

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

投稿日:

<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 でチェックすると以下のエラーが表示されます。

Nu Html Checker が表示するエラー

エラーになるくらいよくないことではあるのですが、そこまで深刻なレベルの問題ではないので、Webページ自体は表示されます。

ではそのとき、sizes属性の値はどういう扱いになっているのか?というと「100vw」になっています。それならエラーにする必要はないような気もします。

sizes属性のパース処理の仕様が 4.8.4.3.10 Parsing a sizes attribute | HTML Standard で説明されているのですが、値がなかった場合は「100vwを返す」と書いてあります。

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Web

script 要素の src属性に .js 以外の拡張子を指定してもエラーにはならない

script タグの src属性に .js 以外の拡張子を指定してもエラーにはならないという話です。

HTTPレスポンスヘッダとブラウザキャッシュの関係を調査

目次1. はじめに2. 使用したツールWebサーバー側クライアント側3. 使用する HTML (PHP) ファイル4. 実験パターン1HTML (PHP)のヘッダ出力部分1回目のアクセス2回目のアクセ …

Web

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)について説明します。

Google

Google マップ (Google Maps) で緯度経度を指定して場所を見つける方法

例えば「北緯35度40分57秒 東経139度45分10秒」という情報があった場合に、それがどこなのか調べるには Google マップ を利用することができます。では、どうやればよいのでしょうか? 実は …