Core Web Vitals: how image optimization fixes LCP and CLS

Performance · 2025-04-22 · 8 min read

Core Web Vitals are Google ranking signals, and images are the biggest factor you can control. Here's how each vital connects to images and exactly what to change.

LCP — Largest Contentful Paint

On most pages the LCP element is the hero image. Its load time roughly tracks its file size, so the fix is direct:

• Convert the hero to WebP and compress to ~82%.
• Right-size it to its display width with the resizer.
• Preload it: <link rel="preload" as="image" href="hero.webp">.
• Don't lazy-load the LCP image — it must load immediately.

CLS — Cumulative Layout Shift

Layout shift happens when images load without reserved space and push content around. Fix it by always setting width and height (or CSS aspect-ratio) on every image.

INP — Interaction to Next Paint

Smaller images mean less main-thread decode work, which helps responsiveness. Avoid giant images that the browser must decode during interactions.

The checklist

1. Hero → WebP, ~82%, right-sized, preloaded, not lazy.
2. All images → width/height set.
3. Below-the-fold → loading="lazy".
4. Whole library → bulk compressed to WebP.

Image optimization is the highest-leverage Core Web Vitals work for most sites. Related: image optimization for SEO.