Images and Core Web Vitals

Last updated: February 4, 2026

Why images matter

For many sites, images are the largest resources on the page. That means image choices can make or break performance scores — and users feel the difference.

Compress images now

LCP (Largest Contentful Paint)

LCP is often a hero image. If the hero image is huge or in an inefficient format, your LCP suffers. Practical fixes:

  • Resize to the real display size (don’t ship 4000px if you show 1400px)
  • Prefer WebP for modern browsers when possible
  • Use a reasonable quality (often 75–85% for photos)
  • Preload the hero image when it’s the LCP element

CLS (Cumulative Layout Shift)

CLS happens when the page layout moves as things load. Images cause CLS when the browser doesn’t know how much space to reserve.

  • Always set width and height attributes (or reserve space via CSS)
  • Avoid inserting images above existing content after load
  • Use consistent aspect ratios for grids

INP (Interaction to Next Paint)

Images can affect INP indirectly: heavy decoding and scripting can compete with user interactions. Keep pages responsive by:

  • Lazy-loading below-the-fold images
  • Reducing the number of large images on initial load
  • Avoiding huge animated images where possible

A simple checklist

  • Resize to the real display size
  • Pick the right format (JPEG/WebP for photos, PNG/WebP for transparency)
  • Compress with a consistent quality level
  • Lazy-load non-critical images
  • Set dimensions to prevent CLS
Back to guides

Related guides