Resumen ejecutivo: en 2025, AVIF ofrece mejor compresión y calidad visual que WebP en la mayoría de escenarios fotográficos y en banners complejos, mientras que WebP mantiene ventajas de velocidad de decodificación y ligera ventaja de soporte en navegadores. La recomendación práctica para la Web sigue siendo clara: servir AVIF con fallback a WebP/JPEG mediante <picture>.
Según los datos de soporte de septiembre de 2025 (caniuse), WebP alcanza 95,29 % de compatibilidad y AVIF 93,8 %. Esa diferencia es hoy marginal, pero condiciona la estrategia: si se opta por AVIF como formato principal, conviene proveer fallback para cubrir iOS antiguos y otras excepciones.
Admite compresión con y sin pérdidas, transparencia y animación, y se apoya en técnicas heredadas del códec VP8 (pariente de WebM). Frente a JPEG, WebP suele producir ficheros un 25–34 % más pequeños a igual calidad percibida.
Basado en el códec de vídeo AV1, también soporta lossy/lossless, transparencia y animación, además de HDR y amplia gama de color. Su compresión supera la de WebP: frente a JPEG, AVIF logra ~50 % menos tamaño a igual calidad media.
A igualdad de peso, AVIF suele retener más detalle y gestionar mejor zonas complejas (ruido fino, texturas) y gradientes, además de ofrecer HDR y Wide Gamut. En fotografía, AVIF es la opción preferente; para gráfica simple (logos/íconos), WebP puede ganar.
WebP sigue siendo más rápido al codificar y decodificar. En la Web lo relevante es la decodificación: WebP abre antes en condiciones adversas; no obstante, en 2025 las optimizaciones han acortado la brecha y el menor peso de AVIF compensa en la mayoría de redes (menos KB ⇒ menos tiempo de descarga).
Nota: en pruebas con conexiones simuladas (Slow 4G, Chrome 127) con ficheros ~160 KB, la diferencia de percepción de carga es poco apreciable; en escenarios rápidos, prácticamente indistinguible. Además, WebP dispone de decodificación incremental en algunas implementaciones (el usuario ve partes antes).
Para comparar calidad se utilizó DSSIM v3.3.1 (a menor puntuación, más similitud con el original). Compresión con Squoosh; se testearon 2 imágenes fotográficas y 2 no fotográficas:
Lectura global: AVIF gana en fotografía y banners; WebP resiste en gráfica simple (logotipos, pictogramas). Para “todo lo demás”, AVIF suele ofrecer más calidad a menor peso.
<picture>Siempre que sea posible, sirva AVIF con fallback a WebP y JPEG/PNG:
<picture>
<source srcset="imagen.avif" type="image/avif">
<source srcset="imagen.webp" type="image/webp">
<img src="imagen.jpg" alt="Descripción" width="1920" height="1080">
</picture>
Lenguaje del código: HTML, XML (xml)srcset), combine con CDN y caché, y mida con Lighthouse/CrUX.Elija AVIF cuando…
Elija WebP cuando…
En todos los casos…
<picture> con fallback para maximizar compatibilidad.| Atributo | WebP | AVIF |
|---|---|---|
| Compresión (vs JPEG) | –25/–34 % | ~–50 % |
| Calidad a mismo peso | Buena | Mejor |
| HDR / Wide Gamut | — | Sí |
| Transparencia/Animación | Sí / Sí | Sí / Sí |
| Codificación/Decodif. | Más rápida | Más lenta (pero mejorando) |
| Soporte navegadores | ~95,29 % | ~93,8 % |
| Caso ideal | Logos/íconos | Foto + banners complejos |
Nota: la decodificación incremental puede observarse en algunas implementaciones WebP y mejora la percepción de carga en redes lentas. En la práctica, el menor tamaño de AVIF compensa la mayor parte del tiempo.
<picture>, midiendo siempre en condiciones reales (Lighthouse/CrUX).En resumen: si tuviera que elegir un solo formato hoy, AVIF sería mi primera opción para la mayoría de imágenes de un sitio moderno, con WebP reservado a logos e ilustraciones básicas. La ganancia acumulada en peso total y calidad compensa con creces.
¿De verdad se nota la diferencia entre AVIF y WebP a igual tamaño?
Sí, especialmente en fotografía y banners con texturas y gradientes: en pruebas con DSSIM, AVIF obtuvo puntuaciones más bajas (más parecido al original) a igual peso.
¿Qué pasa con Safari y dispositivos antiguos?
WebP necesita fallback en iOS anteriores a 2015–2022 según el parque (en el contenido de referencia se menciona iOS 15.8 como corte operativo). AVIF se soporta desde iOS 16 (iPhone 8+). Use <picture> y valide en BrowserStack o dispositivos reales.
¿Tiene sentido servir ambos (AVIF y WebP) siempre?
No es obligatorio. Para muchas webs basta con AVIF + JPEG (fallback). Si su audiencia incluye iOS/iPadOS antiguos, añadir WebP como escalón intermedio puede maximizar cobertura.
¿Cómo pruebo de forma objetiva la calidad?
Use métricas como DSSIM o SSIM, comprima con herramientas como Squoosh, y evalúe tanto muestras fotográficas como no fotográficas. Combine con pruebas de LCP y peso total transferido en páginas críticas.
vía: speedvitals
