Why do images cause layout shifts?

Images often load slower than text. If space isn't reserved for them, they push the text down when they appear, causing a shift.

How do I stop images from jumping?

Add width and height attributes to your HTML, or use the CSS `aspect-ratio` property to reserve space before the image loads.

Does lazy loading increase CLS?

It can if implemented poorly. Always set dimensions on lazy-loaded images so the browser holds the space while the image fetches.

Do background images cause CLS?

Generally no, because background images live inside a container that usually has a documented height. If the container height depends on the image, then yes.

How do I measure CLS in Search Console?

Check the "Core Web Vitals" report. URLs marked "Poor" have a CLS higher than 0.25.

CLS Issues Caused by Images: How to Fix Layout Shifts - ProUtilityApp

Why Do Images Jump?

Google recommends reserving space for images to prevent layout shifts and improve CLS.

CLS is a Core Web Vitals metric, and poor CLS can negatively affect Page Experience signals, which are used as a ranking factor in Google Search.

Ideal for: Frontend Developers and Web Designers.

Last updated: Jan 2026

TL;DR (Quick Fix)

Reserve Space: Always set width and height attributes.

Use CSS: aspect-ratio: 16 / 9; preserves space before load.

Avoid: Inserting ads or banners dynamically without a placeholder container.

You load a page, start reading, and suddenly the text snaps down 500 pixels because a large banner image finally loaded. This is Cumulative Layout Shift (CLS), and Google hates it.

What is a Good CLS Score?

Google’s performance standards are precise:

Good: ≤ 0.1
Needs Improvement: 0.1 – 0.25
Poor: > 0.25

To pass Core Web Vitals, you need a score of 0.1 or less.

The Fix: Reserve Space Before Images Load

The browser doesn't know how much space an image needs until its dimensions or aspect ratio are defined. To fix this, you must tell the browser the aspect ratio before the image loads.

Old Way (HTML Attributes)

Always include width and height attributes:

<img src="hero.jpg" width="800" height="600" alt="Hero">

Browsers use this to calculate the aspect ratio (800/600 = 1.33) and reserve the vertical space immediately.

Modern Way (CSS Aspect Ratio)

.hero-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Before vs After: CLS Fix in Practice

Here is a real-world example of how one CSS line fixes a failing score.

Scenario	Code State	CLS Score	Result
Before	Image loads without dimensions	0.32	❌ Fails Core Web Vitals
After	Added `aspect-ratio: 16/9`	0.02	✅ Passes (Perfect Layout)

Common Mistakes to Avoid

Lazy Loading Without Reserved Space: Lazy loading images without width/height or an aspect ratio causes the browser to assume zero height until the image loads.
Dynamic Ads: Inserting banner ads mid-content without a container div of fixed height.
Image Carousels: Sliders that change height for every slide cause massive shifts.

Tools to Help

Aspect Ratio Calculator: Find the perfect ratio dimensions for your responsive slots.
Image Resizer: resizing images to exact dimensions ensures they fit their containers perfectly.

CLS Issues Caused by Images: How to Fix Layout Shifts