1. Árvore rápida
- Vetorial / logo → SVG.
- Foto → AVIF (fallback WebP/JPEG).
- UI com alpha → PNG (ou WebP lossless).
- Ícones → SVG ou WebP.
2. Comparação
| Formato | Prós | Contras |
|---|---|---|
| JPEG | Amplo suporte | Sem alpha |
| PNG | Lossless + transparência | Peso alto em fotos |
| WebP | Alpha + lossy/lossless | Navegadores antigos |
| AVIF | Compressão superior | Encode lento |
| SVG | Escala perfeita | Complexidade pesa |
3. Fallback
<picture> com AVIF → WebP → JPEG/PNG.
4. Automação
- Gerar várias larguras.
- Remover metadados supérfluos.
- Hash para cache busting.
5. Erros comuns
- PNG para fotos.
- SVG não otimizado.
- Sem fallback AVIF.