AVIF vs. WebP vs. JPG: la batalla de los formatos de imagen modernos
Por qué esta comparación realmente importa
No te equivoques pensando que los formatos de imagen son una elección cosmética. No lo son. Un solo formato mal elegido en una página de producto con mucho tráfico puede añadir entre 200 y 400 KB por imagen. Eso se acumula en segundos de tiempo de carga extra y caídas medibles en la conversión. Las Core Web Vitals de Google penalizan directamente las puntuaciones lentas de Largest Contentful Paint, y las imágenes son el sospechoso habitual. Elegir entre AVIF, WebP y JPG tiene consecuencias reales para el SEO, las facturas de ancho de banda y si los usuarios deciden quedarse o no. El formato JPG ha dominado la fotografía desde mediados de los 90. Funciona en todas partes, se codifica rápido y cualquier desarrollador sabe cómo manejarlo. WebP de Google llegó en 2010 como su reemplazo, prometiendo una mejor compresión con la misma calidad. El recién llegado es AVIF, estandarizado en 2019 por la Alliance for Open Media. Lleva la compresión aún más lejos tomando prestada la tecnología del códec de vídeo AV1. El objetivo aquí no es declarar un formato como el ganador. Eso no tiene sentido. El objetivo es entender las ventajas y desventajas específicas para que puedas tomar la decisión correcta para *tu* proyecto, no solo seguir un consejo obsoleto de 2021. Analizaremos la compresión en el mundo real, el soporte en navegadores y los costes ocultos como la velocidad de codificación, dándote el contexto para usar cada formato de manera efectiva y saber cuándo es el momento de convertir.
Rendimiento de compresión: los números tras el revuelo
Sí, los formatos modernos son drásticamente más pequeños que el JPG. Esa parte del revuelo es cierta. Pero cuánto más pequeños depende de la imagen, del codificador y de la calidad que busques. Para una fotografía típica, WebP suele ser un 25-35 % más pequeño que un JPG de calidad visual equivalente. AVIF va aún más lejos, alcanzando a menudo un 40-55 % menos que el JPG, lo que es aproximadamente un 15-25 % más pequeño que el WebP. Esto significa que una foto de producto de 180 KB (JPG, calidad 85) podría convertirse en un WebP de 120 KB o un AVIF de 90 KB. El ahorro es real. Pero no puedes simplemente comparar los números de calidad entre formatos. No son equivalentes. Un JPG de "calidad 85" no es lo mismo que un WebP de "calidad 85". Bajar un JPG de 85 a 75 en ImageMagick puede reducir drásticamente el tamaño del archivo, pero también introducirá artefactos en forma de bloques en degradados y cielos. WebP utiliza una escala de 0 a 100 donde 80 es un buen punto de partida, más o menos equivalente a un JPG 85. AVIF utiliza una escala de Factor de Calidad Constante (CRF), normalmente de 0 a 63, donde un número más bajo es mejor. Para fotos web, un CRF de 30 a 40 suele ser el punto ideal. La historia cambia para los gráficos como capturas de pantalla de interfaces, logotipos o infografías. PNG ha sido la opción preferida por su calidad sin pérdidas, pero el modo sin pérdidas de WebP produce consistentemente archivos un 20-30 % más pequeños. El modo sin pérdidas de AVIF es menos maduro y a veces puede crear archivos *más grandes* que el modo sin pérdidas de WebP para este tipo de contenido. No des por sentado que AVIF gana siempre. El equipo de Squoosh en Google realizó pruebas que confirmaron la superioridad general de AVIF en compresión, pero también descubrieron que la ventaja se reduce cuando se trabaja con imágenes fuente que ya están muy comprimidas. Si estás reconvirtiendo un montón de JPG antiguos en lugar de trabajar desde originales de alta calidad, verás rendimientos decrecientes. Si metes basura, sacas basura un poco más pequeña.
Soporte en navegadores y plataformas: donde la cosa se complica
Seamos claros: el soporte de JPG es universal. Todos los navegadores, sistemas operativos, visores de imágenes, CMS, CDN y clientes de correo electrónico simplemente lo manejan. No subestimes esa ventaja; es un nivel de ubicuidad que los formatos más nuevos simplemente no pueden igualar todavía. Para el uso en la web, el soporte de WebP ahora es excelente. A partir de 2024, todos los navegadores principales —Chrome, Firefox, Safari (desde la versión 14), Edge, Opera— lo soportan. El soporte global supera el 97 % en caniuse.com. Los únicos que se quedan atrás son las versiones antiguas de Safari en iOS 13 y anteriores, lo que podría no ser un problema para tu audiencia. El soporte de AVIF es bueno, pero hay que tener más cuidado. Chrome lo soporta desde la versión 85 (2020), Firefox desde la 93 (2021) y Safari finalmente se unió con la versión 16 (2022). Esto cubre a la mayoría de los usuarios, pero aún puedes encontrar problemas con Edge en compilaciones antiguas de Windows 10 o en ciertos WebViews de Android. El soporte global ronda el 93-95 %. Suena genial, pero para un sitio de alto tráfico, ese 5-7 % de usuarios que ven una imagen rota es un problema muy real. Fuera del navegador, las cosas se complican. Para aplicaciones de escritorio, aplicaciones móviles o correos electrónicos, el soporte es un mosaico. macOS soporta AVIF desde Ventura (13.0). Windows 11 lo soporta, pero Windows 10 necesita un códec de la Microsoft Store. Android tiene soporte desde la versión 12 e iOS desde la 16. Todo esto es irrelevante si usas el elemento `<picture>` de HTML con los fallbacks adecuados, pero es un gran dolor de cabeza si esperas que los usuarios descarguen y abran estos archivos por sí mismos. La única estrategia sensata para un sitio web en producción es servir imágenes en cascada: primero AVIF, luego WebP como fallback y, finalmente, JPG para todo lo demás. Puedes implementar esto usando las etiquetas `source` del elemento `<picture>` con atributos `type`, o revisando la cabecera `Accept` en tu servidor. No te limites a servir AVIF y cruzar los dedos.
Velocidad de codificación y herramientas: el coste oculto
Hay un coste oculto en la increíble compresión de AVIF: el tiempo. La codificación AVIF es brutalmente lenta en comparación con JPG o WebP, y eso tiene consecuencias reales en tu flujo de trabajo. Veamos los números. Codificar una foto de 2000×1500 a JPG (calidad 85, libjpeg-turbo) puede tardar entre 50 y 80 milisegundos en una máquina moderna. La misma imagen a WebP (calidad 80, libwebp) tarda entre 200 y 400 milisegundos. Pero codificar a AVIF (CRF 32, velocidad 6) puede llevar de 2 a 8 *segundos*. Y si pones el codificador en su configuración más lenta y de mayor calidad, podrías estar esperando 30 segundos o más por una sola imagen. Para un lote de 500 imágenes de producto, esa es la diferencia entre una pausa para el café de 5 minutos y una espera de 4 horas. Si estás generando imágenes sobre la marcha, como hacen algunas CDN, ese tipo de sobrecarga de codificación puede añadir una latencia inaceptable a menos que tu sistema de caché sea perfecto. El codificador libavif tiene un ajuste de velocidad de 0 (más lento, mejor compresión) a 10 (más rápido, peor). La velocidad 6 es la recomendación estándar, un buen compromiso entre el tamaño del archivo y tu propia cordura. La velocidad 10 es casi tan rápida como WebP, pero sacrificas gran parte de la ventaja de compresión de AVIF. CocoConvert gestiona esta complejidad por ti en el servidor, pero la física sigue aplicándose: los lotes grandes de conversiones a AVIF tardarán significativamente más que los trabajos a WebP o JPG. Si tienes prisa, WebP suele ser la opción más práctica, incluso si AVIF podría ahorrar unos pocos kilobytes más. Las herramientas para WebP son maduras y estables; cwebp, Squoosh, ImageMagick y la librería Sharp de Node.js tienen un soporte robusto. Las herramientas para AVIF están mejorando —Sharp añadió soporte en la v0.27.0 e ImageMagick usa libheif— pero cualquiera que se haya peleado con un problema de dependencias de librerías sabe que "ponerse al día" puede significar encontrarse con errores extraños y conflictos de versiones que simplemente no existen en el mundo de JPG y WebP.
Calidad de imagen a bajas tasas de bits: donde los formatos más difieren
Con ajustes de alta calidad, la mayoría de las imágenes comprimidas se ven bien. La verdadera prueba llega a bajas tasas de bits, cuando estás exprimiendo agresivamente hasta el último byte de un archivo. Aquí es donde los formatos muestran realmente su naturaleza, y las diferencias son obvias. La compresión JPG pesada es famosa por sus artefactos en forma de bloques. Con una calidad de 40-50, los degradados suaves en un cielo azul se fracturan en un mosaico de cuadrados. El texto adquiere un halo borroso y resonante. Todos los hemos visto, y son feos. WebP, con el mismo tamaño de archivo bajo, tiende a desenfocar en lugar de crear bloques. Suaviza los detalles finos. Este puede ser un artefacto más agradable para los retratos, donde el desenfoque parece más natural que los duros bloques de JPG. Sin embargo, para imágenes con líneas nítidas o texto, ese mismo desenfoque puede ser una gran desventaja. Aquí es donde AVIF realmente brilla. A bajas tasas de bits, destroza a los otros dos. Su codificación basada en AV1 es simplemente mejor para preservar los detalles y manejar los degradados con elegancia. Una imagen AVIF de 50 KB se ve más limpia que un WebP o JPG del mismo tamaño. La verdadera ventaja de AVIF no está en la calidad 90, donde todo está bien; está en la calidad 50-60, donde estás forzando los límites. Las métricas perceptivas lo respaldan. Un paisaje de 1200×800 comprimido a 50 KB podría obtener una puntuación DSSIM de 0.008 para JPG, 0.005 para WebP y 0.003 para AVIF (cuanto más bajo, mejor). No son solo números; representan mejoras visibles. Si tienes un presupuesto estricto de tamaño de archivo, AVIF te dará consistentemente la imagen con mejor aspecto. Hay una excepción: el grano fino de película o las texturas naturales. El codificador de AVIF puede ser demasiado entusiasta al suavizar estos detalles, lo que resulta en un aspecto ligeramente artificial y plasticoso en algunas fotos de alta ISO. Siempre haz pruebas con tus propias imágenes; no asumas que AVIF es una solución mágica para todo tipo de contenido.
Casos de uso prácticos: cómo elegir el formato para cada propósito
La teoría está bien, pero ¿dónde deberías usar realmente cada formato? Aquí tienes una guía pragmática para escenarios comunes. **Imágenes principales y de producto en sitios web:** Opta por AVIF, con fallback a WebP y luego a JPG. Tú controlas el entorno, así que puedes usar el elemento `<picture>` para servir el mejor formato. El ahorro de ancho de banda es enorme. Una herramienta como CocoConvert puede convertir por lotes tus originales JPG tanto a AVIF como a WebP para facilitar esto. **Imágenes en correos electrónicos:** JPG. Y punto. Los clientes de correo electrónico son un páramo de renderizado inconsistente. Ni AVIF ni WebP tienen un soporte fiable en Outlook, Apple Mail o Gmail. Enviar un WebP solo mostrará una imagen rota a una gran parte de tu audiencia. **Subidas a redes sociales:** Utiliza JPG de alta calidad. Todas las plataformas (Instagram, Twitter/X, Facebook) van a recodificar tu imagen sin importar lo que subas. Dales a sus codificadores el mejor material fuente posible para trabajar; subir un AVIF precomprimido no te aporta nada. **Impresión o archivo:** Ninguno de los dos. Usa un formato sin pérdidas como TIFF o PNG para tus originales. Si debes enviar una vista previa comprimida, un JPG de alta calidad (90-95) es el estándar universal que cualquier imprenta o editor puede abrir. **Recursos en aplicaciones móviles:** Depende de tu versión mínima de sistema operativo. Si estás desarrollando para Android 12+ e iOS 16+, AVIF es una gran opción. Para un soporte más amplio, WebP es la apuesta más segura, funcionando desde Android 4.0 e iOS 14. **Contenido en un CMS:** Ten cuidado con AVIF. Cuando usuarios no técnicos suben imágenes, quieres el flujo de trabajo más fiable. Muchas bibliotecas de medios y generadores de miniaturas de los CMS todavía no manejan AVIF correctamente. JPG y WebP son mucho más prácticos y es menos probable que causen tickets de soporte sobre vistas previas de imágenes rotas.
Cómo convertir entre estos formatos (y a qué prestar atención)
Convertir entre estos formatos es fácil con las herramientas adecuadas, pero algunas minas terrestres pueden arruinar tus trabajos por lotes si no tienes cuidado. La regla de oro de la conversión: empieza siempre desde la fuente de mayor calidad. Convertir un JPG a un AVIF no restaura mágicamente el detalle que la compresión JPG ya destruyó. Simplemente envuelve los mismos datos degradados en un nuevo formato. Si tienes originales en RAW o TIFF, úsalos. Si todo lo que tienes es un JPG, convertirlo a AVIF hará el archivo más pequeño, pero no mejorará la apariencia de la imagen. Usar una herramienta como CocoConvert simplifica el proceso: subes, eliges un formato y descargas. La configuración de calidad por defecto para JPG a WebP está ajustada para mantener la calidad visual. Para JPG a AVIF, los valores por defecto logran un equilibrio entre el tamaño del archivo y la calidad, pero deberías considerar solicitar una calidad mayor para imágenes que se mostrarán en grande y serán examinadas por los usuarios. Seamos sinceros sobre una limitación: CocoConvert no maneja formatos animados. Convertir un WebP animado a un AVIF animado es una historia completamente diferente, que involucra la sincronización de fotogramas y paletas de colores. Para eso, necesitarás recurrir a una herramienta de línea de comandos como FFmpeg. Ten cuidado con la transparencia. JPG no la soporta, punto. Si conviertes un PNG o WebP transparente a JPG, el fondo se rellenará con un color sólido, generalmente blanco o negro. Tanto AVIF como WebP manejan la transparencia (el canal alfa) sin problemas, por lo que la conversión entre ellos la preserva. Solo asegúrate de no pasar accidentalmente una imagen transparente por un paso de conversión a JPG en tu proceso. Finalmente, una dosis de pragmatismo. Antes de generar versiones AVIF y WebP para cada imagen, pregúntate si realmente necesitas ambas. Generar dos formatos duplica tu tiempo de procesamiento y almacenamiento. Para muchos sitios, simplemente estandarizar en WebP es una mejora masiva sobre JPG y cubre al 97 % o más de los usuarios con mucha menos complejidad. AVIF es potente, pero solo añádelo si tu factura de ancho de banda realmente justifica el trabajo extra.