How To Prevent CLS From Image Rendering On Client Side

Cumulative Layout Shift (CLS) can negatively affect your user experience and SEO results. The most common cause is improper image rendering on the client side. Fortunately, this is easy to solve using the aspect-ratio CSS property.

image {
  aspect-ratio: "width / height"; /* e.g. 1200 / 800 */
}

By using this property, the empty image tag will occupy the necessary height from the get-go based on the provided aspect ratio and the possible image width. This prevents a sudden shift of content once the image has loaded.