画像のCLS対策: レスポンシブでの画像のheight指定のしかた

Question

画像のCLS(パフォーマンス)に関して質問があります。
画像を置いている場合、width, heightを指定する(他にもアプローチはありますが、主にwidth, height指定が主流かなと思っています)ことでCLS対策をするかと思うのですが、レスポンシブでheightが変わっていく場合はどうすれば良いのでしょうか？
やったこととしては、widthは100%のまま、

• height: autoを指定
  -> lighthouseのスコアに変動はない
• height: %指定(元画像のwidth, heightから、widthを100%とした時のheightの%を出す)
  -> lighthouseのスコアに変動はない
• heightに固定値(〇〇pxなど)を指定
  -> lighthouseのスコアが大幅に改善。ただレスポンシブデザインなためheightに固定値を指定することはできない

といった感じです。
解決方法をご存知の方がいらっしゃいましたら教えていただきたいです。

Answer 1

基本的にはimgのwidthとheightに画像のアスペクト比通りに設定してcssで上書きします。
下記の例は3:2の場合。

<img src="hoge.jpg" alt="" width="300" height="200">

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