レスポンシブ画像にもwidthとheight属性を指定してCumulative Layout Shiftを最適化する

背景

ページの読み込み中にレイアウトがシフトしないように、img 要素には width と height 属性を記述するのが良いとされていた。レスポンシブ対応のため、img 要素に width と height 属性は記述せずに、以下のような CSS で幅を 100% に指定する記述が一般的であった。

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

しかし、これではブラウザが画像を読み込んで解析が完了するまでサイズが分からず、レイアウトシフトが発生してしまう。

Cumulative Layout Shift とは

Cumulative Layout Shift（CLS）とは、Web ページの視覚的な安定性を示す指標のひとつである。ページが読み込まれる過程で、レイアウトシフトが何度も発生することがあり、これがユーザーの読解を妨げたり、間違ったクリックを誘発する可能性がある。CLS は、これらのレイアウトシフトがどれだけ発生したかを測定するためのスコアで、低い値ほど安定したページと評価される。

この指標は、Core Web Vitals の一部であり、Web ページの品質を測定するための重要な要素とされている。ページのパフォーマンスを改善し、ユーザー体験を向上させるためには、CLS を最適化することが重要である。

Evolving the CLS metric

方法

最近のブラウザでは、画像のデフォルトのアスペクト比を画像の width と height 属性に基づいて設定されるようになっている。

/* UA スタイルシート */
img {
  aspect-ratio: attr(width) / attr(height);
}

そのため、レスポンシブ画像にも width と height 属性を指定することで、画像のアスペクト比が事前に分かるため、レイアウトシフトが発生しなくなる。

<style>
  img {
    width: 100%;
    height: auto;
  }
</style>

<img src="https://placehold.jp/200x100.png" width="200" height="100" alt="" />

width: 100%; height: auto;という CSS を適用した場合、画像は親要素の幅に合わせてリサイズされ、高さは自動的にアスペクト比に応じて調整される。img 要素に width と height 属性を指定している場合、ブラウザは画像のアスペクト比を計算し、適切なスペースが確保される。

画像が読み込まれた後も、比率が保持されるため、レンダリングされる画像はアスペクト比が維持されたまま親要素に応じたサイズになる。これにより、レスポンシブを損なうことなく、Cumulative Layout Shift を最適化できる。

まとめ

レスポンシブ対応であっても img 要素に width と height 属性を指定するだけで、Cumulative Layout Shift を最適化できる。