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.