WebP vs AVIF: cómo elegir y probar el formato de imagen adecuado

AVIF puede superar a WebP con algunas imágenes y objetivos de calidad; WebP puede codificarse más rápido y encajar en un flujo heredado más amplio. La extensión no garantiza ninguno de los dos resultados. Compara salidas representativas, compatibilidad y coste del proceso, y ofrece respaldos donde tu público los necesite.

Los dos formatos de un vistazo

Tanto WebP como AVIF nacieron de códecs de vídeo. Google lanzó WebP en 2010 basándose en VP8, la misma tecnología detrás de su formato de vídeo WebM. La Alliance for Open Media lanzó AVIF en 2019 basándose en AV1, un códec más moderno y eficiente desarrollado en conjunto por Google, Mozilla, Apple, Netflix y otros.

Las herramientas de codificación más nuevas disponibles en AV1 pueden mejorar la compresión, mientras que las implementaciones más sencillas y maduras de WebP pueden reducir el coste de procesamiento. El comportamiento real de codificación y decodificación depende de la implementación del códec, los ajustes, las características de la imagen y el dispositivo.

Compresión: ¿cuánto más pequeño queda el archivo?

Los resultados de los benchmarks varían con el corpus, los codificadores, los ajustes de esfuerzo, el historial de la fuente y la métrica de calidad. Una prueba responsable mantiene coherentes las dimensiones y la política de metadatos y compara varias métricas visuales junto con una revisión humana:

• AVIF — puede ofrecer un gran resultado para fotografías, degradados, HDR y flujos con alta profundidad de bits, pero la codificación puede ser costosa
• WebP — puede ofrecer una salida eficiente con o sin pérdida, herramientas maduras y menor complejidad operativa en muchos procesos

No conviertas el promedio publicitario de un formato en una previsión para cada archivo. Exporta ambos desde el mismo original, elige una calidad visual comparable e incluye en la decisión el tiempo de codificación, el comportamiento de decodificación, los metadatos y la transferencia del respaldo.

Los recursos no fotográficos pueden comportarse de forma distinta a los benchmarks de fotos. Para gráficos sencillos, iconos e ilustraciones planas, compara candidatos sin pérdida o casi sin pérdida cuando sean compatibles; cualquiera de los formatos puede ganar según la paleta, el alfa, el codificador y los ajustes.

Compatibilidad en navegadores y programas

Las tablas de compatibilidad cambian y la cuota mundial no equivale a tu público. Comprueba los navegadores objetivo y los consumidores que no sean navegadores. El elemento <picture> puede ofrecer primero AVIF, después WebP y usar JPEG como respaldo final del <img>:

<picture>
  <source srcset="foto.avif" type="image/avif" />
  <source srcset="foto.webp" type="image/webp" />
  <img src="foto.jpg" alt="Descripción" />
</picture>

Velocidad de codificación y herramientas

Los codificadores WebP suelen necesitar menos cómputo que los codificadores AVIF con ajustes de esfuerzo comparables, pero la proporción varía mucho. Si un CMS convierte imágenes al subirlas o en lotes grandes, mide rendimiento, memoria, tiempo de cola y calidad de salida con las bibliotecas y ajustes exactos que utilizas.

El rendimiento de los codificadores cambia entre bibliotecas y versiones. El coste de decodificación también depende de las dimensiones, profundidad de bits, dispositivo, navegador e implementación. Prueba dispositivos modestos de destino en vez de suponer que la diferencia es imperceptible.

La compatibilidad de las herramientas es amplia pero desigual. Confirma importación, exportación, animación, perfil de color, metadatos y negociación automática en el editor, CMS, plan de CDN y conjunto de navegadores exactos que utilizas.

Comparativa de características

AVIF puede representar profundidades de bits mayores, gamas de color amplias y señalización HDR más allá de la codificación de 8 bits de WebP. Esa capacidad no garantiza precisión de color: el masterizado, los perfiles, los metadatos, el comportamiento del navegador, la capacidad de la pantalla y las pruebas siguen importando.

¿Cuándo usar cada formato?

Elige AVIF cuando:

• Controlas el pipeline de imágenes y puedes servir fallbacks
• Las salidas AVIF representativas mejoran el cuello de botella relevante de transferencia o calidad
• Necesitas capacidades de AVIF, como flujos de mayor profundidad de bits o HDR, y has probado todo el recorrido del color
• Tu CDN o proceso de compilación genera, almacena en caché y negocia correctamente variantes verificadas

Elige WebP cuando:

• El rendimiento medido del codificador o la sencillez operativa favorecen a WebP
• Tus clientes compatibles aceptan WebP y la variante AVIF adicional no se justifica
• Tus gráficos representativos cumplen sus objetivos de bytes y calidad en WebP
• Ya sirves WebP y la migración no está justificada

Usa ambos cuando el beneficio medido lo justifique:

Una pila con <picture> añade trabajo de generación, almacenamiento, caché, marcado y revisión de calidad, pero puede mejorar la entrega. Algunas CDN automatizan la negociación; verifica el comportamiento del plan, las claves de caché, el manejo de Vary, los ajustes de calidad y la salida de respaldo en lugar de suponer una entrega “óptima”.

Cómo convertir tus imágenes

Vizua puede crear salidas WebP y AVIF compatibles en el navegador sin instalar software. El archivo seleccionado no se envía a nuestro servidor de procesamiento de imágenes; el código necesario y los servicios del sitio todavía pueden usar la red:

• Comprimir WebP — reduce el tamaño de archivos WebP existentes
• Convertir a AVIF — crea AVIF desde imágenes de entrada compatibles
• JPG a WebP — convierte tus fotos JPEG a WebP
• PNG a WebP — convierte gráficos PNG a WebP

Si trabajas con fuentes JPEG, nuestra guía para comprimir imágenes sin perder calidad explica cómo elegir ajustes iniciales y comparar los resultados reales.

Preguntas frecuentes