Elegir el formato de imagen correcto puede reducir el peso de la página en un 50% o más sin afectar la calidad visual. Con JPEG, PNG, WebP, AVIF, GIF y SVG compitiendo, ¿cómo decides?
TL;DR: El valor predeterminado es WebP para fotos e imágenes complejas. Utilice PNG para gráficos que requieran transparencia con bordes nítidos. Utilice SVG para iconos y logotipos. Considere AVIF si puede ofrecer alternativas.
Desglose formato por formato
JPEG
El formato de fotografía predeterminado de la web desde hace 30 años. Maneja bien el contenido fotográfico pero produce archivos más grandes que WebP con la misma calidad visual. Sin transparencia. Usar cuando: Máxima compatibilidad con correo electrónico o sistemas muy antiguos.
PNG
Formato sin pérdida ideal para gráficos con texto, capturas de pantalla e imágenes que necesitan transparencia alfa. Produce archivos enormes para fotografías; nunca utilice PNG para fotografías.
WebP
Desarrollado por Google. Tanto con pérdida como sin pérdida. Produce archivos entre un 25% y un 35% más pequeños que JPEG y un 26% más pequeños que PNG. Soporta transparencia y animación. Más del 97 % de compatibilidad con navegadores en 2026. El mejor todoterreno para web.
AVIF
Formato de próxima generación que ofrece archivos entre un 20 % y un 50 % más pequeños que WebP. La codificación es más lenta y la compatibilidad con el navegador es ~93 %. Ideal con respaldos WebP/JPEG a través de <picture>.
GIF
Desactualizado. Limitado a 256 colores, tamaños de archivo enormes para animación. Reemplácelo con animación WebP o video MP4/WebM para archivos entre un 80% y un 90% más pequeños.
Comparación de tamaños de archivos
| Formato | Foto (1920×1080) | Gráfico (800×600) | Notas |
|---|---|---|---|
| JPEG (q80) | 285 KB | 145KB | Línea de base |
| PNG | 2,1 MB | 95 KB | Excelente para gráficos, terrible para fotografías |
| WebP (q80) | 195 KB | 68KB | ~32% más pequeño que JPEG |
| AVIF (q80) | 142KB | 52 KB | ~50% más pequeño que JPEG |
Diagrama de flujo de decisiones
- ¿Logotipo, icono o ilustración? → SVG
- ¿Necesita transparencia? → WebP (con o sin pérdidas) o PNG
- ¿Foto? → WebP (con pérdida, preguntas 75–85)
- ¿Compresión máxima? → AVIF con respaldo WebP/JPEG
- ¿Correo electrónico? → JPEG (mejor soporte para cliente de correo electrónico)
✅ Cómo servir múltiples formatos
Usa el HTML <picture> elemento con <source> etiquetas para AVIF y WebP, recurriendo a JPEG/PNG en el <img> etiqueta. El navegador elige el primer formato que admite.
🔧 Convertir y comprimir a cualquier formato - Gratis
Suelta tus imágenes y conviértelas entre JPEG, PNG y WebP con control de calidad. Se ejecuta localmente en su navegador.
Abrir comprimir imagen →Conclusión
Para la mayoría de los sitios web en 2026, WebP es el valor predeterminado correcto. Ofrece el mejor equilibrio entre compresión, calidad, compatibilidad con el navegador y funciones. Utilice PNG para transparencias con bordes nítidos, SVG para vectores y considere AVIF para páginas de rendimiento crítico.