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 ImageAlchemy before anything else. Getting format and dimensions right fixes more Core Web Vitals problems than any code change.
Where your page weight actually goes
Hover any segment. The image slice is where the leverage is — and it is the easiest to fix.
Images 49% · ≈1.37 MB
The single largest category, and the most compressible. Modern formats typically cut 40–65% of these bytes with no visible change — this is the highest-leverage fix on almost every page.
What optimising the images alone buys you
Optimising images alone takes this page from 2.80 MB to 2.24 MB — a 20% lighter page, without touching a line of JavaScript or CSS.
Composition reflects the shape of the typical page in HTTP Archive's page-weight research, not a live measurement of your site. The reduction figures are measured: re-encoding the same source produced −41% (balanced) and −63% (aggressive). To measure your own pages, use the ImageAlchemy Pro audit.
Related guides
Compress your images now — free and private
Drop your files and ImageAlchemy compresses them in your browser. No uploads, no accounts, no limits. Batch process hundreds at once and download a ZIP.