How Image Optimization Improves Core Web Vitals and SEO

Google confirmed Core Web Vitals as a ranking signal in May 2021, and for most websites the biggest single lever on those scores is image optimization. A badly served hero image tanks Largest Contentful Paint on its own. A properly sized, properly compressed one can cut that same LCP in half.

The recipe isn’t complicated, but the details matter. This article lays out exactly how each Core Web Vital is affected by images, and the specific, measurable changes that move each metric.

The three Core Web Vitals (and the one that matters most for images)

As of 2026, Google tracks three Core Web Vitals:

Largest Contentful Paint (LCP): how long it takes for the largest visible element to render. Target is under 2.5 seconds. Heavily affected by images.
Cumulative Layout Shift (CLS): how much the page shifts around as it loads. Target is under 0.1. Affected by images that load without reserved space.
Interaction to Next Paint (INP): how responsive the page feels to user interaction. Target is under 200 ms. Less directly affected by images. (INP replaced First Input Delay in March 2024.)

LCP is where image optimization earns its keep. On the average content site, the LCP element is an image: hero photo, product shot, illustration. Make that one image render faster and your LCP score improves directly, before you touch anything else.

How LCP actually works

LCP is measured from the moment the page starts loading to the moment the largest visible element finishes rendering. The “largest visible element” is chosen heuristically, usually the biggest image, video poster, or block of text in the viewport.

The total time is split into four parts:

Time to first byte (TTFB), your server’s response time.
Resource load delay, the gap between TTFB and the browser actually starting to download the LCP resource.
Resource load duration, the download itself.
Element render delay, the small gap between the resource arriving and the element appearing on screen.

Image optimization primarily attacks step 3 (smaller resource = faster download), but it also helps step 2 indirectly by making the resource discoverable earlier.

What hurts LCP for images

The most common LCP killers, roughly in the order they show up in our audits:

Oversized images. A 4000-pixel hero displayed at 1200 px wastes 90% of the bytes it forces the browser to download. Resize to display dimensions, or ship an srcset.
Wrong format. Serving a 5 MB PNG photograph instead of a 500 KB JPEG triples the load time on a slow connection.
No fetchpriority="high" on the LCP image. The browser doesn’t automatically know which image is the LCP candidate and may prioritize others. A single attribute fixes this.
Lazy-loading the hero. loading="lazy" is great for below-the-fold content but a disaster on the hero. Keep it eager.
Image discovered late. If the LCP image lives in a CSS background-image or sits behind a JavaScript loader, the browser finds it later than it should. Put the LCP image in a plain <img> tag in the HTML.
Render-blocking CSS or JS. Even an optimized image can’t render until the browser has parsed enough of the page. Inline critical CSS and defer non-critical JS.

The concrete LCP checklist

For every important page on your site:

Identify the LCP element. Use Chrome DevTools → Performance → Web Vitals overlay, or PageSpeed Insights. Look for the “Largest Contentful Paint element” line.
If it’s an image, check its served size. DevTools → Network → click the image → see the file size and decoded dimensions.
Resize to display size. If the displayed image is 800×450, serve it at 800×450 (or 1600×900 for Retina). Anything larger is wasted bandwidth.
Pick the best format. Photographs → JPEG, WebP, or AVIF. Use <picture> to serve all three.
Compress with sensible quality. JPEG 75–85, WebP 75–85, AVIF 55–65 for photographs.
Add fetchpriority="high" to the LCP image’s <img> tag.
Avoid loading="lazy" on the LCP image.
Add explicit width and height attributes to prevent layout shift.
Preload critical fonts that affect the LCP element’s surrounding text.

Apply this checklist and most sites see LCP improvements of 30–60% on the affected pages.

How CLS is affected by images

Cumulative Layout Shift measures how much elements move around during page load. The single biggest cause of CLS related to images is images without dimensions.

When the browser parses an <img> tag, it needs to reserve space for the image before the image data arrives. If the tag has width and height attributes, the browser reserves a box of the right aspect ratio immediately. If it doesn’t, the browser places a 0×0 box and pushes everything down when the image arrives.

Even a single uncomposed image above the fold can spike your CLS score above the 0.1 threshold.

How to fix CLS from images

Always include width and height as HTML attributes on <img> tags. The values should match the image’s intrinsic dimensions, not the display size. CSS still handles display sizing separately.

<img src="hero.jpg" width="1600" height="900" alt="...">

For responsive images, the width and height attributes still work. Modern browsers compute the aspect ratio and reserve space accordingly.

Avoid injecting images via JavaScript above the fold. Anything injected after load shifts the page and costs you CLS.

Use aspect-ratio in CSS as a backup where you can’t set HTML attributes, for example on CSS background images that need to hold proportions.

This fix is mechanical and one-time. Once your templates emit width and height for every image, CLS problems caused by images mostly disappear forever.

How INP is (indirectly) affected by images

Interaction to Next Paint measures how long the browser takes to respond to user interactions (clicks, taps, key presses). It’s primarily a JavaScript performance metric, but images contribute indirectly in three ways:

Decoding huge images on the main thread can block interactions. A user clicks while the browser is decoding a 50 MB image and INP suffers.
Image-heavy pages tend to carry heavy CSS (loaders, lightboxes) that slows interaction.
Some image plugins inject a lot of JavaScript to handle lazy loading, which can regress INP.

Fixes are mostly indirect: keep images modestly sized, use the platform’s native loading="lazy" instead of JavaScript lazy loaders, and avoid plugins that bundle 50 KB of script to do what <img> tags do natively.

How this all flows into SEO

Google has been explicit that Core Web Vitals are a ranking signal, especially as a tiebreaker between pages of similar topical authority. The mechanics are straightforward:

Core Web Vitals are measured in real-world Chrome usage via the Chrome User Experience Report (CrUX).
A page “passes” if 75% of page loads meet the threshold for all three metrics.
Pages that pass get a small but real boost against competitors that don’t, all else equal.

The boost isn’t enormous. Google has been clear that CWV is one signal among many. But the boost compounds because every page benefits, it’s cheap to obtain (most wins are mechanical, one-time fixes), and it’s bidirectional. If you don’t fix it and your competitor does, you fall behind.

For content-driven sites (blogs, news, e-commerce), this usually translates into measurable organic-traffic gains over the months following the work.

Beyond Core Web Vitals: the broader SEO picture

Image optimization affects SEO through several other channels:

Crawl budget. Smaller images mean Google’s crawler fetches more pages in the time it allots to your site.
Mobile rankings. Mobile traffic dominates, and image-heavy pages get penalized harder there than on desktop.
Image search. Properly captioned, properly sized images can rank in Google Images and drive an additional traffic stream.
Bounce rate, indirectly. Slow pages get abandoned. Faster pages retain users longer, which correlates with better rankings.

A worked example

Take a recipe blog we worked on last year. Starting point:

200 recipe pages, each with a five-image gallery.
Average image: 3 MB JPEG, 3000×2000 px, displayed at 800×533.
Average page weight: 18 MB.
LCP: 5.2 seconds on mobile.
CLS: 0.18, driven by images without dimensions.
Rankings sitting just outside the top 10 on most target queries.

After optimization:

Resized all images to 1600×1067 (Retina-sized for the 800-wide display).
Converted to WebP quality 80, averaging about 250 KB each.
Added width and height to every <img> tag in the theme.
Added fetchpriority="high" to the hero recipe photo on each page.
Lazy-loaded the gallery thumbnails below the fold.

Results after the change:

Average page weight: 1.5 MB, or 12× smaller.
LCP: 1.6 seconds on the same mobile test.
CLS: 0.02.
Organic traffic on previously borderline pages up 15–25% within eight weeks.

Numbers vary by site, but this pattern repeats with remarkable consistency on content sites.

The order of operations that matters

If you only have a few hours, do this in order:

Find your LCP element on each top page.
Resize and reformat that image. Biggest lever by far.
Add width and height to every image in your templates.
Add fetchpriority="high" to LCP images.
Lazy-load below-the-fold images using the platform’s native loading="lazy".
Move on to the next page.

Marginal gains drop off fast after step 1. A handful of hero images on your top 20 pages usually captures 80% of the available improvement.

What not to obsess over

Saving the last 20 KB on a 200 KB image. The difference between WebP at quality 80 and quality 75 rarely shows up in real-world LCP measurements.
Plugins that promise “AI optimization.” In our testing these deliver the same results as a well-tuned conventional encoder, often with extra latency and cost.
Converting old archive content. Focus on pages that get traffic. Pages nobody visits don’t move your aggregate Core Web Vitals score either way.

The bottom line

For most content sites, image optimization is the single best-return SEO performance work you can do. The Core Web Vitals impact is direct and measurable. The wins are mechanical and one-time. And the SEO benefits compound as Google re-crawls and re-evaluates your pages.

The recipe isn’t complicated. Pick the right format. Resize to display dimensions. Set explicit dimensions in HTML. Prioritize the LCP image. Apply that consistently and most sites move from “needs improvement” to “good” within weeks.

For one-off conversions, our PNG to WebP and JPG compressor run entirely in your browser. For batch work, pair them with a build pipeline or a CDN that does format negotiation at the edge.