Images and Core Web Vitals: LCP, CLS, INP

Since 2021, Google has used Core Web Vitals as a ranking signal in search results. Images have a direct and significant impact on all three metrics. Understanding this relationship is essential for any SEO or web performance work.

What are Core Web Vitals?

Core Web Vitals are three user experience metrics measured by Google:

• LCP (Largest Contentful Paint): how long it takes for the largest visible element to render. Usually an image.
• CLS (Cumulative Layout Shift): how much the page layout shifts unexpectedly. Images without dimensions are a major cause.
• INP (Interaction to Next Paint): responsiveness to user interactions. Heavy images can indirectly affect this.

LCP: the most image-affected metric

In 70–80% of pages, the LCP element is an image, typically a hero banner, featured photo, or product image. Google expects LCP to be under 2.5 seconds. Common image-related LCP problems:

1. LCP image is lazy-loaded

The most damaging mistake. Adding loading="lazy" to your hero image delays its discovery and download.

<!-- Wrong: delays LCP -->
<img src="hero.jpg" loading="lazy">

<!-- Correct: load immediately -->
<img src="hero.jpg" loading="eager">

2. LCP image is not preloaded

The browser discovers the LCP image only when parsing the HTML. A preload hint makes the browser fetch it earlier:

<link rel="preload" as="image" href="hero.avif" type="image/avif">

3. LCP image is too heavy

A hero image weighing 1 MB will always produce a poor LCP on mobile connections. Target: under 200 KB for a full-width hero at 1200px wide, using AVIF or WebP.

4. LCP image served without a CDN

Serving images from a single origin server adds latency for distant users. A CDN reduces Time to First Byte (TTFB) for images, directly improving LCP.

CLS: images without dimensions

When a browser does not know an image's dimensions before it loads, it cannot reserve space in the layout. The image loads in and pushes content down, that is a layout shift. The fix is simple:

<!-- Wrong: no dimensions, causes CLS -->
<img src="photo.jpg" alt="...">

<!-- Correct: dimensions prevent layout shift -->
<img src="photo.jpg" alt="..." width="800" height="600">

You can also use CSS aspect-ratio to achieve the same effect when you cannot hardcode dimensions:

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Measuring image impact on Core Web Vitals

Use these tools to identify which images are hurting your scores:

• Google Search Console: Core Web Vitals report shows pages with poor scores from real user data
• PageSpeed Insights: identifies the LCP element, shows "Properly size images" and "Serve images in next-gen formats" opportunities
• Chrome DevTools → Performance tab: waterfall view shows when each image is fetched and painted
• Lighthouse: built into Chrome DevTools, flags specific image optimization opportunities

Core Web Vitals image checklist