Image Optimization

# Image Optimization

## Modern formats
| Format | Use case              | vs JPEG savings |
|--------|-----------------------|-----------------|
| WebP   | Photos, illustrations | 25-35%          |
| AVIF   | Photos (best quality) | 40-50%          |
| SVG    | Icons, logos, shapes  | scalable        |

```html
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero" width="1200" height="600" />
</picture>
```

## Next.js Image
```tsx
import Image from 'next/image'

// Auto: WebP/AVIF, lazy load, srcset, blur placeholder
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority          // above-the-fold: disable lazy load
  placeholder="blur" // needs static import or blurDataURL
  sizes="(max-width: 768px) 100vw, 50vw"
/>
```

## Responsive sizes
```html
<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw"
  src="photo-800.webp"
  alt="Photo"
  loading="lazy"
  decoding="async"
  width="800" height="600"
/>
```

## Lazy loading
- Native: `loading="lazy"` (images below fold).
- Never lazy-load above-the-fold / LCP images.
- Add `fetchpriority="high"` to LCP image.

## Build pipeline
```bash
# sharp — fast Node.js image processing
npx sharp-cli -i input.png -o output.webp --webp '{"quality":80}'
npx sharp-cli -i input.png --resize 800 -o thumb.avif --avif '{"quality":60}'
```

## Checklist
- [ ] All images have explicit `width` + `height` (prevents CLS).
- [ ] LCP image has `priority`/`fetchpriority="high"`.
- [ ] Decorative images use `alt=""`.
- [ ] Icons are SVG or icon font, not PNG.
- [ ] Large images served via CDN with cache headers.
- [ ] Max source size: 2x display size (retina).