How to Optimize Images for Core Web Vitals (2026 Guide)

Your website loads slowly. You run a Lighthouse test. The report says your images are the problem.

That red "Largest Contentful Paint" score? It's almost always caused by unoptimized images. And Google uses that score to rank your site.

Core Web Vitals are the metrics Google cares about most. Images affect the biggest one. Fix your images, and your scores jump. Here's exactly how to do it.

What Are Core Web Vitals and Why Do Images Matter?

Core Web Vitals are three performance metrics Google measures on every page:

Largest Contentful Paint (LCP): How fast the biggest visible element loads. Should be under 2.5 seconds.
Interaction to Next Paint (INP): How fast the page responds when you click or tap. Should be under 200 milliseconds.
Cumulative Layout Shift (CLS): How much the page layout jumps around while loading. Should be under 0.1.

Images directly affect two of these three metrics. A heavy hero image kills your LCP score. An image without set dimensions causes layout shifts that hurt CLS.

Here's why this matters for your business. Google confirmed that Core Web Vitals are a ranking factor. Pages with good scores get more organic traffic. Pages with bad scores get pushed down in results.

The data backs this up. Sites that improved their LCP by 2+ seconds saw measurable ranking gains. For competitive keywords, that speed gap can mean the difference between page one and page three.

And images are usually the heaviest elements on any page. The average web page loads over 1 MB of images. That's more than scripts, fonts, and HTML combined. Fix the images, and you fix most of the performance problem.

How Do You Improve Largest Contentful Paint With Image Optimization?

LCP measures when the largest visible element finishes rendering. On most pages, that's a hero image, a product photo, or a banner.

If that image takes 4 seconds to load, your LCP is 4 seconds. Google wants it under 2.5. Here's how to close that gap.

Compress your images. A 2 MB hero image is too big. Compress it to 150-200 KB and the load time drops dramatically. Use a quality setting between 75-85% for photos. The visual difference is almost invisible, but the file size drops 80-90%.

Use modern formats. WebP files are 25-35% smaller than JPEG at the same quality. AVIF saves even more. Every modern browser supports WebP. Switching formats is one of the easiest LCP wins.

Resize to the display size. Don't serve a 4000px image when the page shows it at 800px. Resize first, then compress. This alone can cut file size by 70-80%.

Preload your LCP image. Add a preload hint in your HTML so the browser fetches the hero image immediately. Without it, the browser discovers the image only after parsing the CSS. That delay adds hundreds of milliseconds.

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

Set fetchpriority="high" on the LCP image. This tells the browser to prioritize this image over other resources. It's a small change that shaves real time off LCP.

Don't lazy-load your LCP image. This is a common mistake. Lazy loading delays the image until it scrolls into view. Your hero image is already in view on page load. Lazy loading it adds unnecessary delay and tanks your LCP score.

Does Lazy Loading Help or Hurt Core Web Vitals?

Lazy loading is great for images below the fold. It's terrible for images above the fold.

When you add loading="lazy" to an image, the browser waits until the user scrolls near it before downloading. This saves bandwidth for images users might never see. It reduces initial page weight and speeds up the first load.

But if you lazy-load the hero image or any image visible on the first screen, you're telling the browser to wait before loading the most important visual element on the page. That directly increases LCP.

Here's the rule. Lazy-load every image below the fold. Never lazy-load images above the fold. Your hero image, header logo, and any content visible without scrolling should load eagerly.

For most pages, that means 1-3 images load eagerly. Everything else gets lazy loading. This balance gives you the best LCP score while still saving bandwidth.

Also watch out for layout shifts from lazy-loaded images. When a lazy image loads and pushes content down, that's a CLS problem. Always set explicit width and height attributes on your images. The browser reserves space before the image loads, preventing layout jumps.

What Image Formats Give You the Best Core Web Vitals Scores?

The format you choose directly affects file size. Smaller files load faster. Faster loads mean better LCP.

WebP is the best default choice for web images right now. It compresses 25-35% better than JPEG with no visible quality loss. Browser support is over 97%. Unless you need to support very old browsers, WebP should be your go-to format.

AVIF compresses even better than WebP. Up to 50% smaller than JPEG. But encoding is slower, and browser support is still catching up. Use AVIF if your build pipeline supports it and you can serve fallbacks.

JPEG still works fine for photos. If you compress it well (quality 75-85), it's a solid choice. But WebP will almost always give you a smaller file at the same visual quality.

PNG is right for logos, icons, and images with transparency. But PNG files are large. If transparency isn't needed, convert to WebP or JPEG.

The <picture> element lets you serve the best format to each browser:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

This serves AVIF to browsers that support it, WebP to the next group, and JPEG as a fallback. Every visitor gets the smallest possible file their browser can handle.

How Do You Prevent Images From Causing Layout Shift?

Layout shift happens when an image loads and pushes other content around. The text you were reading suddenly jumps down. A button you were about to click moves. It's frustrating for users and bad for your CLS score.

The fix is simple. Always tell the browser how big the image will be before it loads.

Set width and height attributes on every image. The browser uses these to calculate the aspect ratio and reserve the right amount of space. Even if the image hasn't loaded, the layout stays stable.

<img src="/photo.webp" alt="Product photo" width="800" height="600">

Use CSS aspect-ratio for responsive images. If your images scale with the viewport, set the aspect ratio in CSS. The browser reserves the correct proportional space at any screen size.

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

Avoid inserting images dynamically above existing content. If JavaScript loads an ad banner or a carousel at the top of the page, everything below shifts. Either reserve space for dynamic content or load it below the fold.

Watch out for font-dependent layouts. Sometimes layout shift isn't from images at all. Web fonts loading late can reflow text and move images. Use font-display: swap and preload your key fonts.

What's a Good Image Optimization Checklist for Core Web Vitals?

Here's a step-by-step checklist you can follow for every page:

Before uploading:

Resize images to their display dimensions (2x for retina screens).
Compress images to the right quality. Use 75-85% for photos.
Convert to WebP or AVIF when possible.
Strip metadata (EXIF data, GPS coordinates, camera info).

In your HTML:

Set width and height on every <img> tag.
Add loading="lazy" to all images below the fold.
Add fetchpriority="high" to the LCP image.
Preload the LCP image with <link rel="preload">.
Use the <picture> element to serve modern formats with fallbacks.

After deploying:

Run Lighthouse or PageSpeed Insights. Check your LCP and CLS scores.
Look at the "Opportunities" section. It flags images that could be smaller.
Test on mobile. Mobile connections are slower, so image optimization matters even more there.

Following this checklist consistently will keep your Core Web Vitals green. Most sites see LCP drop by 1-3 seconds just from image optimization alone.

How Do You Test and Monitor Image Performance?

Optimizing once isn't enough. New images get added. Content changes. You need to monitor performance over time.

Google PageSpeed Insights gives you a quick snapshot. Paste any URL and get LCP, INP, and CLS scores for both mobile and desktop. It also shows field data from real Chrome users when available.

Lighthouse (built into Chrome DevTools) runs a full audit. It flags oversized images, missing lazy loading, images without dimensions, and images served in outdated formats. Run it in an incognito window to avoid extension interference.

Google Search Console shows Core Web Vitals data for your whole site. It groups URLs by status: good, needs improvement, or poor. Check this monthly to catch regressions early.

WebPageTest gives you a filmstrip view of your page loading frame by frame. You can see exactly when each image appears and how it affects the render timeline.

The comparison of popular compression tools can help you pick the right tool for your workflow. Whether you compress one image at a time or batch-process hundreds, the right tool makes optimization easy to maintain.

Ready to Fix Your Core Web Vitals?

Images are the biggest weight on most web pages. Optimizing them is the single highest-impact change you can make for Core Web Vitals.

Compress your images. Use modern formats. Set proper dimensions. Preload what matters. Lazy-load what doesn't.

CompressIMG handles the compression step. Upload your images, pick your quality, and download optimized files in seconds. No account needed. Start with your hero images and work down from there.

Your LCP score will thank you.