Fix Cumulative Layout Shift: Reserve Space for Lazy-Loaded Images

The Hidden Cost of Unreserved Image Space

Have you ever clicked a link just as the page shifts beneath your cursor? Or tried to read an article that keeps jumping around as images load? These frustrating experiences are caused by Cumulative Layout Shift (CLS), and images are often the biggest culprits. When browsers don't know how much space to reserve for images before they load, everything else gets pushed around, creating a poor user experience and damaging your Core Web Vitals scores.

The solution isn't complicated: reserve the right space from the beginning. By combining proper image dimensions with CSS aspect ratio techniques, you can eliminate layout shifts while maintaining responsive design principles. This approach works whether you're using native lazy loading or more advanced Intersection Observer implementations.

The Foundation: Width, Height, and Aspect Ratios

The most basic prevention against layout shift starts with simple HTML attributes. Every img element should include width and height attributes that match the image's intrinsic dimensions. These values don't control the displayed size (that's CSS's job), but they provide the browser with crucial aspect ratio information during initial layout calculation.

Modern browsers use these dimensions to calculate aspect ratio and reserve the correct space, even before CSS loads or images download. This ancient HTML practice has become newly relevant in the era of Core Web Vitals.

<img src="image.jpg" 
     alt="Descriptive alt text"
     width="800" 
     height="600"
     loading="lazy">

CSS Aspect Ratio Containers: The Modern Solution

For more control and consistency, CSS aspect ratio containers provide a robust solution. The modern approach uses the aspect-ratio property, while the legacy method uses the padding-bottom percentage technique. Both create a container that maintains its proportions regardless of viewport size.

The aspect-ratio property is cleaner and more maintainable, with broad browser support in modern environments. The padding technique remains useful for supporting older browsers or specific layout requirements.

Modern approach (aspect-ratio)

Legacy approach (padding-bottom)

Lazy Loading Implementation Best Practices

Modern lazy loading should work seamlessly with aspect ratio containers. The native loading="lazy" attribute is the simplest approach, but for more control or older browser support, Intersection Observer provides greater flexibility.

When implementing lazy loading, ensure that your placeholder or skeleton maintains the exact same dimensions as the final image. Any difference in size will cause layout shift when the image loads.

1. 1Add loading attributeUse loading="lazy" for simple native lazy loading that works in modern browsers
2. 2Implement Intersection ObserverFor advanced control, use Intersection Observer to trigger image loading when elements enter viewport
3. 3Maintain placeholder dimensionsEnsure placeholders or loading states match final image dimensions exactly
4. 4Test across devicesVerify lazy loading behavior works correctly on different screen sizes and connection speeds

// Simple Intersection Observer implementation
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => observer.observe(img));

Responsive Images and Art Direction

Responsive images present additional challenges for layout stability. When using srcset with different aspect ratios, you must ensure consistent container proportions or dynamically adjust containers based on the loaded image.

The picture element allows for art direction with different crops at different breakpoints. Each source should have a corresponding aspect ratio container that matches its specific dimensions to prevent layout shifts when responsive images load.

<div class="aspect-box" style="--aspect-ratio: 16/9;">
  <picture>
    <source media="(min-width: 1024px)" 
            srcset="large.jpg" 
            width="1600" height="900">
    <source media="(min-width: 768px)" 
            srcset="medium.jpg" 
            width="800" height="600">
    <img src="small.jpg" 
         alt="Responsive image example"
         width="400" height="300"
         loading="lazy">
  </picture>
</div>

Testing and Validation

After implementing aspect ratio containers and lazy loading, thorough testing is essential. Browser DevTools provide several ways to simulate slow loading and identify layout shifts. The Performance panel can record and visualize layout shifts, while the Rendering tools allow you to throttle network speeds and test under various conditions.

Google's Web Vitals reports in Search Console provide real-world CLS data from actual users. Combine this with synthetic testing using Lighthouse or PageSpeed Insights for comprehensive coverage.

1. 1Use DevTools Performance panelRecord page loading and check for layout shift events in the timeline
2. 2Enable layout shift debuggingUse Chrome's Layout Shift Regions feature to visualize shifts during loading
3. 3Test with throttled networkSimulate slow connections to ensure layout stability under real-world conditions
4. 4Check Web Vitals reportsMonitor real-user CLS data in Search Console and other analytics tools

Automate image optimization with Optimagio

Doing this by hand for every image does not scale. Optimagio optimizes and converts your images (WebP and AVIF) automatically across your API, web app, and CMS — so every page ships the smallest possible files without manual work. See plans and pricing →