Prevent Layout Shifts: Set Width & Height Attributes Correctly

The Hidden Cost of Unspecified Image Dimensions

You've experienced it countless times: reading an article on your phone when suddenly the text jumps downward as an image loads. Or trying to click a button that moves just as your finger touches the screen. These frustrating experiences are caused by Cumulative Layout Shift (CLS), and images without proper dimensions are often the primary culprit.

When browsers don't know an image's dimensions in advance, they can't reserve the appropriate space in the layout. The result is content that shifts around as images load, creating a poor user experience and negatively impacting your Core Web Vitals scores. Google considers CLS so important that it's one of the three key metrics in Core Web Vitals, directly affecting your search rankings.

How Width and Height Attributes Prevent Layout Shifts

The solution is surprisingly simple: always include width and height attributes in your image HTML. These attributes provide the browser with the intrinsic dimensions of your images, allowing it to calculate and reserve the appropriate space in the layout before the images actually download.

Modern browsers use these attributes to create an aspect ratio box—a placeholder that maintains the correct proportions regardless of the final rendered size. This approach works even when you use CSS to make images responsive, as the browser can scale the reserved space proportionally.

Without Dimensions (Causes Shift)

With Dimensions (Prevents Shift)

Implementing Responsive Images Without Layout Shifts

The common misconception is that setting fixed width and height attributes will make images non-responsive. This isn't true when implemented correctly. The HTML attributes provide the intrinsic dimensions for aspect ratio calculation, while CSS controls the responsive behavior.

The key technique involves combining the HTML attributes with CSS that sets max-width: 100% and height: auto. This approach ensures that images scale properly on different screen sizes while maintaining their aspect ratio and preventing layout shifts.

1. 1Add width and height attributesInclude the actual pixel dimensions in your image HTML: <img src="image.jpg" width="800" height="600" alt="Description">
2. 2Apply responsive CSSAdd CSS rules: img { max-width: 100%; height: auto; } to ensure proper scaling
3. 3Test across devicesVerify that images maintain aspect ratio and don't cause layout shifts on various screen sizes

Advanced Techniques for Complex Layouts

For more complex scenarios like responsive images with srcset or art-directed pictures, you need additional techniques to prevent layout shifts. When using srcset with images of different aspect ratios, you should base your width and height attributes on the largest variant and use CSS to maintain consistency.

The picture element introduces additional complexity because different source images might have different aspect ratios. In these cases, you can use CSS aspect-ratio property or the padding-top technique to ensure consistent spacing regardless of which image source the browser selects.

/* CSS aspect-ratio technique */
.responsive-image {
  width: 100%;
  aspect-ratio: 16/9;
}

/* Padding-top technique for older browsers */
.aspect-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.aspect-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Testing and Debugging Layout Shift Issues

Identifying and fixing layout shifts requires proper testing tools and methodologies. Browser developer tools include specific features for detecting layout shifts, and several online tools can help you measure and improve your CLS scores.

The most effective approach is to test your pages with throttled network connections, as this simulates real-world conditions where images load slowly and layout shifts become most apparent. Combine this with mobile device testing to ensure your solutions work across all user scenarios.

• ✓ All images have width and height attributes
• ✓ CSS ensures responsive behavior without breaking aspect ratio
• ✓ No layout shifts visible on slow 3G connection
• ✓ CLS score below 0.1 in Lighthouse audit

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 →