Core Web Vitals: How Images Impact Your Google Rankings

What Are Core Web Vitals?

Core Web Vitals are three specific metrics that Google uses as part of its page experience ranking signal. Since their introduction as a ranking factor in June 2021 — and subsequent updates through 2024 and 2025 — they've become essential for SEO. The three metrics are:

Metric	What It Measures	"Good" Threshold
LCP — Largest Contentful Paint	How quickly the largest visible element loads	≤ 2.5 seconds
CLS — Cumulative Layout Shift	How much the page layout shifts during loading	≤ 0.1
INP — Interaction to Next Paint	How quickly the page responds to user interactions	≤ 200 milliseconds

All three metrics are measured on real user data (Chrome User Experience Report) and reported in Google Search Console. Pages with "good" scores across all three metrics receive a ranking boost compared to pages with "poor" scores.

LCP: Largest Contentful Paint — The Image Metric

LCP measures the time from when a user navigates to a page until the largest content element in the viewport finishes rendering. In the vast majority of cases, the LCP element is an image — specifically a hero image, banner image, or large product photo.

According to Google's data, images are the LCP element on approximately 72% of mobile pages and 83% of desktop pages. This makes image optimisation the single most impactful thing you can do to improve LCP.

Common Causes of Poor LCP

Oversized images. Serving a 4000px-wide image when the viewport is 400px means the browser downloads 10× more data than needed.
Uncompressed images. A 3 MB JPEG hero image takes significantly longer to download than a 200 KB compressed WebP.
Wrong format. Using PNG for photographs can result in files 5–10× larger than the equivalent WebP or JPEG.
Lazy-loading the LCP image. If the hero image has loading="lazy", the browser delays loading it until the viewport scrolls near it — defeating the purpose of a hero image.
No preloading or priority hints. Without fetchpriority="high" or a <link rel="preload">, the browser may not prioritise the LCP image.
Render-blocking resources. Large CSS or JavaScript files that block rendering delay the entire page, including the LCP image.

How to Fix LCP

Compress the LCP image. Use our Image Compressor to reduce the hero image to under 200 KB while maintaining visual quality. Quality 70–80% is ideal for hero images.
Use WebP format. Convert your hero image to WebP with our Image Converter for an additional 25–35% size reduction over JPEG.
Resize to appropriate dimensions. Serve the hero image at 2× the display width maximum. If the hero displays at 1200px, resize to 2400px wide.
Add fetchpriority="high" to the LCP image tag. This tells the browser to prioritise downloading this image over other resources.
Do NOT lazy-load the LCP image. Remove loading="lazy" from your hero image. It should load eagerly.
Preload the LCP image in the <head>: <link rel="preload" href="hero.webp" as="image" fetchpriority="high">
Use responsive images with srcset to serve appropriately sized images for each device.

CLS: Cumulative Layout Shift — The Dimensions Metric

CLS measures how much the page's visible content shifts during loading. A common cause of layout shift is images loading without reserved space — when an image loads, it pushes content below it downward, creating a jarring experience.

You've experienced this: you start reading an article, and suddenly the text jumps down because an ad or image loaded above it. That's layout shift, and Google penalises it.

Common Causes of Image-Related CLS

Missing width and height attributes. Without explicit dimensions, the browser allocates zero space for the image until it loads.
CSS that overrides dimensions. If CSS sets width: 100% without a corresponding aspect-ratio, the browser still doesn't know the height until the image loads.
Dynamically inserted images. JavaScript that adds images to the page after initial render causes layout shifts.
Web fonts causing text reflow. While not directly an image issue, large font file downloads can cause text around images to reflow.

How to Fix Image-Related CLS

Always include width and height attributes on every <img> tag. These don't need to be the exact pixel size — they just need to have the correct aspect ratio.
Use CSS aspect-ratio for responsive images: img { aspect-ratio: 16 / 9; width: 100%; height: auto; }
Reserve space with containers. Wrap images in a container with the correct padding-based aspect ratio or a fixed height.
Avoid inserting images above existing content after initial page load. If you must, use content-visibility: auto to contain the layout impact.

INP: Interaction to Next Paint — The Responsiveness Metric

INP replaced First Input Delay (FID) in March 2024 as the official responsiveness metric. It measures the time from when a user interacts with the page (click, tap, keypress) to when the browser renders the next visual update.

While INP is primarily about JavaScript execution, images can indirectly impact INP:

Image decoding on the main thread. Very large images can block the main thread during decoding, delaying response to user interactions. Add decoding="async" to images to move decoding off the main thread.
JavaScript-heavy image processing. Client-side image manipulation (canvas operations, WebGL filters) can block the main thread. Use Web Workers for heavy image processing.
Third-party image scripts. Some image CDNs and lazy-loading libraries inject JavaScript that can block the main thread. Audit your image-related scripts with Chrome DevTools' Performance panel.

How to Measure Core Web Vitals

Use these tools to measure your site's CWV scores:

Google PageSpeed Insights (pagespeed.web.dev) — Shows both lab data (simulated) and field data (real users). The field data section is what Google uses for ranking.
Google Search Console — The "Core Web Vitals" report shows which pages have "Good", "Needs Improvement", or "Poor" scores based on real user data.
Chrome DevTools Lighthouse — Built into Chrome, provides detailed lab measurements and specific recommendations.
Web Vitals extension — A Chrome extension that shows CWV scores in real-time as you browse your site.

Complete CWV Image Optimisation Checklist

✅ Identify your LCP element (usually a hero image) using PageSpeed Insights
✅ Compress the LCP image to under 200 KB with our compressor
✅ Convert to WebP format with our converter
✅ Add fetchpriority="high" to the LCP image
✅ Remove loading="lazy" from the LCP image
✅ Preload the LCP image in <head>
✅ Add width and height to all <img> tags
✅ Add loading="lazy" to all below-the-fold images
✅ Add decoding="async" to non-critical images
✅ Use srcset for responsive images
✅ Resize images to display dimensions (2× for Retina)
✅ Serve images through a CDN
✅ Audit and minimise third-party image scripts
✅ Measure with PageSpeed Insights after changes

The Business Impact of Good CWV Scores

Improving Core Web Vitals isn't just about SEO. Real-world case studies consistently show significant business impact:

Vodafone improved LCP by 31% and saw a 8% increase in sales.
NDTV reduced LCP by 55% and saw a 50% reduction in bounce rate.
Agrofy achieved 76% more organic traffic after reaching "good" CWV thresholds.

The pattern is clear: faster pages with better CWV scores lead to more traffic, lower bounce rates, and higher conversions. And image optimisation is the fastest path to better CWV scores.

Start Improving Your CWV Scores

Begin with the highest-impact optimisation: compress and convert your hero image. Use our Image Compressor and Image Converter to get it under 200 KB in WebP format. Then work through the checklist above for all remaining images.