Image Optimization Strategy

The plain-language idea

A real image strategy is three layered decisions, not one setting:

• Format — modern formats like AVIF and WebP produce meaningfully smaller files than JPEG or PNG at equivalent visual quality. Since not every browser supports every format, <picture> lets you offer a modern format with an older-format fallback, and srcset can do the same job for a plain <img>.
• Responsive sizing — srcset plus sizes lets the browser pick from several resolutions of the same image, so a phone downloads a phone-sized file instead of the same 2400px-wide image a desktop hero uses.
• Loading priority — loading="lazy" defers a below-the-fold image's fetch so it doesn't compete with above-the-fold resources for bandwidth early in the page load.

Each decision is independent: you can pick the wrong format on a correctly-sized, correctly-prioritized image, or the right format on an image that's still loading at the wrong priority.

See it in a real thing: a responsive, format-aware hero image

<picture>
  <source
    type="image/avif"
    srcset="/hero-480.avif 480w, /hero-1200.avif 1200w, /hero-2400.avif 2400w"
  />
  <source
    type="image/webp"
    srcset="/hero-480.webp 480w, /hero-1200.webp 1200w, /hero-2400.webp 2400w"
  />
  <img
    src="/hero-1200.jpg"
    srcset="/hero-480.jpg 480w, /hero-1200.jpg 1200w, /hero-2400.jpg 2400w"
    sizes="100vw"
    width="2400"
    height="1350"
    alt="Product dashboard overview"
  />
</picture>

The browser walks the <source> elements in order, picks the first format it supports, then within that format picks the resolution that matches the actual viewport via sizes. The plain <img> at the bottom is the fallback for browsers that support neither modern format, and it still carries its own srcset for sizing. width/height are present regardless of any of this — they reserve layout space immediately, which is the same fix the Core Web Vitals lesson covers for CLS, and it doesn't go away just because you've solved format and sizing.

What people usually miss

Watch out

• loading="lazy" on the LCP image is a self-inflicted LCP regression, not a neutral choice. Lazy-loading is for below-the-fold images specifically; the above-the-fold hero or LCP candidate should load eagerly, at high priority.
• Format savings and responsive sizing are independent wins that stack. Serving AVIF instead of JPEG helps regardless of whether you also fix sizing, and fixing sizing (so a phone doesn't download a 2400px image) helps regardless of format — skipping one doesn't get you the other's benefit.
• sizes without a correct srcset (or vice versa) silently defeats responsive sizing. The browser needs both: srcset for the candidate resolutions, sizes for how much viewport space the image will actually occupy, so it can pick correctly.
• Explicit width/height (or CSS aspect-ratio) is still required even with modern formats and lazy loading. None of format, sizing, or loading strategy reserves layout space on their own — that's a separate, still-necessary fix for CLS.
• A fallback chain adds real decode/negotiation cost of its own if it's too long. Supporting every format back to ancient browsers has a maintenance and payload cost — most teams get most of the benefit from AVIF-then-JPEG or WebP-then-JPEG, not a five-format chain.

Why this matters in interviews

"The homepage hero image is huge and it's hurting LCP — walk me through how you'd fix it" is a real, layered question, and treating it as three separate levers (format, responsive sizing, loading priority) rather than one vague "compress the image" answer is what distinguishes a senior response.