【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい

なんでいまさら？

なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたからです。これにより、ブラウザはimg要素に指定されたwidthとheight属性の値をもとにアスペクト比を計算して、ページ読み込み中に画像のスペースをより正確に保持できるようになりました。

サイズ属性を記述しない場合のページレンダリング

img要素にwidthとheight属性を記述しない場合、下のGIF動画のように画像が読み込まれた後に、下にあるテキストが大幅に移動します。

サイズ属性を記述した場合のページレンダリング

img要素にwidthとheight属性を記述した場合、下のGIF動画のようにはじめから画像のスペースが保持されていて、画像の読み込み後にも下にあるテキストの位置は変わりません。

ちなみに、GIF動画で表示されている画像にはCSSでwidth: 100%; height: auto;が指定されているので、レスポンシブに対応した画像の表示になっています。

レスポンシブの場合どのサイズを記述すれば良いのか

レスポンシブなサイトの場合どのサイズを記述するか迷うかもしれませんが、ここで重要なのは画像のアスペクト比（縦横比）です。なので、元画像のサイズをそのまま記述しても良いですし、デスクトップでの表示をベースにサイズ属性を書いてもOKです。

Lazy-loadingにも有効

画像の読み込みを遅延させるlazy-loadingを使用する際も、画像のサイズ属性の記述がないとレイアウトシフトが発生します。それを避けるためにもサイズ属性の記述は重要です。でなければLazy-loadingのメリットがレイアウトシフトによって帳消しになってしまうことも考えられます。

<img src="link/to/image.jpg" width="300" height="400" loading="lazy" alt="画像の説明">

ページ内リンクでページ下部に飛べる場合や、高速スクロールができるホイール付きのマウスとかだと、画像が読みこまれる前にページ下部に移動できてしまうので、レイアウトシフトが顕著に邪魔になる場合があるんですよね。あれもユーザ体験をかなり損なうので注意したいですね

むかーし、昔…

その昔、imgタグにはwidthとheight属性を書くのがあたりまえの時代がありました。僕がウェブ制作を始めたのは1990年台の後半ですが、そのころはimg要素にwidthとheightが記述されているか必ずチェックしていた気がします。

でも、レスポンシブWebデザインによって画像を可変で表示すようになって、img要素にwidthとheight属性は記述せずに、CSSで幅を100%に指定する以下のような書き方が広まりました。

img {
  width: 100%;
  height: auto;
}

widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されていると、画像がダウンロードされるまでブラウザが高さを判別できなくてレイアウトシフトが発生してしまっていました。

そして2020年、この記述方法によって多くなったJankの問題が解決されたわけです。

これを提案してくれたウェブコミュニティの方々（たぶんMozillaのJenさん ）もすごいし、それをスピーディに実装した各ブラウザの開発者の方々もすごいなぁと思います。Chrome、Safari、Firefoxのすべてにこんなにスピーディに実装されるのって珍しい気がします（そんなことない？）

問題があったら、みんなで議論して、解決策を見出して、実装していく。ウェブのこういうところが本当に大好きです（ここで告白w）。だからやめられない。

picture要素でWebPを使う場合

たとえば、WebPを使うためにpicture要素を使って以下の記述をした場合、img要素のwidthとheight属性の記述がしっかり反映された挙動になっていました。同じ縦横比の画像を使うのであれば問題ないようです。

<picture>
  <source srcset="img/muffins-and-coffee.webp" type="image/webp">
  <img src="img/muffins-and-coffee.jpg" width="800" height="480" alt="画像の説明">
</picture>

こちら、取り急ぎFirefox 78とChrome 83で確認しました。

検証用のデモページ

以下に検証用のデモページへのリンクをはっておきます。

• picture要素でwidth/height属性なし
• picture要素でwidth/height属性あり