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

30‑second interview answer

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.