Lazy loading with image optimization

Images are usually 60–80% of a page's bytes. The fix isn't one trick — it's stacking four cheap ones.

1. Lazy load below-fold imagery.

<img src="hero.jpg" alt="..." width="800" height="600" loading="eager" fetchpriority="high">
<img src="..." loading="lazy" alt="...">

loading="lazy" is native (no IntersectionObserver wiring needed). Set on below-the-fold images only — putting it on the LCP image delays the largest paint and hurts the score.

2. Mark the LCP image as high-priority.

<img src="hero.jpg" fetchpriority="high" loading="eager" ...>
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

Without this, the browser may queue the hero behind CSS or font fetches. fetchpriority="high" (Chrome) and a <link rel="preload"> for cross-browser support get it onto the wire ASAP.

3. Responsive images — srcset + sizes.

<img
  srcset="
    img-400.jpg  400w,
    img-800.jpg  800w,
    img-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  src="img-800.jpg"
  width="800" height="600"
  alt="...">

The browser picks the right variant given viewport width, DPR, and the sizes hint. A phone never downloads the 1600w version.

4. Modern formats with fallback.

<picture>
  <source type="image/avif" srcset="img.avif">
  <source type="image/webp" srcset="img.webp">
  <img src="img.jpg" alt="..." width="800" height="600">
</picture>

AVIF is ~50% smaller than JPEG at equivalent quality; WebP is ~25–30% smaller. <picture> falls through gracefully for older clients.

5. Reserve space (no CLS).

Always set width + height attributes or CSS aspect-ratio. The browser computes the box before the image loads, so content below doesn't jump:

img { aspect-ratio: 4 / 3; width: 100%; height: auto; }

6. Use an image CDN. Hand-generating 6 variants × AVIF/WebP/JPG is unmaintainable. next/image, Cloudinary, imgix, Cloudflare Images, etc., serve variants on demand from a single source. They handle DPR, format negotiation via Accept, and quality tuning.

7. Placeholders. Three strategies:

• Blurhash / LQIP (low-quality image placeholder) — a base64'd tiny version (~30 bytes) inlined as background-image, blurred via CSS. Hides decode latency.
• Dominant color — single CSS background-color while the image loads.
• Skeleton — gray rectangle. Fine for grids; less visually integrated.

8. Decode and concurrency hints.

• decoding="async" — tells the browser to decode off-main-thread.
• Avoid background-image: url(...) for content imagery. It can't be <img loading="lazy">, can't have alt, can't be in srcset. Background images are for decoration only.

The senior framing — LCP first. The single biggest image-perf win for most pages is making the LCP image load faster. That means: preload it, mark fetchpriority="high", serve AVIF, dimension it correctly so it doesn't shift, and never lazy-load it. Other images can do whatever — they don't move the Core Web Vital.

Measure.

• <link rel="preload"> shows up in WebPageTest waterfalls — verify the hero image is fetched in the first wave.
• Chrome → Performance → LCP marker. The LCP element is highlighted — its source URL is what to optimize.