Core Web Vitals and Image Optimization: LCP, CLS, INP Guide for 2027

Quick answer: Images directly impact all three Core Web Vitals: LCP (Largest Contentful Paint) is usually an image — optimize the hero image with fetchpriority="high", WebP/AVIF, and proper sizing. CLS (Cumulative Layout Shift) is caused by images without width/height attributes — always include dimensions. INP (Interaction to Next Paint) is affected by image decoding — use decoding="async" for below-fold images. Target: LCP < 2.5s, CLS < 0.1, INP < 200ms. Image optimization is the single biggest lever for improving all three.[1][3][4]

Core Web Vitals are Google's standardized metrics for measuring user experience on the web. They are a ranking factor, and images are the primary driver of all three metrics. This guide explains how images affect LCP, CLS, and INP, and provides specific optimization techniques for each.

The three Core Web Vitals

LCP (Largest Contentful Paint)

Measures how long it takes for the largest content element (usually an image or heading) to become visible. Target: under 2.5 seconds.[4]

CLS (Cumulative Layout Shift)

Measures visual stability — how much elements shift during page load. Target: under 0.1.[4]

INP (Interaction to Next Paint)

Measures responsiveness — how quickly the page responds to user interactions. Target: under 200 milliseconds.[4]

How images affect LCP

LCP is almost always an image. The largest element on most pages is the hero image, product photo, or banner. If this image is slow to load, LCP suffers.

LCP optimization techniques

1. Optimize the hero image aggressively.

The hero image is the LCP element on most pages. It must load as fast as possible:

• Use WebP or AVIF (25–50% smaller than JPEG)
• Compress to quality 80 (WebP) or 50 (AVIF)
• Resize to exactly the display width (1920px for full-width hero)
• Serve from a CDN (edge caching)
• Use fetchpriority="high"[3][4]

2. Preload the hero image.

Add a preload hint in the <head> to start downloading the hero image before the browser discovers it in the HTML:

<link rel="preload" as="image" href="hero.webp" type="image/webp" fetchpriority="high">

For multiple formats:

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

3. Never lazy-load the LCP element.

Lazy-loading delays LCP. The hero image must load immediately.[4]

4. Avoid render-blocking resources.

CSS and JavaScript that block rendering delay LCP. Inline critical CSS, defer non-critical JS, and use async/defer attributes.[4]

5. Use a CDN.

Serve the hero image from an edge location close to the user. A CDN reduces TTFB (Time to First Byte) by 50–80%.[5]

LCP measurement

// Measure LCP with Performance Observer
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.startTime, 'ms');
  console.log('LCP element:', lastEntry.element);
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });

In Chrome DevTools: Performance tab → reload → look for "LCP" marker in the timeline.[4]

How images affect CLS

CLS is caused by elements shifting during page load. Images are the #1 cause of CLS because they don't have reserved space until they load.

CLS optimization techniques

1. Always include width and height.

<img src="image.webp" alt="Description" width="800" height="600">

The browser uses these dimensions to calculate the aspect ratio and reserve space before the image loads. This prevents layout shift.[4]

2. Use CSS aspect-ratio for responsive images.

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

This ensures the browser reserves the correct space even when the image scales responsively.[3]

3. Avoid injecting images dynamically.

If JavaScript adds images after page load, they cause layout shift. Reserve space with placeholders or skeleton screens.[4]

4. Use font-display: swap carefully.

Web fonts can cause CLS when they load. Use font-display: optional or font-display: swap with proper fallback font sizing.[4]

CLS measurement

// Measure CLS
let clsScore = 0;
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      clsScore += entry.value;
      console.log('CLS contribution:', entry.value, 'Total:', clsScore);
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

In Chrome DevTools: Performance tab → look for "Layout Shift" markers. Red markers indicate CLS.[4]

How images affect INP

INP measures how quickly the page responds to user interactions (clicks, taps, key presses). Images affect INP in two ways:

1. Image decoding

When a large image is decoded (converted from compressed format to pixels), it blocks the main thread. This delays response to user interactions.

Solution: Use decoding="async" for below-fold images:

<img src="image.webp" decoding="async" alt="Description" width="800" height="600">

This tells the browser to decode the image off the main thread, preventing blocking.[3][4]

2. Memory pressure

Large images consume memory. When memory is exhausted, the browser may garbage-collect aggressively, causing jank and slow interactions.

Solution: Compress images, use appropriate sizes, and lazy-load below-fold images to reduce memory pressure.[3]

INP optimization techniques

1. Use decoding="async" for below-fold images.

<img src="product.webp" decoding="async" loading="lazy" alt="Product" width="400" height="400">

2. Avoid synchronous image operations.

Don't use canvas.drawImage() or createImageBitmap() synchronously on the main thread during user interactions.[4]

3. Use content-visibility: auto.

This CSS property tells the browser to skip rendering of off-screen content, improving INP:

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

4. Reduce image count on interactive pages.

Pages with many images (galleries, product grids) have higher INP. Consider pagination or virtual scrolling.[4]

Image optimization checklist for Core Web Vitals

LCP checklist

• [ ] Hero image uses WebP or AVIF
• [ ] Hero image compressed to Q80 (WebP) or Q50 (AVIF)
• [ ] Hero image resized to display width
• [ ] Hero image preloaded with <link rel="preload">
• [ ] Hero image has fetchpriority="high"
• [ ] Hero image NOT lazy-loaded
• [ ] Hero image served from CDN
• [ ] No render-blocking CSS/JS before LCP

CLS checklist

• [ ] All images have width and height attributes
• [ ] CSS aspect-ratio set for responsive images
• [ ] No dynamically injected images without reserved space
• [ ] Font loading doesn't cause layout shift
• [ ] Ads and embeds have reserved space

INP checklist

• [ ] Below-fold images use decoding="async"
• [ ] Below-fold images use loading="lazy"
• [ ] No synchronous image operations on main thread
• [ ] content-visibility: auto on below-fold sections
• [ ] Image count limited on interactive pages

Measuring Core Web Vitals

Google Search Console

Core Web Vitals report shows which pages pass/fail. Check "Experience" → "Core Web Vitals".[4]

PageSpeed Insights

Provides field data (real user metrics) and lab data (simulated). Check both mobile and desktop.[4]

Chrome User Experience Report (CrUX)

Provides real-user Core Web Vitals data for your site. Available via BigQuery or the CrUX API.[4]

Lighthouse

Lab testing tool. Run in Chrome DevTools. Provides scores and recommendations. Use for development, not production monitoring.[4]

Frequently Asked Questions (FAQ)

What are Core Web Vitals?

Core Web Vitals are Google's standardized metrics for measuring user experience: LCP (loading), CLS (visual stability), and INP (interactivity). They are a ranking factor. Targets: LCP < 2.5s, CLS < 0.1, INP < 200ms.[4]

How do images affect LCP?

The largest element on most pages is an image (hero, product photo, banner). If this image is large, uncompressed, or not prioritized, LCP suffers. Optimizing the hero image (format, compression, sizing, preload) is the single biggest LCP improvement.[3][4]

How do images cause CLS?

Images without width and height attributes don't reserve space. When they load, the page layout shifts to accommodate them. This causes CLS. Always include dimensions.[4]

What is INP and how do images affect it?

INP (Interaction to Next Paint) measures how quickly the page responds to user interactions. Large images can block the main thread during decoding, delaying responses. Use decoding="async" and lazy loading to reduce impact.[4]

How do I find my LCP element?

Use Chrome DevTools Performance tab → reload → look for the "LCP" marker. Or use the Performance Observer API in JavaScript. The LCP element is usually the hero image or largest heading.[4]

Should I use decoding="async" on all images?

Use it on below-fold images to prevent decoding from blocking interactions. For the hero image (LCP), use decoding="sync" (default) to ensure it renders as soon as possible. Or omit the attribute (default is sync).[3][4]

What is content-visibility: auto?

A CSS property that tells the browser to skip rendering of off-screen content. This improves INP by reducing the amount of work the browser does during interactions. Use it on below-fold sections.[4]

How often should I check Core Web Vitals?

Monitor weekly using Google Search Console. Run Lighthouse before each deployment. Use real-user monitoring (RUM) for continuous tracking. Core Web Vitals change as your site changes — regular monitoring is essential.[4]

Related reading on MintSaaS

• How to Optimize Images for SEO: Complete Guide to Faster Loading and Higher Rankings
• How to Optimize Images for Mobile: Responsive Image Guide for 2027
• Image Lazy Loading: Implementation Guide for Web Performance in 2027
• How to Compress Images Without Losing Quality: The Complete 2027 Guide

Sources

[1] MDN Web Docs — Core Web Vitals: https://developer.mozilla.org/en-US/docs/Glossary/Core_Web_Vitals

[2] MDN Web Docs — Image file type and format guide: https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types

[3] Image Optimization for the Web (boxtool.app): https://boxtool.app/en/guides/image-optimization-for-web/

[4] Web.dev — Core Web Vitals: https://web.dev/vitals/

[5] MintSaaS Image Compressor: https://www.mintsaas.net/products/image-compressor

Free tools on MintSaaS

Try our free tools to put this guide into practice:

• Image Compressor
• PDF Compressor
• Image Converter
• MintSaaS Home
• MintSaaS Blog
• How to Compress Images