Core Web Vitals and Image SEO: The Complete Guide

Why images are usually the root cause of poor Core Web Vitals

When a page fails Google's Core Web Vitals thresholds, images are the most common culprit — more than JavaScript bundles, more than fonts, more than third-party scripts. A single unoptimized hero image can single-handedly push Largest Contentful Paint (LCP) past the 2.5-second "good" threshold, and Core Web Vitals are a confirmed Google ranking factor, not just a performance nicety.

The three metrics that matter, and how images affect each

Largest Contentful Paint (LCP)

LCP measures how long it takes the largest visible element — usually a hero image or banner — to render. If that image is a 4MB PNG straight out of a camera, the browser has to download and decode all of it before the page feels "loaded," no matter how fast your server responds.

Fix: compress every image that appears above the fold, and serve it in a modern format (WebP or AVIF) at the smallest dimensions it will actually be displayed at.

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much content jumps around as the page loads. Images without explicit width/height attributes are one of the most common causes: the browser doesn't know how much space to reserve, so surrounding content shifts once the image finally loads.

Fix: always specify width and height (or use a framework's built-in image component, which does this automatically) so the browser reserves the correct space before the image arrives.

Interaction to Next Paint (INP)

INP is less directly tied to images, but large, unoptimized images competing for bandwidth and decode time can delay the main thread from responding to user input — especially on mid-range mobile devices, which make up the majority of shopping traffic on most eCommerce sites.

The practical checklist

1. Compress every image — WebP at 75-85% quality is a safe default for photos; run product images through the Image Compressor before uploading anywhere.
2. Serve the right dimensions — don't upload a 4000px-wide image and let CSS shrink it to 400px; resize it to the size it's actually displayed at.
3. Lazy-load below-the-fold images — images the visitor hasn't scrolled to yet shouldn't compete with your LCP element for bandwidth.
4. Set explicit dimensions — prevents layout shift as images load in.
5. Use a modern format — WebP or AVIF over JPG/PNG wherever the platform supports it.

How much does this actually move rankings?

Core Web Vitals are one signal among many, and strong content plus a good backlink profile will usually outweigh a mediocre Core Web Vitals score. But among pages that are otherwise similar in quality, Google has been explicit that Core Web Vitals act as a tiebreaker — and on mobile, where most eCommerce traffic now happens, the gap between a well-optimized and poorly-optimized page is large enough to matter for conversion rate on its own, independent of ranking.

Frequently asked questions

What's a "good" LCP score? Under 2.5 seconds. 2.5-4 seconds is "needs improvement," and anything above 4 seconds is classified as "poor."

Does image format alone fix Core Web Vitals? No — format is one lever among several (compression, dimensions, lazy loading, CDN delivery). Fixing format while leaving a 6000px-wide file in place won't solve LCP.

Can I check my own site's Core Web Vitals? Yes, for free — Google's PageSpeed Insights and the Core Web Vitals report in Google Search Console both show real-world data for your domain.

Should I lazy-load my hero image too? No — lazy-loading the LCP element itself typically hurts, not helps, since it delays the very element the metric is measuring. Only lazy-load images below the initial viewport.

Related tools

Start with the Image Compressor for file size, then Smart Crop to make sure you're never serving a larger image than the layout actually needs.