When a browser starts rendering a page, it doesn't know how big your images are until they finish downloading. If you haven't told the browser the dimensions in advance, it initially renders the image at zero height. Then the image arrives, the browser recalculates the layout, and everything below the image jumps down. That jump is a layout shift, and it's one of the three Core Web Vitals that Google uses for page experience ranking.
Cumulative Layout Shift (CLS) measures the total amount of unexpected movement during the page's lifetime. Every image without explicit dimensions is a potential layout shift. On a page with five images, that's five separate jumps as each image loads. On mobile connections where images arrive slowly and in sequence, the user is trying to read text that keeps lurching downward.
Two attributes, decades old, still missing
The fix has existed since HTML 3.2 in 1997: width and height attributes on the <img> tag.
<img src="photo.jpg" width="800" height="600" alt="Description">
Modern browsers use these attributes to calculate an aspect ratio before the image loads. The browser reserves the correct vertical space, and when the image arrives, it fills that space without shifting anything. No JavaScript. No CSS hacks. Two attributes.
The reason so many sites still ship images without dimensions is that responsive design complicated things. When CSS sets width: 100% on images, the old width and height attributes seemed irrelevant because the CSS was controlling the rendered size. But in 2019, browsers (starting with Firefox, then Chrome and Safari) changed behavior: they now use the width and height attributes purely to calculate aspect ratio, not rendered pixel size. So width="800" height="600" combined with width: 100% in CSS gives you a responsive image that scales to fit its container while reserving the correct vertical space during load.
What the audit checks
The CWV Audit includes image dimension checks as part of its CLS analysis. For every <img> tag on the page, it checks:
- Are
widthandheightattributes present? - Do the attribute values match the image's intrinsic dimensions (or at least the correct aspect ratio)?
- Does the CSS override these dimensions in a way that negates the aspect ratio calculation?
- Is the image above the fold, where layout shifts have the most visual impact?
Images below the fold matter less for CLS because the user isn't looking at that part of the page yet. But images above the fold, especially hero images and inline content images, are the primary CLS offenders.
The lazy loading interaction
There's an important interaction between image dimensions and lazy loading. When you add loading="lazy" to an image, the browser defers loading until the image is near the viewport. If that image doesn't have dimensions, the browser reserves zero space for it, and when the user scrolls to where the image would be, the image loads and shifts the layout.
This creates a particularly bad user experience because the shift happens exactly when the user is looking at that part of the page. With eager-loaded images, the shift usually happens during initial page load before the user has started reading. With lazy-loaded images without dimensions, the shift happens mid-scroll.
The fix is the same: add width and height to every <img>, whether lazy-loaded or not. The CWV Fix Generator can emit the corrected HTML with proper dimensions and aspect-ratio CSS for each image it finds.
Content management systems and the gap
WordPress, Shopify, and most modern CMS platforms now add width and height automatically when you upload an image through their media library. The gap appears when images are added through other paths: pasted HTML in a rich text editor, imported blog posts, embedded third-party widgets, or developer-authored templates where the image source is dynamic.
Static site generators like Eleventy, Hugo, and Jekyll typically don't add dimensions automatically because the image processing happens at build time (if at all) and the template author is responsible for the attributes. If you're building pages by hand or through a generator, auditing for missing dimensions should be part of your deploy checklist.
I wrote about this pattern in The $97 Launch when discussing how small technical details compound into ranking signals. A single missing dimension attribute is trivial. Fifty missing dimension attributes across a 200-page site is a measurable CLS problem that affects your Core Web Vitals assessment.
Related reading
- CWV Audit runs a full Core Web Vitals assessment including image dimensions and render-blocking resources
- Lazy Load Audit covers the interaction between lazy loading and layout shift
- Image LCP Candidate Audit identifies which image is the LCP element and whether it has the right loading strategy
- Render Block Audit catches CSS and JS that delay first paint
- Blog: Font Loading Strategy covers another common source of layout shift
Fact-check notes and sources
- CLS (Cumulative Layout Shift) is one of three Core Web Vitals used in Google's page experience ranking signal. Source: web.dev/cls/, Google Search Central documentation.
- Browser aspect ratio calculation from width/height attributes shipped in Firefox 71 (December 2019), Chrome 79 (December 2019), and Safari 14.1 (April 2021). Source: web.dev "Setting height and width on images is important again."
- HTML
widthandheightattributes have existed since HTML 3.2 (January 1997). Source: W3C HTML 3.2 specification. - WordPress has automatically added width/height to uploaded images since version 4.4 (December 2015) via
wp_get_attachment_image(). Source: WordPress Trac ticket #33641.
This post is informational, not web development consulting advice.
