How to Optimize Images for Core Web Vitals in 2026

Why images are the biggest Core Web Vitals problem

Google's Core Web Vitals measure three things: how fast your page loads (LCP), how stable it is visually (CLS), and how responsive it feels (INP). Images directly affect two of those three.

According to the Chrome User Experience Report, only about 66% of websites pass the LCP threshold of 2.5 seconds. The number one reason for failure? Unoptimized images. Image optimization alone can improve LCP by 40-60% on most websites.

For more information about Core Web Vitals, see the official Google documentation.

That's a huge opportunity. If your competitors are in the 34% that fail, getting your images right gives you a measurable ranking advantage.

How images affect each metric

Largest Contentful Paint (LCP)

LCP measures when the largest visible element finishes rendering. On most pages, that element is an image — a hero banner, a product photo, or a featured image on a blog post.

Google expects LCP under 2.5 seconds. If your hero image is a 2MB JPEG at 4000px wide being served to a 375px mobile screen, you're failing this metric before the rest of your page even loads.

Cumulative Layout Shift (CLS)

CLS measures visual stability. Images without explicit width and height attributes cause layout shifts — the browser doesn't know how much space to reserve until the image downloads, so everything jumps around.

<!-- Causes layout shift — browser doesn't know the dimensions -->
<img src="/hero.jpg" alt="Hero" />

<!-- Prevents layout shift — browser reserves the space -->
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />

This is the easiest Core Web Vitals fix you can make. It takes 10 seconds per image and the impact is immediate.

The 4 highest-impact optimizations

1. Serve images in the right format

WebP produces files 25-34% smaller than JPEG at equivalent visual quality, with 97%+ browser support globally as of 2026. There's no reason to serve JPEG anymore unless you're targeting extremely old browsers.

According to Google's research, optimized images can reduce page load times by up to 50%.

For most web images, convert to WebP at quality 75-85. You'll get visually identical results at a fraction of the file size.

2. Resize to actual display dimensions

This is the mistake that wastes the most bandwidth. If your layout displays an image at 800px wide, don't serve a 3000px original. Resize it to match.

For responsive designs, use srcset to serve different sizes at different breakpoints:

<img
  src="/hero-800.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
  alt="Hero image"
  width="1200"
  height="600"
/>

3. Preload your LCP image

The browser can't start downloading your hero image until it discovers it in the HTML. By the time it parses the CSS and JS, precious seconds are wasted. Preloading tells the browser to start fetching immediately:

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

This single line can shave 200-500ms off your LCP.

4. Lazy load everything else

Only the above-the-fold image needs to load immediately. Everything below the fold should use lazy loading:

<!-- Above the fold: load immediately -->
<img src="/hero.webp" alt="Hero" loading="eager" fetchpriority="high" />

<!-- Below the fold: load when scrolled into view -->
<img src="/feature.webp" alt="Feature" loading="lazy" />

Measuring your results

After optimizing, verify your improvements with these tools:

PageSpeed Insights — Google's official tool. Enter your URL and get field data (real users) and lab data (simulated). Focus on the field data, which is what affects rankings.

Chrome DevTools Performance tab — Open DevTools, go to Performance, run a profile, and look for the "LCP" marker in the timeline. It tells you exactly which element is your LCP and how long it took.

Web Vitals Chrome Extension — Gives you real-time CWV scores as you browse your own site.

Quick checklist

Here's what to do right now, ordered by impact:

1. Convert all images to WebP (25-34% size reduction)
2. Add width and height to every <img> tag (fixes CLS)
3. Resize images to match display dimensions (biggest bandwidth saving)
4. Preload your LCP image with fetchpriority="high"
5. Lazy load all below-the-fold images
6. Remove unnecessary metadata (EXIF data adds kilobytes)

Start with the images on your highest-traffic pages. Run PageSpeed Insights before and after, and you'll see the numbers move.

Optimize your images in seconds

Compress, resize, and convert to WebP — 100% in your browser. No uploads, no account.

Get Started