Image Dimensions: Why Explicit Width and Height Prevent Layout Shifts

Introduction

Declaring width and height attributes on every <img> tag tells the browser how much space to reserve on the page before the image finishes downloading. The UXR SEO Analyzer flags images that don't declare dimensions because they are the most frequent cause of Cumulative Layout Shift (CLS), a Core Web Vital.

Without declared dimensions, the browser doesn't know how much space the image will occupy and collapses that area to zero until the file loads, pushing the rest of the content down (or up) visibly to the user.

What Happens Without Width and Height

In the early days of the web, developers added width and height attributes to img tags specifically to reserve enough space on the page before the browser started downloading images, minimizing reflow. That practice faded with responsive design and CSS overriding dimensions—but the layout-shift problem came roaring back once CLS was introduced as a metric.

<!-- BAD: no dimensions, the browser reserves no space -->
<img src="banner.jpg" alt="Promotional banner">

<!-- GOOD: explicit dimensions reserve the correct space -->
<img src="banner.jpg" alt="Promotional banner" width="1200" height="600">

How Space Reservation Works

When you declare width and height, the browser calculates the intrinsic aspect ratio and reserves that space in the layout from the very first render, even before the image downloads. This happens automatically via the browser's default stylesheet, equivalent to the rule below—you don't need to write it yourself:

img {
  aspect-ratio: attr(width) / attr(height);
}

Alternative: CSS aspect-ratio

The CSS aspect-ratio property is a Baseline widely available feature that lets you explicitly set an aspect ratio on images and other elements, allowing a dynamic width while the browser automatically calculates the corresponding height. It's useful in fluid layouts where the final width depends on the container.

Impact on Core Web Vitals

• CLS: the leading cause of high CLS scores is images, ads, and iframes without reserved dimensions.
• User experience: layout shifts cause users to tap the wrong element when content moves under the cursor.
• Ranking: CLS is one of the three Core Web Vitals Google uses as a page experience signal.

Special Cases

Case	Recommendation
Responsive images with srcset	Declare width/height from the largest variant; the aspect ratio holds for all of them
CSS background images	Reserve the container's space with aspect-ratio or a fixed CSS height
Dynamically generated images (CMS)	Store the original dimensions on upload and render them alongside the URL

How the UXR SEO Analyzer Detects This

The analyzer inspects the rendered DOM for <img> tags missing the width and height attributes (or an equivalent CSS aspect-ratio rule applied to the element). Every image without reserved dimensions is reported as a Core Web Vitals finding, with an estimate of how much worse the page's CLS could get if the file is slow to download on a poor connection.

Relationship to Other CLS Causes

Images aren't the only cause of layout shift, but they are the most common one. Other frequent culprits are dynamically inserted ads, embedded video iframes, and web fonts that change text width on load (FOIT/FOUT). The discipline of reserving space with explicit dimensions or aspect-ratio applies the same way to all of these cases.

Why This Is Easy to Miss

It's common for a developer to correctly declare width/height in the initial markup, but for a gallery, carousel, or lightbox component to swap that image dynamically via JavaScript without preserving the attributes. The result is that the image looks correct visually, but the layout shift already happened during the initial load, before the interactive component took over.

Related Articles

• Image Dimensions Implementation Guide - Code and automation
• CLS Explained - The Core Web Vital this improves
• Image SEO Explained - Full image optimization guide

---

References

1. web.dev - Optimize Cumulative Layout Shift
2. web.dev - Cumulative Layout Shift (CLS)
3. Chrome Developers - Layout shift culprits
4. Chrome Developers - Chrome UX Report metrics