## Resumen rápido
| Formato | Compresión | Transparencia | Animación | Compatibilidad |
|---|---|---|---|---|
| **JPG** | Con pérdida | No | No | Universal |
| **PNG** | Sin pérdida | Sí (alfa) | No | Universal |
| **WebP** | Ambas | Sí | Sí | 95%+ navegadores |
| **AVIF** | Ambas (mejor) | Sí | Sí | 90%+ navegadores (2024) |
| **GIF** | Sin pérdida | 1 bit | Sí (limitada) | Universal |
| **SVG** | Vectorial | Sí | Sí (CSS) | Universal |
## JPG / JPEG
**Cuándo usar JPG:**
- Fotografías y imágenes con muchos colores y gradientes.
- Cuando el tamaño de archivo importa más que la calidad perfecta.
- Para redes sociales, miniaturas y galerías web.
**Cuándo NO usar JPG:**
- Logos, iconos o imágenes con texto — los artefactos de compresión son visibles.
- Cuando necesitas transparencia.
- Cuando vas a editar y guardar la imagen múltiples veces (cada guardado añade pérdida).
## PNG
**Cuándo usar PNG:**
- Logos, iconos y gráficos con fondo transparente.
- Capturas de pantalla con texto.
- Imágenes que necesitan máxima fidelidad de color.
**Cuándo NO usar PNG:**
- Fotografías de gran tamaño donde el peso importa — son mucho más grandes que JPG.
- Para web moderna, WebP o AVIF son mejores alternativas con más compresión.
## WebP
Google desarrolló WebP en 2010 como sucesor de JPG y PNG. Ofrece:
- **25-34% menos tamaño** que JPG a calidad equivalente.
- **26% menos tamaño** que PNG para imágenes con transparencia.
- Soporte de animación (como GIF pero mucho más eficiente).
**Compatibilidad**: todos los navegadores modernos (Chrome, Firefox, Safari 14+, Edge). Para proyectos que necesitan IE11, sigue usando JPG/PNG.
**Cuándo usar WebP:**
- Imágenes web donde el rendimiento de página importa.
- Alternativa moderna a GIF para animaciones web.
- Cuando quieres el mejor equilibrio calidad/tamaño en web.
## AVIF
AVIF es el formato más moderno (2019), basado en el codec AV1. Ofrece:
- **50% menos tamaño** que JPG a calidad equivalente.
- Soporte HDR y 10/12 bits de color.
- Mejor compresión que WebP en imágenes complejas.
**Compatibilidad**: Chrome 85+, Firefox 93+, Safari 16+. IE y Edge Legacy no lo soportan.
**Cuándo usar AVIF:**
- Proyectos web orientados a navegadores modernos.
- Imágenes HDR o con amplia gama de colores.
- Cuando el rendimiento web es crítica (Core Web Vitals).
## ¿Cuál elegir para tu web?
```
¿Fotografía?
├── Prioridad rendimiento web → AVIF o WebP
└── Compatibilidad máxima → JPG
¿Gráfico con transparencia?
├── Web moderna → WebP
└── Compatibilidad máxima → PNG
¿Logo/icono vectorial? → SVG siempre
¿Animación?
├── Web moderna → WebP animado o vídeo MP4
└── Compatibilidad máxima → GIF
```
## Conversiones relacionadas
- [JPG a PNG](/convert/jpg-to-png) — añade canal alfa
- [PNG a WebP](/convert/png-to-webp) — reduce peso en web
- [JPG a WebP](/convert/jpg-to-webp) — mejora rendimiento
- [WebP a JPG](/convert/webp-to-jpg) — para compatibilidad
Guía