Images and Core Web Vitals: fixing LCP, INP and CLS
Images are the number one cause of poor Core Web Vitals. Here's exactly how each metric is affected and the fixes that move your scores green — with the impact you can expect from each.
What are Core Web Vitals?
Core Web Vitals are Google's three metrics for page experience: LCP (Largest Contentful Paint — loading), INP (Interaction to Next Paint — responsiveness) and CLS (Cumulative Layout Shift — visual stability). Google measures these from real users (field data via the Chrome UX Report) and uses them as ranking signals.
Images touch all three — usually negatively. The hero image is very often the LCP element, heavy main-thread work during image decoding blocks INP, and images without dimensions cause CLS.
LCP — the hero image problem
LCP measures when the largest visible element renders. On most pages that's a hero image or banner. Targets: under 2.5 seconds for at least 75% of page loads.
Fixes, in order of impact: compress and convert to AVIF/WebP (biggest single win); resize to display dimensions; set fetchpriority="high" on the LCP image; preload it; avoid lazy-loading it; serve it from a CDN with long cache headers.
INP — decoding blocks interaction
INP measures how quickly the page responds to taps and clicks. Large images decoding on the main thread delay that response. Target: under 200 milliseconds.
Fixes: ship fewer, smaller images; use modern formats (they decode faster per byte); lazy-load below-the-fold images so decoding is deferred; keep the main thread free during scrolling.
CLS — images without dimensions
When an image loads without reserved space, everything below it jumps. That shift accumulates into CLS. Target: under 0.1.
Fixes: always set explicit width and height attributes (the browser computes the aspect ratio and reserves space); use aspect-ratio in CSS; reserve space for ads and embeds; avoid injecting images above existing content.
Measuring and prioritizing fixes
Measure with PageSpeed Insights or Search Console (field data) and Chrome DevTools' Performance panel (lab data). Fix LCP first — it has the largest effect on both scores and perceived speed. Then CLS (cheap and quick: add dimensions), then INP.
Run your images through ImageForge before anything else. Getting format and dimensions right fixes more Core Web Vitals problems than any code change.
Related guides
Compress your images now — free and private
Drop your files and ImageForge compresses them in your browser. No uploads, no accounts, no limits. Batch process hundreds at once and download a ZIP.