JPEG y PNG han servido a la web durante décadas, pero fueron diseñados en una era diferente. JPEG, estandarizado en 1992, usa transformadas del coseno discreto para compresión con pérdida. PNG, introducido en 1996, ofrece compresión sin pérdida con soporte de transparencia. Ambos formatos son anteriores a la revolución del smartphone y los estándares de rendimiento que los usuarios modernos esperan. WebP y AVIF son los principales contendientes diseñados para reemplazarlos.
WebP: amplio soporte, ahorro confiable
Google desarrolló WebP y lo lanzó en 2010. Su compresión está basada en la codificación intra-frame del codec de video VP8 (para modo con pérdida) y una derivación de la compresión deflate de PNG (para modo sin pérdida). WebP también soporta transparencia (canal alfa) en ambos modos y animación como alternativa a los GIFs.
Ahorro típico de compresión sobre JPEG para calidad visual equivalente: 25–35%. Sobre PNG: 20–50%, dependiendo del contenido. Las imágenes con áreas planas grandes (ilustraciones, capturas de pantalla, iconos) se comprimen especialmente bien en modo lossless de WebP.
Soporte de navegadores en 2026: esencialmente universal. Chrome, Firefox, Edge, Safari (desde la versión 14, 2020) y todos los principales navegadores móviles soportan WebP. Si necesitas servir imágenes a toda la población de navegadores sin complejidad de fallback, WebP es el valor predeterminado seguro.
AVIF: mejor compresión, mayor costo de codificación
AVIF (AV1 Image File Format) está basado en fotogramas clave del codec de video AV1, desarrollado por la Alliance for Open Media — un consorcio que incluye Google, Netflix, Mozilla, Microsoft y Apple — como alternativa libre de regalías a HEVC.
Ahorro de compresión sobre JPEG para calidad visual equivalente: 40–55%. AVIF maneja gradientes, sombras suaves y detalles fotográficos especialmente bien. A ratios de compresión muy altos, los artefactos de AVIF (que parecen desenfoque acuarela) son generalmente más estéticamente aceptables que los artefactos de bloques de JPEG.
La contrapartida es la velocidad de codificación. La codificación AVIF puede ser significativamente más lenta que JPEG o WebP — a veces 10–50x más lenta para imágenes grandes. Para imágenes codificadas una vez y servidas muchas veces (que es la mayoría de los sitios web), esta sobrecarga es irrelevante.
¿Qué formato elegir?
- Fotos e imágenes complejas: Prefiere AVIF. La compresión adicional a calidad equivalente vale el soporte ligeramente limitado. Usa un elemento
<picture>con fallback a WebP si necesitas soportar Safari antiguo. - Capturas de pantalla e interfaz de usuario: WebP funciona bien y tiene soporte universal. La ventaja de compresión de AVIF es menos pronunciada para estos tipos.
- Iconos e ilustraciones con colores planos: WebP lossless o SVG si la fuente es vectorial.
- Imágenes animadas: Ambos formatos soportan animación. WebP animado es la opción más simple y bien soportada.
Servir múltiples formatos eficientemente
El elemento <picture> de HTML logra negociación de formato del lado del cliente sin lógica de servidor:
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Descripción" />
</picture>Para cualquier biblioteca de imágenes significativa, automatizar la conversión de formatos en tiempo de build (con herramientas como sharp, libvips o la CLI de Squoosh) y almacenar las tres variantes es el enfoque que entrega máxima compatibilidad con mínima carga de mantenimiento.