The image strategy that shaved 2.1s off our clients' LCP without touching the design

You can obsess over JavaScript bundle size for weeks and still lose the Core Web Vitals fight because of one 2.4MB hero image. Images are still the single biggest performance lever on 80% of the sites we audit, and the fix stack has matured enough in 2026 that there's no excuse for shipping unoptimized. Here's the exact playbook.

1. Default to AVIF, fall back to WebP, fall back to JPEG. AVIF is now supported in every modern browser and delivers 30–50% smaller files than WebP at the same quality. Use `<picture>` with three sources ordered AVIF → WebP → JPEG, so every browser gets the smallest format it can decode.

2. Serve the exact size the viewport needs. Every image should have `srcset` with 3–5 width variants and a matching `sizes` attribute. A hero image on mobile doesn't need the 2560px desktop asset — but you'd be shocked how many production sites still ship it. This alone typically cuts image weight 60%.

3. Lazy-load everything below the fold, eager-load the LCP image. Set `loading="lazy"` on offscreen images and `loading="eager"` (or better, `fetchpriority="high"`) on the LCP image. Getting the LCP image to render inside the browser's initial fetch batch is often worth a full second on the LCP metric.

4. Preload the LCP image in the HTML head. For above-the-fold hero images that are dynamically inserted by JavaScript, add `<link rel="preload" as="image" href="..." fetchpriority="high">` in the document head. This tells the browser to start downloading before the framework has even parsed.

5. Set explicit width and height attributes. Every image needs intrinsic dimensions so the browser can reserve space and avoid Cumulative Layout Shift. This is a 30-second change per template that eliminates one of the three Core Web Vitals metrics almost entirely.

6. Use a real CDN with automatic format negotiation. Cloudflare Images, Bunny CDN, imgix, or Shopify's image CDN will detect the browser and serve the optimal format automatically. Building this pipeline yourself is a maintenance headache — outsource it.

What the numbers look like

Our last three ecommerce builds went from LCP 4.1s → 1.9s using nothing but the six moves above. No design changes, no font swaps, no framework switches. Combine this with our full Core Web Vitals process and 95+ Lighthouse scores are routine, not remarkable.

Image optimization, CDN configuration, and Core Web Vitals monitoring are included in every maintenance plan we run. Scope a plan or book a free performance audit — we'll send back a prioritized list of image wins on your top 10 landing pages.