Faster images: formats, sizing and lazy loading

On most pages, images are the largest bytes downloaded and often the largest element painted. Three habits (modern formats, correct dimensions, and deferring off-screen images) deliver the biggest, easiest performance wins.

Use modern formats

AVIF and WebP are dramatically smaller than JPEG/PNG at the same quality. Serve them with a fallback so older browsers still get an image.

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="…" width="1200" height="630">
</picture>

Always set width and height

Without intrinsic dimensions, the browser doesn't know how much space an image needs until it loads, so content jumps as images arrive. Setting width and height (or a CSS aspect-ratio) reserves the space and keeps Cumulative Layout Shift near zero.

Serve the right size

Don't ship a 2000px image into a 400px slot. Use srcset and sizes so each device downloads an appropriately sized file.

<img src="card-800.webp"
     srcset="card-400.webp 400w, card-800.webp 800w, card-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw, 400px"
     width="800" height="600" alt="…">

Lazy-load below the fold, eager-load the hero

Add loading="lazy" to images below the fold so they don't compete with the initial render. But do NOT lazy-load your largest above-the-fold image (often the LCP element), load it eagerly, and consider preloading it.

<!-- below the fold -->
<img src="…" loading="lazy" decoding="async" width="…" height="…" alt="…">

How to fix it

1. Convert large JP/PNG assets to AVIF/WebP with fallbacks.
2. Add width/height (or aspect-ratio) to every image to stop layout shift.
3. Use srcset/sizes so devices fetch an appropriate resolution.
4. Lazy-load off-screen images; keep the LCP image eager and re-scan.