Why images are the biggest lever

Core Web Vitals are Google's metrics for real-world user experience — and on most pages, images are what makes or breaks them. The largest visible element is usually an image, the biggest layout jumps come from images loading late, and images are often the heaviest bytes on the page. Fix the images, and two of the three Core Web Vitals improve almost on their own.

The three metrics in plain terms

  • LCP (Largest Contentful Paint): when the largest immediately visible element has loaded — usually a hero image. Measures perceived load speed.
  • CLS (Cumulative Layout Shift): how much the layout jumps while loading — mostly caused by images without reserved space.
  • INP (Interaction to Next Paint): how quickly the page reacts to input. Less image-driven, but a lean page helps here too.

Fix 1: make the LCP image fast

The largest visible image usually is the LCP element. Three steps make it fast:

  1. Never lazy-load it. The hero image must load early — a pervasive mistake is putting loading="lazy" on it.
  2. Optimize it. Bring it to the right dimensions (resize) and compress it (compression). A 4 MB hero image can never be fast.
  3. Prioritize it. Preload it or set fetchpriority="high" so the browser loads it first.

Fix 2: stop layout shift (CLS)

When an image loads without the browser knowing its size, the content below jumps. Google measures this as CLS. The fix is trivial: give every image its real pixel dimensions:

<img src="photo.jpg" alt="..." width="1200" height="800">

The browser computes the aspect ratio (here 3:2) and reserves the space before the image arrives — nothing jumps. With CSS (width:100%; height:auto) the image stays fully responsive. Same idea via aspect-ratio for containers and embeds.

Fix 3: serve the right size to every device

A 4K image on a 400-pixel phone is wasted bandwidth and slow. Responsive images (srcset/sizes) let the browser load only the fitting variant — small for phones, large for desktops. This directly speeds up loading on mobile, where Core Web Vitals matter most.

Fix 4: modern formats and caching

  • Modern formats: WebP and AVIF are markedly smaller than JPG/PNG at similar quality — serve them with a fallback via the picture element.
  • Caching: images that a returning visitor already has don't need to reload. Long cache lifetimes plus filename-based cache-busting give you speed without stale images.
  • Lazy-load below the fold: images the user may never reach shouldn't load up front.

The priority order

If you do only a few things, do them in this order:

  1. Compress and right-size all images — the biggest single win.
  2. Add width/height everywhere — kills CLS.
  3. Prioritize the LCP image, lazy-load the rest.
  4. Modern formats + caching as the finishing touch.

💡 Tip: Compress and resize your images browser-locally — no upload, and you see the size drop instantly.

Conclusion

Core Web Vitals sound technical, but on most pages they come down to images: a fast, prioritized hero image, reserved space to prevent jumps, and lean, right-sized files. Get the images right and the scores follow.