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

1. このページの目的

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

その2では、srcset で x単位を使用する

2. Demo

使用するウェブブラウザ

• Chrome 83
• Microsoft Edge 83
• Firefox 77

(1) Demo 1

srcset属性で x単位を使う。

HTML

<img id="img1" src="c-200.png" alt=""
     width="200" height="186"
     srcset="c-100.png 0.5x,
             c-200.png 1x,
             c-300.png 1.5x,
             c-400.png 2x">

• width, height には、1x でのサイズを指定する。

CSS

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

• width, height 属性を指定しているのでレイアウトシフトは起きない。

(2) Demo 2

同じことを、大きめ画像で試す。

HTML

<img id="img2" src="sample-1x.jpg" alt=""
    width="1920" height="1200"
    srcset="sample-960.jpg 0.5x,
            sample-1920x.jpg 1x">

• width, height には、1x でのサイズを指定する。

CSS

#img2 {
  max-width: 100%;
  height: auto;
}

• その時々の画像表示サイズ分のスペースが、レンダリング前からちゃんと確保される。レイアウトシフトは起こらない。良い。

3. 結論

• 特に問題はない。