Cumulative Layout Shift (CLS) occurs when visible elements on a webpage unexpectedly move as new content loads. One common cause is images that initially have no defined height. When the browser loads such an image, it suddenly expands to its natural height, pushing surrounding elements and disrupting the layout. This negatively impacts user experience, particularly on slower connections or dynamic interfaces.

1. Using the aspect-ratio CSS Property

By specifying the aspect-ratio and defining the width of an image, the browser can calculate and reserve the correct height before the image fully loads. This prevents any sudden shift when the image is rendered.

img {
  width: 100%;
  aspect-ratio: 16 / 9;
}

2. Setting width and height Attributes with CSS Rules

Another effective approach is to use the width and height attributes directly in the HTML <img> tag. Combined with CSS rules like width: 100%, the browser can compute the aspect ratio and allocate the correct space ahead of time.

<img src="image.jpg" width="800" height="600" />
img {
  width: 100%;
  height: auto;
}

3. Using Skeletons in Client-Side Rendering

When loading images dynamically via AJAX or other client-side methods, skeleton placeholders can be used to reserve space and provide visual feedback. These lightweight placeholders mimic the size and shape of the image, reducing perceived load time and avoiding layout jumps.

<div class="image-skeleton"></div>
.image-skeleton {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #eee;
}

Conclusion

Minimizing Cumulative Layout Shift is crucial for delivering a stable and seamless user experience. Whether you’re using static images or dynamically loaded content, reserving space through proper sizing techniques like the aspect-ratio property, HTML attributes, or skeletons ensures the layout remains predictable. By implementing these strategies, you enhance visual consistency and improve Core Web Vitals, which can positively impact SEO and overall usability.