1. Árbol rápido
- Vector / logo → SVG.
- Foto → AVIF (fallback WebP/JPEG).
- UI con alpha → PNG (o WebP lossless).
- Iconos simples → SVG o WebP.
2. Comparativa
| Formato | Pros | Contras |
|---|---|---|
| JPEG | Soporte amplio, fotos | Sin alpha |
| PNG | Lossless, transparencia | Peso alto fotos |
| WebP | Alpha + lossy + lossless | Algunos navegadores antiguos |
| AVIF | Compresión superior | Encode lento, gaps |
| SVG | Escalable, ligero | Complejo puede pesar |
3. Fallback
Usa <picture> con orden AVIF → WebP → JPEG/PNG.
4. Automatización
- Generar múltiples anchos.
- Eliminar metadatos innecesarios.
- Cache busting con hash.
5. Errores comunes
- PNG para fotos.
- SVG sin optimizar.
- Sin fallback para AVIF.