How to Reduce CLS on Image-Heavy Websites

Cumulative Layout Shift (CLS) is a critical Core Web Vitals metric that measures visual stability, and image-heavy websites are particularly prone to high scores due to assets loading asynchronously. This article outlines the most effective strategies web development teams can implement to stabilize page layouts, including assigning explicit image dimensions, leveraging modern CSS layout rules, using aspect ratios, and optimizing how responsive media loads.

1. Always Include Explicit Width and Height Attributes

The most frequent cause of CLS on media-rich pages is the absence of dimension attributes on <img> tags. When width and height are omitted, the browser cannot determine the required space until the image file finishes downloading, causing surrounding content to jump abruptly.

Always define width and height attributes directly in the HTML:

<img src="product.jpg" width="800" height="600" alt="Product Name">

Modern browsers use these attributes to calculate the image's default aspect ratio before the asset downloads, reserving the exact amount of screen space needed.

2. Use the Modern CSS aspect-ratio Property

For responsive layouts where images scale based on viewport width, use the CSS aspect-ratio property. This approach prevents shifts even when using relative units like percentages.

.responsive-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

By specifying the aspect ratio in your CSS, the browser calculates the height automatically based on the container width, preventing layout collapse while the image is fetching.

3. Reserve Space with Skeleton Screens or Placeholders

If your application loads images dynamically via JavaScript or an API, reserve the container space in advance using CSS placeholders, skeleton loaders, or low-quality image placeholders (LQIP).

Set a min-height or explicit dimensions on the image wrapper element:

.image-wrapper {
  min-height: 300px;
  background-color: #f0f0f0;
}

This guarantees that the space is occupied from the initial DOM render, eliminating layout shifts when dynamic media enters the viewport.

4. Optimize Responsive Images with srcset and sizes

Serving incorrectly sized images can delay rendering and exacerbate shift issues. Use srcset and sizes to serve the appropriate resolution for the user's screen density and viewport width.

<img 
  src="photo-800.jpg" 
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" 
  sizes="(max-width: 600px) 100vw, 50vw" 
  width="800" 
  height="600" 
  alt="Gallery item">

Providing accurate sizes hints ensures the browser selects the correct image file quickly and allocates the appropriate dimensions without recalculating after download.

5. Preload Critical Above-the-Fold Images

Images located above the fold (such as hero banners or primary product photos) should load as early as possible. Late-rendering hero images are a common trigger for layout displacement and high Largest Contentful Paint (LCP) times.

Preload these assets in your document <head>:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

Pair this with fetchpriority="high" on the image element itself, and avoid applying loading="lazy" to any image visible in the initial viewport.

6. Implement Native Lazy Loading Correctly

Lazy loading offscreen images saves bandwidth and speeds up rendering, but improperly configured lazy loading can cause shifts when users scroll quickly.

Always combine loading="lazy" with explicit dimension attributes or aspect-ratio styling:

<img src="footer-graphic.jpg" loading="lazy" width="400" height="300" alt="Graphic">

This guarantees that the browser maintains the layout scroll position accurately as unseen images load in the background.