## La elección del formato importa
El formato de imagen incorrecto puede hacer que tu web cargue el doble de lento o que tus imágenes pierdan calidad. Esta guía te ayuda a elegir el formato correcto para cada situación.
## Resumen rápido
| Formato | Mejor para | Transparencia | Tamaño |
|---|---|---|---|
| **JPG** | Fotografías | No | Pequeño |
| **PNG** | Logos, gráficos, capturas | Sí | Mediano-grande |
| **WebP** | Todo en la web | Sí | Muy pequeño |
| **AVIF** | Todo (futuro) | Sí | Mínimo |
| **SVG** | Iconos, vectores | Sí | Mínimo |
## Cuándo usar JPG
- Fotografías de producto, personas, paisajes.
- Imágenes donde los pequeños artefactos de compresión son invisibles.
- Compatibilidad máxima (email, impresión, apps legacy).
**No uses JPG** para: logos, capturas de pantalla con texto, imágenes con fondos transparentes.
## Cuándo usar PNG
- Logos e iconos que necesitan transparencia.
- Capturas de pantalla con texto legible.
- Imágenes que vas a editar varias veces.
**Inconveniente**: PNG es significativamente más grande que JPG o WebP para fotografías.
## Cuándo usar WebP
WebP es la mejor opción para la web en 2024:
- **30-35 % más pequeño que JPG** a calidad equivalente.
- **26 % más pequeño que PNG** en modo sin pérdida.
- Admite transparencia y animación.
- Compatible con Chrome, Firefox, Safari (≥14), Edge, Opera.
**Recomendación**: sirve WebP con fallback JPG usando `` para compatibilidad total.
## Cuándo usar SVG
Para iconos, logos y gráficos puramente vectoriales, SVG es imbatible:
- Escala sin pérdida a cualquier resolución.
- Tamaño de archivo mínimo.
- Editable con CSS y JavaScript.
## Recomendación final
Para la mayoría de sitios web: **usa WebP** con fallback JPG/PNG. Herramientas como KaijuConverter, Squoosh o ImageMagick convierten en lote. Para logos y gráficos vectoriales, SVG.
Guía