【CSS】画像のレイアウトシフト（CLS）を防ぐ
画像のレイアウトシフトを防ぐ方法を連ねた記事です。
前提知識：
-
レイアウトシフトとは、画像やWebフォントなどの影響で発生するレイアウトの変化です。
-
レイアウトシフトの発生原因は、画像やWebフォントが遅れて読み込まれることです。
そのため「表示領域を確保する」ことが基本的な解決方法になります。
-
レイアウトシフトは、Googleが提唱しているWebページのパフォーマンス指標の１つです。
低ければ低い方がよく 0.1 以下 が１つの基準です。
-
レイアウトシフトによるかかった時間は、ブラウザで「検証」→「Lighthouse」をクリックすると確認することができます。また、このときに発生箇所の確認も行えます。
-
どんな流れで表示されたかは、「検証」→「パフォーマンス」で確認することができます。
aspect-ratio でアスペクト比を指定する
主流の方法として、CSSのaspect-ratio プロパティで、画像のサイズをアスペクト比で指定する方法があります。
img {
aspect-ratio: 16 / 9;
}
<img>に width と height を付ける
少し前の方法として、HTMLのimg タグにwidthとheight 属性を設定する方法があります。
<img src="test1.png" alt="" width="300px" height="300px">
上記のどちらを使えばいいのか
このサイトでは、以下のように述べています。
「その画像はコンテンツなのかデザインなのか」
たとえば、記事に画像を使用する場合、それはコンテンツです。確保したスペースはコンテンツのアスペクト比になるようにしたい。
widthとheight属性を間違えると、コンテンツ画像から正しい値が使用されるほうがよい。だから、widthとheightの方が最適であるように思います。これならインラインスタイルにこだわることなく、コンテンツを作成するだけです。画像のレイアウトが特定のアスペクト比であることがデザイン上の要件である場合は、CSSで
aspect-ratioを使用することが適切な場合があります。たとえば、ヒーロー画像はつねに16 / 9でなければならないとかです。画像が16 / 9でない場合は、デザインが台無しにならないようにデザインを優先させます。ただし、画像が実際にそのアスペクト比ではない場合は、引き伸ばし（object-fit: fill;）、レターボックス（object-fit: contain;）、切り抜き（）のいずれかになります。どれも理想的ではありませんが。
つまり、
- 記事に使用する画像のように固定した大きさを保ちたいなら
width・heigth属性 - ヒーロー画像のように常にアスペクト比を保ちたいなら
aspect-ratioプロパティ
ということだと解釈しています。
参考資料
Discussion