日々、SEOの改善に取り組んでおられる諸兄達は、CLSを気にされていることと思います。
PageSpeed Insightsのスコアに四苦八苦されていることでしょう。

そんなPageSpeed Insightsの中で、以下のような指摘を受けていませんか？

このように書かれていると、imgタグにwidthとheightを設定しなければいけないと思ってしまいがちですが・・・

ちょっと待ってください！

このレスポンシブ対応が当たり前の時代に「widthとheightを設定しろ！」なんて言われるだろうか・・・？

調べてみた！

CLSのスコア上昇にwidthとheight指定が必要なのか？

PageSpeed Insightsの「画像要素でwidthとheightが明示的に指定されていない」を開くと、そこにはリンクがあります。

こいつを開いてみよう

https://web.dev/articles/optimize-cls?utm_source=lighthouse&utm_medium=lr&hl=ja#images_without_dimensions

そうすると「CLSの一般的な原因」 > 「サイズが指定されていない画像」との見出し記載があります。
そこには以下のように記述されているんです。

画像要素と動画要素には、必ずwidthとheightのサイズ属性を含めます。
または、CSS aspect-ratioなどを使用して必要なスペースを予約します。
このアプローチにより、画像の読み込み中にブラウザはドキュメント内に適切な量のスペースを割り当てることができます。

https://web.dev/articles/optimize-cls?utm_source=lighthouse&utm_medium=lr&hl=ja#images_without_dimensions

PageSpeed Insightsの指示通り、widthとheightを指定しろと書いてあるんですが、その下に「または、CSS aspect-ratioなどを使用して必要なスペースを予約」との記載があります。
「または」なのでaspect-ratioでアスペクト比を指定しておけば、imgタグにwidthとheightの記載をしなくても良いということが言えると思います。

まとめ

指示されていることが全てじゃなくて、本当にそれは必要なニーズを満たしているのか、要点は何なのかを捉えることで、本当に守るべきことは見えてくる！