How to Optimize Images for Google Core Web Vitals

Google's Core Web Vitals are now a confirmed ranking factor. For most websites, images are the primary bottleneck — fixing them is the fastest path to a better score.

What Are Core Web Vitals?

Core Web Vitals are a set of metrics Google uses to measure real-world user experience on web pages. They became a ranking signal in 2021 and have grown in importance since. The three main metrics are: LCP (Largest Contentful Paint), INP (Interaction to Next Paint, replaced FID in 2024), and CLS (Cumulative Layout Shift).

LCP: The Most Image-Critical Metric

Largest Contentful Paint measures how long it takes for the biggest visible element on the page to render. On most pages, this element is an image — typically the hero image or a large product photo. Google's target: under 2.5 seconds on mobile.

To improve LCP through image optimization:

Compress your hero image — aim for under 150–200KB for a full-width hero image
Use WebP format — 25–35% smaller than equivalent JPEG
Preload the LCP image — add <link rel="preload" as="image"> for the hero
Use responsive images — serve appropriately-sized images for each screen size

CLS: Prevent Layout Shift from Images

Cumulative Layout Shift measures visual stability. Images cause CLS when their dimensions aren't specified — the browser doesn't know how much space to reserve, causing content to jump as images load.

Fix: Always add width and height attributes to your <img> tags, or use CSS aspect-ratio.

Image Optimization Checklist for Core Web Vitals

Compress all images, especially above-the-fold content — use Noxoro to compress to under 200KB
Convert to WebP format wherever possible
Add width and height to all img tags
Add loading="lazy" to all below-the-fold images
Preload your LCP image in the HTML <head>
Use responsive srcset to serve mobile-appropriate sizes
Consider a CDN for global image delivery

How to Measure Your Image Impact

Use Google PageSpeed Insights (free) to identify which images are causing the most performance issues. It will flag "Serve images in next-gen formats," "Properly size images," and "Efficiently encode images" — all solvable with image compression.

Lighthouse in Chrome DevTools provides even more detail, including the exact file sizes Google recommends for each image on your page.

Real Impact: A Case Study

After implementing image compression and switching to WebP, many sites report LCP improvements of 40–60% and significant jumps in Google rankings. Google's own data shows that improving LCP from "poor" to "good" can increase conversions by up to 10%.