# Imagens — Otimização para PageSpeed

## LCP Image (acima do fold)
```html
<img src="hero.webp" width="800" height="600"
     fetchpriority="high" decoding="async" alt="Descrição">
```
NUNCA `loading="lazy"` na LCP image.

## Below-fold
```html
<img src="foto.webp" width="340" height="400"
     loading="lazy" decoding="async" alt="Descrição">
```

## Responsive com srcset
```html
<img src="img-400.webp"
     srcset="img-400.webp 400w, img-800.webp 800w"
     sizes="(max-width: 767px) 100vw, 400px"
     width="400" height="400"
     loading="lazy" decoding="async" alt="Descrição">
```

## Formato com fallback AVIF
```html
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="800" height="600" alt="Descrição">
</picture>
```
AVIF: ~20-25% menor que WebP. Browser support: 93.8% (2026).

## Formatos recomendados

| Tipo | Formato | Nota |
|------|---------|------|
| Fotos | WebP (AVIF se possível) | `f_webp,q_auto:good` no Cloudinary |
| Ilustrações transparentes | WebP | Substitui PNG |
| Logos vetoriais | SVG inline | Sem request extra |
| Ícones | SVG inline | Phosphor, Lucide, Tabler |

## Checklist

- [ ] Todas em WebP (ou AVIF com fallback)
- [ ] `width` e `height` explícitos em TODAS
- [ ] LCP: `fetchpriority="high"` + sem lazy
- [ ] Below-fold: `loading="lazy"` + `decoding="async"`
- [ ] `srcset` + `sizes` para responsivas
- [ ] Nenhuma servida maior que o espaço visual
- [ ] `alt` descritivo em todas
