Formatos de imagen
WebP vs AVIF en 2026 — Cuál usar y cuándo
WebP y AVIF merecen la pena en 2026, pero resuelven cosas distintas. Comparativa práctica: compresión, soporte, velocidad de codificación y fallbacks.
En 2026 el debate de “qué formato moderno de imagen debería usar” se ha asentado en una respuesta estable: usa los dos, y úsalos para cosas distintas. WebP es el caballo de batalla fiable, con soporte universal y codificación rápida. AVIF te da mejor compresión a cambio de más tiempo de codificación y algo más de trabajo con fallbacks. Esta guía repasa los trade-offs reales para que puedas decidir sin releer un benchmark.
Soporte en navegadores, la versión corta
WebP está soportado en todos los navegadores evergreen desde 2020. Puedes enviar un WebP hoy sin fallback a PNG ni JPG y alcanzar >98% del tráfico global. El resto son mayormente dispositivos antiguos sin actualizaciones de navegador.
AVIF es más reciente. Chrome añadió soporte en la versión 85 (agosto 2020), Firefox en la 113 (mayo 2023) y Safari en 16.4 (marzo 2023). Para 2026, la cobertura de AVIF ronda el 95% del tráfico global — cerca de WebP pero no igualado. El hueco solo importa si te preocupan los últimos puntos porcentuales.
| Formato | Chrome | Firefox | Safari | Edge | Cobertura 2026 |
|---|---|---|---|---|---|
| WebP | 32 (2014) | 65 (2019) | 14 (2020) | 18 (2020) | >98% |
| AVIF | 85 (2020) | 113 (2023) | 16.4 (2023) | 121 (2024) | ~95% |
El patrón seguro es <picture> con AVIF primero, WebP segundo y JPG/PNG de fallback al final. El navegador elige el primero que soporta, así que no pagas extra.
Compresión, en cifras reales
Los benchmarks varían mucho según la imagen de origen y los ajustes del codificador, pero una regla razonable para contenido fotográfico a calidad visual equivalente:
- Base JPG: 100 KB
- WebP con pérdida: 65-75 KB (25-35% más pequeño)
- AVIF: 45-60 KB (40-55% más pequeño)
Para gráficos con grandes áreas planas o texto, los números cambian:
- Base PNG: 100 KB
- WebP sin pérdida: 75-80 KB (20-25% más pequeño)
- AVIF sin pérdida: 65-75 KB (25-35% más pequeño)
AVIF gana en prácticamente todo tipo de contenido, pero la ventaja absoluta se reduce a calidades más altas. A calidad 95+, la ventaja de AVIF sobre WebP se queda en 10-15%. La victoria es mayor en el rango 60-80 — justo donde deberían estar la mayoría de imágenes web.
Velocidad de codificación, de lo que nadie habla
La razón por la que AVIF no es simplemente una mejora directa es el tiempo de codificación. AVIF se apoya en el códec de vídeo AV1, diseñado para producir archivos pequeños a cualquier coste computacional. WebP se basa en VP8, un códec anterior y más rápido.
En ajustes por defecto en la mayoría de codificadores:
- WebP codifica en unos 100-300 ms por megapíxel en una CPU moderna.
- AVIF codifica en unos 1-4 segundos por megapíxel en la misma CPU, según el nivel de esfuerzo.
Esto importa cuando conviertes en masa, ejecutas un pipeline de imágenes en build o haces codificación del lado del cliente. Si tu CI ya tarda 4 minutos, añadir AVIF a cada imagen de un sitio con 500 imágenes puede llevarlo a 10-15 minutos. Suele estar bien, pero conviene saberlo antes de activarlo.
Para conversiones puntuales como JPG a WebP o PNG a WebP, la diferencia es invisible — esperas una fracción de segundo de cualquier forma.
Cuándo usar cada uno
Usa WebP cuando:
- Necesitas un único formato moderno sin cadena de fallbacks.
- Estás codificando muchas imágenes en build time y la velocidad importa.
- Quieres soporte universal sin la complejidad del tag
<picture>. - Sirves imágenes que se actualizan a menudo (contenido generado por usuarios).
Usa AVIF cuando:
- La imagen es contenido — fotos de producto, hero editorial, portfolio — donde la compresión extra justifica el esfuerzo.
- Ya tienes montado un
<picture>. - Las imágenes son duraderas y el coste puntual de codificación se amortiza en millones de visualizaciones.
- El ancho de banda importa más que el tiempo de codificación (móvil, mercados emergentes).
Envía ambos cuando construyes producción y quieres el mejor equilibrio. El tag <picture> lo hace trivial:
<picture>
<source type="image/avif" srcset="/img/hero.avif">
<source type="image/webp" srcset="/img/hero.webp">
<img src="/img/hero.jpg" alt="Imagen hero" width="1200" height="600">
</picture>Los navegadores que entienden AVIF cogen AVIF. Los que entienden WebP pero no AVIF caen a WebP. El resto cae a JPG. Coste: tres archivos en lugar de uno y algo más de markup.
Transparencia y animación
Ambos formatos soportan transparencia (canal alfa). La compresión alfa de AVIF es notablemente mejor — con frecuencia 30-40% más pequeña que WebP a calidad equivalente, lo cual importa para recortes, fotos de producto sobre fondo transparente e iconos.
Ambos soportan animación como alternativa con pérdida al GIF. AVIF tiene mejor compresión; WebP tiene más soporte. Para la mayoría de casos de animación en 2026, la respuesta correcta es un <video> real con fuentes MP4/WebM — las imágenes animadas son una herramienta de nicho, útil sobre todo para email donde <video> no funciona.
El flujo de conversión
Un flujo típico:
- Origen: foto en bruto a resolución de cámara (a menudo 24 MP / ~8 MB JPG).
- Redimensionar al tamaño de entrega (p. ej. 2000 px máx para hero, 800 px para miniaturas).
- Codificar a WebP calidad 80.
- Codificar a AVIF calidad 60-70 (la escala de calidad de AVIF no es igual que la de WebP; calidad 65 en AVIF equivale aproximadamente a calidad 80 en WebP).
- Generar fallback JPG a calidad 82.
- Servir los tres con un tag
<picture>.
Puedes cubrir cualquier paso de esta cadena con las herramientas de OpenImages — JPG a WebP, PNG a WebP, WebP a JPG para el fallback y Comprimir imagen para el apretón final. Todo corre local, así que una foto de producto bajo embargo nunca toca un servidor de terceros.
Qué saltarse
Un par de cosas que la gente se preocupa por y en realidad no importan:
- JPEG XL. Formato genial sobre el papel. Chrome retiró el soporte en 2023 y no lo ha reintroducido a fecha de 2026. No envíes JXL a producción; es un callejón sin salida en web.
- HEIC/HEIF. Formato por defecto de las cámaras Apple. Gran compresión, soporte cero en navegadores fuera de Safari. Convierte los HEIC a JPG o WebP para entrega.
- Calidad = 100. En WebP y en AVIF, calidad 100 desactiva parte de la codificación perceptual que hace buenos a estos formatos. Usa calidad 85-90 como tope realista.
Resumen: en 2026, WebP es el valor por defecto, AVIF es la optimización, y un <picture> te da ambos con JPG como red de seguridad. Esa combinación entrega páginas más ligeras, cargas más rápidas y mejores Core Web Vitals que cualquier estrategia de formato único.
Herramientas relacionadas
Preguntas frecuentes
¿Qué tiene mayor soporte de navegador en 2026, WebP o AVIF?
WebP lleva ventaja. Tiene soporte en todos los navegadores evergreen desde 2020 y alcanza >98% del tráfico global sin fallback. AVIF llegó más tarde — Chrome 85 en 2020, Safari 16.4 en 2023, Firefox 113 en 2023 — y en 2026 cubre cerca del 95% del tráfico global. La diferencia es lo bastante pequeña como para que, usando un tag picture con AVIF primero y WebP después, cada usuario reciba el mejor formato que soporta su navegador sin coste extra.
¿Debería servir tanto AVIF como WebP con fallback en picture?
Sí, en sitios de producción es el patrón estándar. Pon AVIF primero, WebP segundo y un JPG o PNG dentro del img como fallback final. Los navegadores eligen la primera source que soportan, así que los que entienden AVIF reciben el archivo más pequeño, los de WebP caen al segundo y los antiguos reciben el fallback universal. El coste es tres archivos en lugar de uno y algo más de markup — insignificante frente al ahorro de ancho de banda.
¿Cuándo el tiempo de codificación de AVIF es demasiado?
AVIF codifica en 1-4 segundos por megapíxel frente a 100-300 ms para WebP en la misma CPU. Para conversiones puntuales la diferencia es invisible, pero en pipelines de build con cientos de imágenes suma. Si tu CI tarda 4 minutos con WebP, añadir AVIF puede llevarlo a 10-15 minutos. Suele estar bien para imágenes duraderas donde el coste de codificación se amortiza en millones de visualizaciones, pero puedes saltártelo en contenido generado por usuarios que cambia a menudo.
¿Es buena idea calidad 100 en WebP o AVIF?
No. Calidad 100 en WebP y AVIF desactiva parte de la codificación perceptual que hace eficientes a estos formatos, así que obtienes archivos más grandes sin ganancia visible. Usa calidad 85-90 como tope realista. Para la mayoría del contenido web, WebP 80 o AVIF 60-70 es el punto dulce — calidad 65 en AVIF equivale aproximadamente a calidad 80 en WebP en salida visible, porque las dos escalas están calibradas de forma distinta.
¿Merece la pena usar JPEG XL en 2026?
No para la web. JPEG XL es un formato fuerte sobre el papel pero Chrome retiró el soporte en 2023 y no lo ha reincorporado a fecha de 2026. Sin cobertura de Chrome es un callejón sin salida para producción. Quédate con WebP más AVIF más un fallback JPG en un tag picture — esa combinación entrega páginas más ligeras y mejores Core Web Vitals que cualquier estrategia de un solo formato, y no depende de un códec de nicho.