intermediate

Image optimization

Choose responsive sizes, modern formats, compression, priority hints, and CDN caching for image-heavy interfaces.

Images often dominate LCP and bandwidth. Optimize with correct dimensions, modern formats, compression, responsive `srcset`, CDN transforms, and priority hints.

					<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" width="1200" height="630" alt="Product" fetchpriority="high" />
</picture>

| Technique | Why it matters | |-----------|----------------| | Responsive sizes | Avoid shipping 2000px asset to 400px slot | | AVIF/WebP | Better compression than JPEG/PNG | | CDN resizing | On-the-fly variants per device DPR | | Blur placeholder | Perceived speed without layout shift |

Use framework helpers (`next/image`, Astro assets) for automatic sizing and lazy rules. Audit CMS uploads—marketing often uploads multi-megabyte PNGs.

On interviews: `srcset` and `sizes`; AVIF fallback chain; art direction with `<picture>`; CDN vs build-time optimization.

Common pitfalls: CSS-only scaling of huge originals; missing dimensions; serving WebP without fallback for old clients when required.

The trade-off is build/CDN complexity versus bytes saved and LCP gains.

Checklist:

Cap decoded image size to display size × DPR.
Prefer modern formats with fallbacks.
Preload only true LCP images.
Monitor image bytes per route in RUM.