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

1. このページの目的

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

2. ブラウザの仕様が変わった

(img要素の width, height 属性が指定されている) 且つ、(CSS でも width, height が指定されている) 場合、前者からアスペクト比を取得し、このアスペクト比と後者から画像サイズを算出し、画像ファイルが取得される前であってもその分のスペースを画面上に確保するようになった。よって、レイアウトシフト (jank problem) が起きなくなった。

• Firefox 78
• Chrome 83

参考

• Do This to Improve Image Loading on Your Website - YouTube
• Setting Height And Width On Images Is Important Again — Smashing Magazine
• 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver (この記事でこの仕様を知った)

3. Demo

Demo 1

img属性のwidth,height + CSSのwidth,height を指定する。

HTML

<img id="img1" width="400" height="371" src="c-400.png" alt="">

CSS

#img1 {
  width: 50%;
  height: auto;
}

Demo 2

img要素のwidth,height + sizez属性(場合分け) を指定する。

HTML

<img id="img2" width="400" height="371" src="c-400.png" alt=""
     srcset="c-400.png 400w"
     sizes="(max-width: 800px) 80vw, 400px">

• そもそも sizes で指定した場合分けがされない。width で指定したサイズが適用されてしまう。
• width で指定したサイズのスペースは確保される。

Demo 3

sizez属性で場合分けする(img要素のwidth,heightなし)。

HTML

<img id="img2" src="c-400.png" alt=""
     srcset="c-400.png 400w"
     sizes="(max-width: 800px) 80vw, 400px">

• width, height 属性を指定しないと、sizes による場合分けは効くが、レイアウトシフトが起きる。

4. 結論

• そもそも sizes属性を使う場合は、CSS で width, height を指定しないのでは？
• sizes 属性で場合分けしている場合に、width,heightを指定すると場合分けが効かない(これは前からそう)。ただこのときも width,height で指定したサイズのスペースは確保される。