Image Optimization for Core Web Vitals (2026): LCP, CLS & INP Guide

Images are the Largest Contentful Paint element on 72% of mobile pages and account for 40-60% of total page weight. Optimizing them is the single highest-impact improvement you can make for Core Web Vitals — the metrics Google uses to rank your site.

How Images Affect Each Core Web Vital

Core Web Vitals measure three aspects of user experience: loading speed (LCP), visual stability (CLS), and responsiveness (INP). Images directly impact all three.

LCP: Fix Your Hero Image

Largest Contentful Paint measures how long the largest visible element takes to render. On most pages, that element is a hero image. The good news: fixing LCP is mostly about making that one image arrive faster.

The 5-Lever LCP Stack

1. Resize to display dimensions: A 2400px image in an 800px container wastes 75% of bytes. Serve 2× the display width at most.
2. Convert to modern format: WebP saves 25-35% over JPEG. AVIF saves another 20-50%.
3. Compress at quality 75-85: Quality 80 is imperceptible to users but 40-60% smaller than quality 95.
4. Preload the hero: Add a <link rel="preload"> in your head so the browser fetches it before parsing HTML.
5. Add fetchpriority="high": This single attribute improves LCP by 200-500ms in real-world tests.

The LCP Image Code Pattern

<link rel="preload" as="image" href="/hero.avif"
      imagesrcset="/hero-400.avif 400w, /hero-800.avif 800w"
      imagesizes="100vw" fetchpriority="high">

<img src="/hero-800.avif" alt="Hero description"
     fetchpriority="high" decoding="async"
     width="1600" height="900">

The preload tells the browser to start fetching immediately. fetchpriority="high" raises the request priority. decoding="async" keeps decode off the main thread. And the width/height attributes prevent CLS (more on that below).

CLS: Reserve Space for Every Image

Cumulative Layout Shift measures how much content jumps around during page load. Images without declared dimensions are the #1 cause of layout shift — they render at zero height, then snap to full size when bytes arrive, pushing everything below them downward.

The Fix: Always Declare Width and Height

<!-- Bad: no dimensions, causes CLS -->
<img src="photo.webp" alt="Description">

<!-- Good: browser reserves the box -->
<img src="photo.webp" alt="Description"
     width="800" height="600">

Modern browsers use the width/height attributes to calculate the aspect ratio and reserve space before the image loads. This works even with responsive CSS — the attributes control aspect ratio, not final pixel dimensions.

One audit found that adding width/height to all images on a catalog page reduced CLS from 0.34 to 0.02 — a 94% improvement with a single attribute addition.

INP: Keep Image Decode Off the Main Thread

Interaction to Next Paint measures how quickly the page responds to user input. While JavaScript is the primary cause of poor INP, large images can contribute through main-thread decode blocking.

The Fix: decoding="async" and Right-Sizing

<img srcset="photo-400.webp 400w,
             photo-800.webp 800w,
             photo-1280.webp 1280w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1024px) 800px,
            1280px"
     src="photo-800.webp" alt="Description"
     decoding="async" width="800" height="600">

decoding="async" hints the browser to decode off the main thread. srcset ensures the browser downloads only the size it needs — a phone gets the 400w version instead of the full 1280w. Together, these reduce decode time and keep the thread responsive.

The #1 Lazy Loading Mistake

Lazy loading is wonderful for below-the-fold images. It's catastrophic for the LCP image. 16% of pages still lazy-load their LCP image, directly worsening their Core Web Vitals score.

The fix is straightforward: explicitly set loading="eager" (or remove the lazy attribute) on the above-the-fold hero, and keep loading="lazy" on everything below the fold.

<!-- Hero: eager load, high priority -->
<img src="/hero.webp" loading="eager"
     fetchpriority="high" width="1600" height="900" alt="...">

<!-- Below fold: lazy load -->
<img src="/photo.webp" loading="lazy"
     decoding="async" width="800" height="600" alt="...">

The Complete Image Optimization Workflow

Here's the step-by-step process for optimizing every image on your site:

1. Resize to display width (×2 for retina): If an image displays at 800px, serve 1600px max — not 4000px. This alone saves 75% of bytes.
2. Convert to WebP or AVIF: WebP saves 25-35% over JPEG. AVIF saves another 20-50%. Use the <picture> element for automatic fallback.
3. Compress at quality 75-85: Test quality 80 — it's visually identical to quality 95 but 40-60% smaller.
4. Add width and height: Prevents CLS. Use the image's actual pixel dimensions.
5. Set loading and priority: Eager + fetchpriority="high" for the hero. Lazy for everything below.
6. Add decoding="async": Keeps decode off the main thread, protecting INP.
7. Serve via srcset: Generate multiple sizes and let the browser pick the right one.

Compression Benchmarks: Real Numbers

Here's what happens to LCP at different optimization levels, tested on a typical 1200×800 hero image over 4G (12 Mbps):

The takeaway: compression alone barely passes the 2.5s threshold. You need all three steps — resize + format conversion + compression — to solidly pass Core Web Vitals.

PageSpeed Score Improvement

Image optimization typically improves Google PageSpeed Insights mobile scores by 15-30 points. For sites with many large, unoptimized images, the improvement can exceed 40 points.

This makes image optimization the single highest-leverage technical SEO task available. The combination of modern formats + proper compression + correct loading attributes can take a 3-second LCP to under 1.5 seconds.

Frequently Asked Questions