Images for Performance: Sizes, Formats, Priority, and Preload

What you’ll learn

Why images are the #1 LCP culprit
How to use responsive images correctly (srcset, sizes)
When to preload the hero image and when not to

Images dominate page weight and often determine LCP. The correct strategy is: serve the right size for the viewport, use modern formats (AVIF/WebP), reserve space to avoid CLS, lazy-load non-critical images, and prioritize the LCP image (sometimes with preload). Preloading helps only when it shortens the critical path—otherwise it can waste bandwidth.

Case study (real): frontendinterview.in

Quick lab snapshot (Chrome on desktop, cold-ish load):

Homepage LCP: ~2.2s (LCP element was a text block)
Homepage CLS: 0.00
Heaviest above-the-fold images were coming through /_next/image and were roughly 15–30KB transfer each in this run.

What this tells us:

CLS is already in a good place (space is being reserved well).
The site is not “image-weight heavy” right now, but the same image rules still matter because the hero image often becomes the LCP element as content evolves.

The biggest mistake: shipping one huge image to everyone

If you always ship a 2000px-wide JPEG, mobile users pay for it.

Responsive images fix this.

Responsive images: `srcset` + `sizes`

Example: a hero image

<img
  src="/img/hero-1200.jpg"
  srcset="/img/hero-640.jpg 640w, /img/hero-1200.jpg 1200w, /img/hero-2000.jpg 2000w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200"
  height="800"
  alt="..."
/>

What this achieves:

Browser picks the best candidate based on viewport and DPR
width/height reserves space → reduces CLS

LCP hero strategy (practical)

Do

Ensure the hero is discoverable early in HTML
Keep CSS from delaying it
Compress aggressively

Consider preload (carefully)

<link
  rel="preload"
  as="image"
  href="/img/hero-1200.webp"
  imagesrcset="/img/hero-640.webp 640w, /img/hero-1200.webp 1200w"
  imagesizes="(max-width: 768px) 100vw, 1200px"
/>

Don’t

Preload many images (you’ll compete with CSS/JS/fonts)
Preload non-LCP images

Lazy loading: where it helps

Use lazy loading for images below the fold:

<img loading="lazy" decoding="async" ... />

But avoid lazy-loading the LCP image—it delays it.

Format choices (simple rule)

Prefer AVIF when possible (best compression)
Otherwise WebP
Fallback to JPEG/PNG when needed

Also ensure you don’t ship giant PNGs when JPEG/WebP works.

Common mistakes

Missing sizes (browser downloads larger than needed)
Lazy-loading the hero image
No dimensions → CLS
Serving “retina” images to everyone

Production rule of thumb

Your LCP image should be:
- correctly sized
- compressed
- not lazy-loaded
- often prioritized/preloaded (if it shortens the critical path)

Quick recap

Images often control LCP.
Use srcset + sizes + dimensions.
Lazy-load below-the-fold.
Preload only the LCP image when it truly helps.