img要素の width, height 属性新仕様と srcset を同時に使ってみる (2021年) その4

1. このページの目的

img要素の width, height 属性がアスペクト比を取得するために利用されるようになった。この属性と srcset 属性を同時に使ってする。(2021年)

その4では、CSSを上手く組み合わせて使う。

2. このページでやっていること

使用するウェブブラウザ

• Chrome 88

ソースコード

今回、srcset属性で w単位を使うが、この場合 sizes属性も必須となる。

HTML

<img id="img1" src="sample-700.jpg"
     alt="" loading="lazy"
     width="700" height="438"
     srcset="sample-550.jpg 550w,
             sample-700.jpg 700w"
     sizes="100vw">

• width属性, height属性 には、1x でのサイズを指定する。
• CLS (Cumulative Layout Shift) を起こさないために、width属性, height属性 を指定する。
• sizez属性には、CSSで指定する width に合わせた値をセットする。
• 上記に対して sizes="700px" も記述すると動作が少し変わる。ウィンドウを小さくしてから本ページにアクセスしても、550px の方の画像を読み込んでくれなくなる。

CSS

#img1 {
  max-width: 700px;
  width: 100%;
  height: auto;
}

• width: 100%; height: auto; は常套句。
• 今回は max-width も指定してみた（width属性に指定した値にした）。

• CLSは起きない。

3. 結論

• ウィンドウを小さくしてリロードすると、sample-550.jpg の方が読み込まれる。そこからウィンドウサイズを大きくすると sample-700.jpg が読み込まれる使われる。
• それ以外では、sample-700.jpg の方が読み込まれる。そこからウィンドウサイズを小さくしても、sample-500.jpg に切り替わるわけではない（１回目のリサイズ時のみ切り替わった？）。
• この使い方で問題ない。

4. メモ

• CSS で max-width を使えば、sizes属性に max-width などを使う必要はなさそう。そもそも、sizes属性自体の存在価値はなくなってしまったかもしれない。