Google Page Speed公式ガイドに従って画像を変更して、ウェブサイトの CLS を改善しようとしています。500 x 281 ピクセルの固有サイズの JPG 画像があるため、テストとして以下の HTML を追加します。
<img src="..." width="1280" height="720">
これに伴う問題は、画像の実際の縦横比がビューポートとコンテナーに依存するようになったことです。つまり、縦横比が不正確になります。上記により、画像の幅がコンテナーの 100% になり、正しい縦横比を維持しながら CLS の問題が解決されることが期待されました。
以下の代替方法も試しました（この例ではインラインスタイルを使用しています）：
<img src="..." style="width:100%;height:auto;aspect-ratio:1280/720;">
これは、意図した結果を達成し、Google Page Speed から CLS リクエストを削除して、画像に明示的な高さ/幅を追加する効果があるようです。ただし、何らかの理由で、これを使用するとスタイリングを使用しない場合と比較してCLSがはるかに悪化しますが、これは私にはわかりません。