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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Amazon ページ右端のカート内商品リストを非表示にする方法

Amazon ページ右端のカート内商品リストを非表示にする方法について説明します。

Web

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順

目次1. AMP とは?なぜ、AMP が必要なのか?AMP フレームワーク1. AMP HTML2. AMP JS3. AMP キャッシュその他2. AMP for WordPress プラグインにつ …

Web Vitals

LCP を意識した Highlight.js の読み込み方

LCP を意識した Highlight.js の読み込み方について説明します。

Chrome

Chrome の通信ログ(TCP/IPも含む)を記録する

Chrome の通信ログ(TCP/IPも含む)を記録する方法を紹介します。

Web Vitals

Google Fonts がフォントファイルを読み込む様子を観察する

Google Fonts がフォントファイルを読み込む様子を観察します。