Formatos de imagen en 2026: cuándo AVIF supera a WebP y cuándo no

El estado de los formatos de imagen en 2026

AVIF ha sido "el futuro" durante tanto tiempo que ahora ya se siente como el presente. La compatibilidad en navegadores superó el 95% de cobertura global a finales de 2024, las CDN añadieron transcodificación automática a AVIF y la mayoría de las herramientas de optimización de imágenes ya incluyen AVIF de forma predeterminada. WebP, mientras tanto, se ha convertido en el fallback seguro: ubicuo, rápido de codificar y suficientemente bueno para la mayoría de los casos de uso.

La pregunta ya no es si AVIF es mejor en teoría. Lo es. La pregunta es si las compensaciones prácticas —tiempo de codificación, madurez de las herramientas, comportamiento en casos límite— hacen que merezca la pena el cambio para tu carga de trabajo concreta.

Este artículo recorre el árbol de decisión. Si sirves miles de imágenes subidas por usuarios, la respuesta es distinta que si ajustas manualmente una docena de imágenes hero de marketing. Si te importa la velocidad de codificación, la respuesta vuelve a cambiar.

Dónde AVIF gana con claridad

AVIF usa la compresión intra-frame del códec de vídeo AV1, lo que significa que se beneficia de años de optimización para vídeo en movimiento. El resultado son tamaños de archivo de forma constante más pequeños que WebP con una calidad perceptual equivalente, especialmente en contenido fotográfico.

En pruebas repetidas con conjuntos de imágenes diversos, los archivos AVIF son un 20-30% más pequeños que WebP con la misma puntuación SSIM. Para fotos de alta resolución —imágenes de producto, imágenes editoriales, cualquier cosa por encima de 1200px de ancho— esa diferencia se acumula rápidamente. Un WebP de 2MB se convierte en un AVIF de 1.4MB. Multiplícalo por cien imágenes en una página y el ahorro de ancho de banda es significativo.

AVIF también maneja mejor que WebP los degradados suaves y las zonas de bajo contraste. La herencia VP8 de WebP implica que puede introducir banding en cielos, sombras y otros cambios tonales sutiles. La codificación por transformadas más sofisticada de AVIF evita esto. Si tus imágenes incluyen muchos degradados —trabajo de diseño, ilustraciones, puestas de sol— AVIF se verá más limpio con tamaños de archivo más pequeños.

La compatibilidad de los navegadores ya es lo bastante sólida como para que AVIF pueda ser el formato principal en la mayoría de los sitios. Safari añadió compatibilidad en 16.4 (marzo de 2023), que era el último gran rezagado. La compatibilidad global está por encima del 95% a principios de 2026. La brecha restante son dispositivos Android antiguos y navegadores empresariales heredados, por eso sigues necesitando un fallback.

Dónde WebP todavía tiene sentido

La velocidad de codificación es la mayor limitación práctica. La codificación AVIF es entre 5 y 10 veces más lenta que WebP, según los ajustes de calidad y la implementación del codificador. Para contenido generado por usuarios —fotos de perfil, adjuntos en foros, cualquier cosa subida en tiempo real— esa latencia importa. Una codificación WebP que tarda 200ms se convierte en una codificación AVIF de 2 segundos. Si procesas las subidas de forma síncrona, eso es una demora visible para el usuario.

La solución es codificar de forma asíncrona (subir el original, servir un placeholder, codificar en segundo plano) o quedarse con WebP para contenido generado por usuarios y reservar AVIF para recursos curados que controlas. Muchos sitios hacen ambas cosas: AVIF para imágenes de marketing, WebP para subidas de usuarios.

WebP también tiene herramientas más maduras. Todas las bibliotecas de imágenes, plugins de CMS y CDN llevan años soportando WebP. La compatibilidad con AVIF está poniéndose al día, pero todavía existen casos límite. Algunas compilaciones antiguas de ImageMagick producen salida AVIF de baja calidad. Algunas CDN cobran extra por la transcodificación a AVIF. Si trabajas en un entorno restringido —CMS heredado, presupuesto limitado, plazos ajustados— WebP es el camino de menor resistencia.

Por último, WebP sigue siendo más pequeño que JPEG en casi todos los casos, y la codificación es lo bastante rápida para uso en tiempo real. Si tu punto de partida actual es JPEG y aún no has migrado a formatos modernos, WebP es el primer paso más seguro. Siempre puedes añadir AVIF más adelante como mejora progresiva.

El árbol de decisión práctico

Así es como puedes elegir:

• Imágenes de marketing curadas, imágenes hero, fotos editoriales: Usa AVIF como formato principal, con WebP como primer fallback y JPEG como fallback final. El ahorro de tamaño de archivo justifica el coste de codificación, y tú controlas la canalización.
• Contenido generado por usuarios subido en tiempo real: Usa WebP. La velocidad de codificación importa más que el último 20% de eficiencia de compresión, y no puedes permitirte demoras de varios segundos.
• Ilustraciones, gráficos de color plano, capturas de pantalla: AVIF es mejor que WebP, pero PNG suele ser competitivo para gráficos sencillos con grandes áreas planas. Prueba ambos. Si tu PNG ya es pequeño y se comprime bien, puede que la migración de formato no merezca la pena.
• Miniaturas e imágenes pequeñas: WebP suele ser suficiente. El ahorro absoluto en bytes de AVIF es pequeño (un WebP de 10KB se convierte en un AVIF de 8KB), y la velocidad de codificación importa más a escala.
• La compatibilidad con navegadores heredados es crítica: Quédate con WebP como formato moderno principal. La cobertura del 95% de AVIF es excelente, pero si sirves a una base de usuarios con dispositivos antiguos o entornos empresariales, la compatibilidad casi universal de WebP es más segura.

Si no tienes claro qué hacer, el patrón más seguro es servir AVIF a los navegadores que lo soporten, con un fallback WebP y un fallback final JPEG. El elemento <picture> lo hace sencillo:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Este enfoque te da lo mejor de ambos mundos: máxima compresión para navegadores modernos, fallbacks seguros para los antiguos.

Ajustes de codificación que importan

Si adoptas AVIF, los ajustes de codificación tienen un impacto mayor en la calidad de salida que con WebP. La flexibilidad de AVIF significa que hay más formas de producir un mal resultado.

Los dos ajustes que más importan son calidad y velocidad. La calidad es directa: números más altos significan imágenes con mejor aspecto y archivos más grandes. Para AVIF, un ajuste de calidad de 75-85 suele ser el punto óptimo para contenido fotográfico. Por debajo de 70, empiezan a verse artefactos notables. Por encima de 90, los tamaños de archivo se disparan sin mejoras de calidad significativas.

La velocidad controla cuánto tiempo dedica el codificador a optimizar la salida. Una codificación más lenta produce archivos más pequeños, pero los rendimientos disminuyen rápido. La mayoría de los codificadores usan una escala de 0-10, donde 0 es lo más lento y 10 lo más rápido. Un ajuste de velocidad de 6-8 es un buen compromiso: la codificación es lo bastante rápida para procesamiento por lotes, y los tamaños de archivo quedan dentro del 10-15% del mínimo teórico.

Si codificas AVIF en el servidor, usa una versión reciente de libavif o avifenc. Los codificadores antiguos (anteriores a 2024) producen una salida claramente peor con el mismo tamaño de archivo. El formato aún está madurando, y las mejoras en los codificadores han sido significativas.

¿Qué pasa con JPEG XL?

JPEG XL es técnicamente superior tanto a AVIF como a WebP. Comprime mejor, codifica más rápido, soporta compresión sin pérdida y maneja una gama más amplia de tipos de imagen. También es un formato muerto.

Google eliminó la compatibilidad con JPEG XL de Chrome en 2022, citando baja adopción y complejidad. Apple nunca añadió compatibilidad. En 2026, JPEG XL solo está soportado en Firefox y Safari Technology Preview, lo que significa que no es viable para uso en producción. A menos que los proveedores de navegadores cambien de rumbo —algo improbable— JPEG XL seguirá siendo un formato para entusiastas y flujos de trabajo de archivo, no para la web.

La ruta de migración

Si estás pasando de JPEG a formatos modernos, la ruta más segura es:

1. Audita tu canalización de imágenes actual. Identifica de dónde vienen las imágenes (CMS, subidas de usuarios, CDN), cómo se procesan y qué formatos sirves actualmente. Por qué procesar imágenes en el navegador es una ventaja para la privacidad cubre algunas de las compensaciones sobre dónde ocurre el procesamiento de imágenes.
2. Empieza con WebP. Es rápido de codificar, tiene amplia compatibilidad y ofrece reducciones inmediatas de tamaño de archivo. Este es el primer paso de bajo riesgo.
3. Añade AVIF para contenido curado. Una vez que WebP funcione de forma fiable, añade AVIF para imágenes de alto valor donde el tamaño de archivo importe más. Prueba los tiempos de codificación y asegúrate de que tu CDN o servicio de imágenes lo soporte.
4. Supervisa la compatibilidad de los navegadores. La cobertura de AVIF ya es excelente, pero si tus analíticas muestran un porcentaje significativo de usuarios en navegadores antiguos, mantén WebP como formato principal.
5. Mide el impacto. Usa monitorización de usuarios reales para seguir los tiempos de carga de página y Largest Contentful Paint antes y después de la migración. Cómo leer un informe de Lighthouse sin entrar en pánico es una guía útil para interpretar métricas de rendimiento.

El objetivo no es usar el formato más nuevo porque sea nuevo. El objetivo es servir imágenes más pequeñas sin sacrificar calidad, lo que mejora la velocidad de la página y reduce los costes de ancho de banda. AVIF hace eso mejor que WebP en la mayoría de los casos, pero las limitaciones prácticas —velocidad de codificación, herramientas, compatibilidad de navegadores— hacen que WebP siga siendo la opción correcta para algunas cargas de trabajo.

Puntos clave

• AVIF es un 20-30% más pequeño que WebP con calidad equivalente, especialmente para contenido fotográfico e imágenes con degradados.
• Codificar AVIF es entre 5 y 10 veces más lento que WebP, lo que lo hace poco práctico para subidas de usuarios en tiempo real salvo que codifiques de forma asíncrona.
• La compatibilidad de AVIF en navegadores está por encima del 95% a nivel global, pero la compatibilidad casi universal de WebP lo convierte en el fallback más seguro.
• Para imágenes de marketing curadas, usa AVIF como formato principal con fallbacks WebP y JPEG. Para contenido generado por usuarios, quédate con WebP.
• JPEG XL es técnicamente superior, pero no tiene compatibilidad viable en navegadores y no debería usarse en sitios web de producción.

Preguntas frecuentes

P: ¿Puedo servir AVIF sin fallback?

R: Todavía no. La compatibilidad con AVIF está por encima del 95%, pero eso aún deja a millones de usuarios en navegadores antiguos. Incluye siempre un fallback WebP o JPEG usando el elemento <picture>. El navegador seleccionará automáticamente el mejor formato que soporte.

P: ¿AVIF soporta transparencia?

R: Sí. AVIF soporta un canal alfa, lo que lo convierte en un reemplazo viable de PNG en casos donde necesitas transparencia. Los tamaños de archivo suelen ser menores que PNG, aunque la codificación es más lenta.

P: ¿Debería recodificar todas mis imágenes existentes a AVIF?

R: Solo si el ahorro de ancho de banda justifica el esfuerzo. Empieza por páginas de alto tráfico e imágenes grandes donde el impacto sea más visible. Para páginas con poco tráfico o imágenes pequeñas, el ROI es mínimo. Enfócate primero en el contenido nuevo y luego rellena de forma selectiva.

P: ¿Cuál es la mejor herramienta para codificar AVIF por lotes?

R: avifenc (parte de libavif) es la herramienta de línea de comandos más utilizada. Para herramientas GUI, Squoosh (basada en web) e ImageOptim (Mac) soportan AVIF. La mayoría de las CDN y servicios de imágenes modernos (Cloudflare, Cloudinary, imgix) pueden transcodificar automáticamente a AVIF.

P: ¿AVIF funciona con imágenes responsive y srcset?

R: Sí. Usa el elemento <picture> con varios elementos <source> para fallbacks de formato, y srcset dentro de cada <source> para tamaños responsive. El navegador elegirá el mejor formato y tamaño según la compatibilidad y el ancho del viewport.

<!-- tool-cta:start -->

💡 Prueba esto: Compara los dos formatos con tus propios recursos usando Image Converter, que puede generar tanto AVIF como WebP para que puedas medir el tamaño y la calidad en condiciones reales.

<!-- tool-cta:end -->

Fuentes

• AVIF vs WebP: A Comprehensive Comparison — Análisis detallado de la eficiencia de compresión y los ajustes de calidad en distintos tipos de imagen.
• Can I use AVIF? — Datos actuales de compatibilidad de navegadores para el formato de imagen AVIF.
• libavif GitHub repository — Implementación de referencia del codificador y documentación para AVIF.
• Web Almanac: Images — Informe anual sobre la adopción de formatos de imagen y el rendimiento en la web.