CLS — Layout Stability

High CLS —
Images Without Dimensions

No width and height on images = a layout that rebuilds itself on every load.

Where to find it: PageSpeed Insights > Diagnostics > Image Elements Do Not Have Explicit Width and Height

What It Is

When an HTML image element is missing explicit width and height attributes, the browser doesn't know how much space to reserve for it before it loads. The browser renders the surrounding content — text, buttons, other images — then shifts everything down when the image finally downloads and the browser discovers its dimensions. This happens on every page load, for every image without dimensions, and contributes directly to CLS score. It's one of the most widespread and easily fixed CLS causes on the web.

Why It Matters

Adding width and height attributes to images is one of the fastest, highest-impact CLS fixes available — often achievable in a single developer session across an entire site. For CMS-based sites, a single template change can fix every image instance site-wide. The shift caused by a missing-dimension image is proportional to the image's size: a large hero or blog post image without dimensions can contribute 0.2–0.5 to the CLS score on its own, which is enough to push the entire page into the Poor range single-handedly.

Root Diagnostics

Common Causes

Understanding why this failure occurs is the first step to fixing it permanently.

img Tags Without width/height

The most common cause. Image elements in HTML have no width or height attributes, so the browser allocates zero space until the image loads.

CMS Not Setting Dimensions

WordPress, Webflow, Shopify, and other CMS platforms don't always output width and height attributes by default on dynamically inserted images — blog post images, product images, and gallery images are common gaps.

CSS-Resized Images

Images are sized via CSS (width: 100%; height: auto) without intrinsic dimensions in the HTML. CSS sizing alone doesn't give the browser enough information to reserve space pre-load.

Lazy-Loaded Images Without Aspect Ratio

Images using loading='lazy' without dimension attributes or aspect-ratio CSS cause particularly bad CLS because they load later in the rendering cycle — causing shifts at the moment of user scroll.

Interactive Standard Operating Procedure

The Fix Blueprint (Interactive SOP)

Check off each step to monitor your implementation progress live!

Implementation Progress: 0% Completed (0/7)

1. Audit All Images with PageSpeed Insights

Run the page through PageSpeed Insights. Find 'Image elements do not have explicit width and height' in the Diagnostics section. It lists every offending image with its URL. Export this list as your fix inventory.

2. Add width and height to Every img Element

For each image identified, add width and height attributes matching the image's intrinsic (original) pixel dimensions: — this allows the browser to calculate and reserve the correct aspect-ratio space before the image downloads.

3. Fix CMS Templates for Dynamic Images

For CMS sites, the fix needs to happen at the template level. In WordPress, confirm the image function outputs width and height attributes — newer WordPress versions do this automatically but older themes may not. In Shopify, update image tags in Liquid templates to include dimension attributes.

4. Add CSS aspect-ratio as a Fallback

For images where exact dimensions vary (responsive images, user-uploaded content), add aspect-ratio: 16/9 (or the appropriate ratio) in CSS. This gives the browser an aspect-ratio to use for space reservation even when exact pixel dimensions aren't known.

5. Fix Lazy-Loaded Images

For all lazy-loaded images, confirm both width and height attributes are present. Lazy loading without dimensions causes late-cycle layout shifts that are particularly jarring — the shift happens at the moment of scroll, not during initial page load.

6. Run Screaming Frog to Find Site-Wide Issues

Use Screaming Frog to crawl the site and export all images without width/height attributes. This gives you the complete site-wide inventory, not just the issues on one page.

7. Re-test and Confirm CLS Improvement

After implementing fixes, re-run PageSpeed Insights. The 'Image elements do not have explicit width and height' diagnostic should show zero remaining issues. Measure the CLS score improvement and compare to the baseline.

Tools

PageSpeed Insights
Free | Diagnostics section lists every image missing width/height attributes with URL and element details
Screaming Frog SEO Spider
Free up to 500 URLs / Paid | Crawl site-wide to find all images missing dimension attributes at scale
Chrome DevTools Elements Panel
Free | Inspect any image element to check for width/height attributes and verify CSS aspect-ratio behavior

Time to Fix

30 minutes

To identify all images missing dimensions

Hours

Template fix (minutes per template) | Scale with CMS

Pro Tip

Fix this at the template level, not page by page.

The mistake agencies make is going through each page manually and adding width and height to individual images. On a 500-page site with 5 images per page, that's 2,500 manual edits. The right approach is to fix the image output function in the CMS template — one edit that propagates to every dynamically inserted image across the entire site simultaneously.

High CLS — Images Without Dimensions