Formato de imagen AVIF: qué es, ventajas y cómo usarlo

iPhone World » General » Formato de imagen AVIF: qué es, ventajas y cómo usarlo

Si trabajas con páginas web, comercio electrónico o fotografía digital, habrás visto que el formato de imagen AVIF empieza a sonar por todas partes. No es una moda pasajera: detrás están gigantes como Google, Netflix, Amazon o Apple que lo están empujando con fuerza y eso, en Internet, suele ser sinónimo de que viene un cambio gordo.

En las próximas líneas vas a encontrar una guía muy completa de formatos de imagen donde se explica qué es AVIF, por qué comprime tanto sin destrozar la calidad, qué tal se lleva con navegadores y sistemas operativos, cómo crearlo, cómo convertirlo a otros formatos y qué pegas tiene. La idea es que acabes el artículo sabiendo cuándo merece la pena usarlo en tus proyectos y cómo sacarle partido sin dejar tirados a los usuarios con navegadores antiguos.

Qué es el formato de imagen AVIF y de dónde sale

AVIF son las siglas de AV1 Image File Format, un formato de imagen de mapa de bits pensado sobre todo para la web y el móvil. No ha aparecido de la nada: es un derivado directo del códec de vídeo AV1, creado por la Alliance for Open Media (AOMedia), un consorcio abierto donde se sientan empresas como Google, Netflix, Amazon, Apple, Microsoft, Mozilla, Intel, NVidia, Samsung o Facebook.

Este formato combina el contenedor HEIF (High Efficiency Image File Format) con el códec de vídeo AV1, que es libre de royalties y open source. En la práctica, una imagen AVIF es como un fotograma de un vídeo AV1 empaquetado en un contenedor de imagen que admite metadatos, diferentes pistas, variantes HDR, animaciones y más características avanzadas.

A diferencia de formatos clásicos como JPEG o PNG, AVIF se ha diseñado desde el principio para ofrecer una compresión extremadamente eficiente manteniendo un nivel de calidad visual muy alto. Compite directamente con WebP y HEIC como candidato a sustituir al veterano JPEG en muchos usos cotidianos.

El códec AV1 en el que se apoya AVIF se presentó en 2018 y demostró poder comprimir vídeo entre un 30% y un 50% mejor que H.265 o VP9 con la misma calidad. AVIF hereda esta ventaja de compresión y la aplica al mundo de las imágenes estáticas y animadas.

Características técnicas clave de AVIF

Una de las razones por las que AVIF está llamando tanto la atención es que reúne en un mismo formato prácticamente todo lo que se le puede pedir hoy a una imagen para la web. No se queda en ser “un JPEG que pesa menos”, sino que incorpora capacidades avanzadas de color, rango dinámico y animación.

Compresión muy eficiente con calidad alta

Lo que más suele impresionar cuando se prueban imágenes AVIF es su capacidad para reducir el tamaño del archivo sin que la foto se vea hecha polvo. Gracias a las técnicas de compresión heredadas de AV1 (bloques, predicción avanzada, transformadas modernas, etc.), a igualdad de calidad percibida AVIF puede:

• Ser hasta un 50% más ligero que JPEG en muchas pruebas reales.
• Superar a WebP en torno a un 20% en determinados escenarios, sobre todo en fotos complejas y fotorealistas.
• Generar menos artefactos, mejores degradados y menos banding en cielos, fondos suaves o transiciones de color delicadas.

Otra manera de verlo, muy útil a nivel práctico, es fijar un tamaño de archivo y comparar la calidad: con el mismo peso, AVIF conserva más detalle fino que JPG o WebP, mantiene mejor las texturas y los bordes se ven más limpios, con menos “bloques” y ruido.

Soporte de HDR, WCG y alta profundidad de color

AVIF no se queda en las clásicas imágenes de 8 bits por canal. El formato permite codificar:

• Profundidades de color de 8, 10 y 12 bits (e implementaciones que llegan a 16),
• HDR (High Dynamic Range) con funciones de transferencia como PQ,
• Gamas amplias de color (WCG), incluyendo espacios como BT.2020.

Todo esto se traduce en que las fotos pueden recoger más matices entre sombras y luces, degradados mucho más suaves y colores más ricos, algo muy interesante para fotografía profesional, contenido de vídeo estático, ilustración de alta gama o cualquier uso que busque un impacto visual fuerte en pantallas modernas HDR.

Canal alfa, transparencias y espacios de color flexibles

Al contrario que JPEG, AVIF incluye canal alfa totalmente funcional, de forma que puedes tener transparencias complejas con mucho menos peso que un PNG equivalente. Esto lo convierte en un candidato perfecto para:

• Logotipos y elementos de interfaz con fondo transparente.
• Iconos, overlays, botones y gráficos UI ligeros.
• Imágenes que deban integrarse encima de fondos variables sin halos feos.

Además, AVIF acepta prácticamente cualquier espacio de color moderno, admite submuestreo de crominancia 4:2:0, 4:2:2, 4:4:4 y hasta parámetros como el grano de película para simular texturas cinemáticas, todo encapsulado en el contenedor HEIF.

Imágenes estáticas y animadas en un único formato

AVIF no es solo para fotos sueltas: también soporta animaciones multiframe, de manera similar a GIF o WebP animado. En un solo archivo AVIF puedes guardar varias imágenes con tiempos diferentes, repeticiones, etc.

La ventaja es doble: las animaciones AVIF ocupan muchísimo menos que un GIF clásico y, además, tienen una calidad visual más que decente, sin el aspecto “granulado” típico de los GIF muy comprimidos.

Formato abierto y libre de royalties

Otro punto fuerte del formato es que no está sujeto a licencias de pago. AOMedia se planteó desde el principio ofrecer una alternativa abierta a códecs propietarios como H.264 o H.265, y AVIF hereda ese espíritu: cualquiera puede implementar soporte, tanto en navegador como en aplicaciones de escritorio o móviles, sin soltar un euro en royalties.

Esto facilita que navegadores, sistemas operativos, CDNs, bibliotecas gráficas y herramientas de edición adopten AVIF con menos fricción, algo clave para que un formato acabe siendo estándar de facto en la web.

Ventajas de AVIF para la web, móviles y fotografía

Más allá de las especificaciones, lo que interesa en el día a día es qué aporta AVIF a una web, una app o un flujo de trabajo fotográfico. Aquí es donde realmente se gana el puesto en tu caja de herramientas.

Mejor velocidad de carga y experiencia de usuario

Al pesar mucho menos, las imágenes AVIF permiten que las páginas se carguen sensiblemente más rápido, sobre todo en conexiones móviles reguleras o en zonas con latencia alta. Menos kilobytes que descargar significa:

• Menos tiempo hasta que el usuario ve el contenido principal.
• Menos rebotes por desesperación ante páginas lentas.
• Mejores métricas Core Web Vitals, que Google tiene muy en cuenta.

Para un ecommerce con muchas fotos de producto o un medio digital con galerías pesadas, el impacto se nota enseguida: puedes mantener una calidad visual alta y aun así ahorrar ancho de banda y tiempo de carga.

Ahorro de ancho de banda y costes de infraestructura

Cuando reduces el peso de todas las imágenes de tu sitio, automáticamente baja el consumo de datos tanto en el servidor como en el dispositivo del usuario. Eso tiene varias ventajas claras:

• Menos transferencia en tu hosting o CDN (algo clave si pagas por tráfico).
• Menos uso de recursos en servidores compartidos o VPS limitados.
• Usuarios móviles que gastan menos datos y batería para ver tu sitio.

En grandes plataformas de vídeo o imagen como Netflix, Vimeo o Cloudflare, estas reducciones de peso se convierten en ahorros importantes de costes y mejoras globales de rendimiento, por eso muchas de ellas ya han anunciado soporte para AVIF.

Mayor calidad visual a igualdad de tamaño

En flujos donde tienes un límite de peso (por ejemplo, miniaturas de producto, imágenes para newsletters, banners en app), AVIF te da margen para subir el listón visual. A igualdad de kilobytes un AVIF bien codificado suele mostrar:

• Detalles finos mejor conservados que en JPEG o WebP.
• Menos artefactos en texto sobre color plano, iconos, líneas rectas, etc.
• Degradados más suaves y, en general, una imagen más “limpia”.

Esto lo hace especialmente interesante para fotografía de producto, moda, paisajes o cualquier contenido donde la textura y la definición marquen la diferencia, pero no quieras disparar el peso de los archivos.

Idóneo para HDR y contenidos de alta gama

Si estás trabajando con fotos o frames de vídeo HDR, AVIF encaja como anillo al dedo. Soporta alto rango dinámico y gamas amplias de color, de forma que puedes conservar la riqueza de tus originales y mostrarlas en dispositivos compatibles con HDR sin tener que recurrir a formatos propietarios.

Netflix, por ejemplo, ha publicado imágenes de prueba en AVIF HDR con BT.2020 y curva PQ, demostrando que es viable usarlo en flujos profesionales donde la fidelidad de color y el rango dinámico son críticos.

Comparativa AVIF vs JPEG, PNG y WebP

Para decidir si te compensa apostar por AVIF, conviene compararlo con los formatos que ya usas: JPEG para fotos, PNG para transparencias y WebP como formato moderno intermedio.

AVIF frente a JPEG

JPEG lleva con nosotros desde principios de los 90 y, aunque ha dado un servicio magnífico, sus códecs se han quedado desfasados. Incluso con compresión progresiva, las imágenes siguen siendo pesadas y los artefactos de bloque se notan mucho cuando aprietas el peso.

En muchas pruebas prácticas, una imagen AVIF puede ser hasta un 50% más pequeña que su JPEG equivalente manteniendo una calidad muy similar. O bien, con el mismo peso, ofrecer una nitidez y un nivel de detalle claramente superiores. Además:

• JPEG no tiene canal alfa, mientras que AVIF sí.
• JPEG solo maneja 8 bits por canal, AVIF sube a 10/12 bits.
• JPEG no admite animaciones en un solo archivo estándar.

La única baza clara del JPEG hoy es su soporte universal y la posibilidad de renderizado progresivo, que AVIF todavía no ofrece.

AVIF frente a WebP

WebP fue el primer gran intento de “mata-JPEG” moderno de la mano de Google, basado en el códec VP8. Ofrece compresión con o sin pérdidas, canal alfa y animaciones, y durante años ha sido la opción lógica si querías ir más allá de JPG y PNG.

Sin embargo, AVIF parte de un códec más reciente y potente, AV1, y eso se nota. En muchos benchmarks:

• AVIF comprime aproximadamente un 20% mejor que WebP en fotografías complejas.
• Ofrece mejor rango dinámico, soporte HDR y más profundidad de color.
• WebP se queda encallado en 8 bits por canal y sin HDR.

Es cierto que WebP tiene hoy un soporte algo más maduro y extendido, pero AVIF lo supera en eficiencia de compresión y capacidades técnicas, lo que lo convierte en una apuesta más a futuro.

AVIF frente a PNG y GIF

PNG ha sido el rey de los gráficos con transparencia y contenido sin pérdidas, mientras que GIF se ha usado históricamente para animaciones sencillas. AVIF puede cubrir esos dos frentes con una sola codificación:

• Transparencia con canal alfa más ligera que PNG en muchos casos.
• Animaciones multiframe muy por debajo del peso de un GIF similar.
• Posibilidad de usar tanto compresión con pérdidas como sin pérdidas.

Para iconos, interfaces, stickers y pequeños efectos animados, AVIF puede reemplazar perfectamente a PNG y GIF siempre que tengas un fallback decente para navegadores que aún no lo soporten.

Cómo crear y convertir imágenes AVIF

AVIF es relativamente nuevo, así que las herramientas no son tan omnipresentes como las de JPEG, pero ya hay varias formas bastante cómodas de crear y convertir imágenes a este formato.

Crear AVIF con Squoosh (herramienta web)

La forma más sencilla de probar el formato es usar Squoosh, la app web de compresión de imágenes de Chrome Labs. Funciona así:

• Abres squoosh.app en tu navegador.
• Arrastras una imagen JPG o PNG a la página.
• En el desplegable de compresión eliges AVIF como formato de salida.

La interfaz muestra la imagen original y la comprimida lado a lado, con una barra deslizante para comparar. Puedes jugar con la opción de quality y otros parámetros, mientras ves en tiempo real el peso final del archivo y el impacto visual.

Cuando estés conforme, descargas la versión AVIF, que puedes usar directamente en tu web o guardarla como referencia para tus ajustes de codificación.

Conversión masiva con avifenc y libavif

Si necesitas convertir muchas imágenes, lo ideal es pasar a la línea de comandos. AOMedia mantiene libavif, una biblioteca en C para codificar y decodificar AVIF, que incluye la herramienta avifenc.

El flujo típico sería:

• Clonar el repositorio de libavif desde GitHub.
• Compilarlo (por ejemplo, enlazando con libaom, dav1d y libyuv usando CMake y make).
• Usar el binario avifenc para convertir, por ejemplo:
  avifenc imagenoriginal.jpg -o imagenfinal.avif

Con los parámetros por defecto ya se consiguen reducciones de peso del entorno del 50% respecto a un JPG con poca compresión, pero puedes ajustar la calidad, la velocidad de codificación, el submuestreo de color y otros muchos detalles con flags adicionales. El comando avifenc -h muestra todas las opciones disponibles.

Para conversiones en lote basta con montar un pequeño script (bash, PowerShell, etc.) que recorra un directorio y convierta todos los JPG o PNG a AVIF aplicando la configuración que decidas.

FFmpeg y creación de AVIF animados

Si te interesa la parte de animaciones AVIF, FFmpeg es tu amigo. Puedes partir de un vídeo o de un GIF y generar un AVIF animado, normalmente usando un formato intermedio sin comprimir como Y4M antes de pasarlo por avifenc.

Un flujo posible sería:

• Convertir tu fuente (por ejemplo, un GIF) a Y4M con FFmpeg.
• Alimentar ese archivo Y4M a avifenc para obtener un animated.avif.
• Usar el elemento <picture> para servirlo en la web con un fallback GIF para navegadores no compatibles.

El resultado suele ser una animación con mejor calidad visual y un peso varias veces menor que el GIF original.

Herramientas de escritorio y visores compatibles

El soporte nativo en editores populares está creciendo. Programas como GIMP, Krita, Paint.net, XnView, Darktable o ImageMagick ya han incorporado importación y/o exportación de AVIF (en algunos casos usando complementos basados en libavif o libheif).

Para simplemente abrir y ver imágenes AVIF, existen visores y utilidades específicas como Nomacs, IrfanView (con plugin), AVIF Viewer, AVIF QuickLook en macOS, o extensiones para Windows que permiten previsualizar el formato en el Explorador y en aplicaciones como Paint.

Soporte de AVIF en navegadores, sistemas y servidores

La gran pregunta a nivel web es siempre la misma: ¿lo soportan los navegadores? La respuesta, a día de hoy, es bastante positiva, aunque no perfecta.

Navegadores y sistemas operativos

En el frente de los navegadores, AVIF cuenta con soporte en:

• Google Chrome en escritorio desde la versión 85.
• Chrome para Android desde versiones posteriores (en torno a Chrome 89).
• Firefox de forma estable desde la versión 93 (tras pasar por una etapa experimental activando flags).
• Safari desde iOS 16 y macOS 13 (Ventura), con soporte también en el motor WebKit.
• Microsoft Edge moderno, basado en Chromium, en versiones relativamente recientes.

A nivel de sistemas:

• Android 12 incorpora soporte nativo para AVIF, aunque no siempre como formato por defecto de la cámara.
• Windows 10 y 11 pueden abrir AVIF instalando extensiones desde la Microsoft Store o mediante actualizaciones de códecs.
• Las principales distribuciones Linux con entorno GNOME y KDE han añadido compatibilidad AVIF a sus bibliotecas de imágenes, de modo que muchos visores lo leen sin problemas.
• macOS y iOS permiten previsualizar AVIF en Finder/QuickLook y visualizarlo en Safari.

Además, servicios como Cloudflare, Vimeo o CDNs especializados ya han anunciado soporte para el formato, lo que también ayuda a empujar su adopción.

Carga de AVIF en la web con fallback seguro

Para usar AVIF en una página sin dejar colgados a quienes aún no tienen navegador compatible, lo ideal es recurrir al elemento <picture> con múltiples fuentes:

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

Con esta estructura, el navegador intentará primero cargar el AVIF. Si no lo soporta, probará con WebP, y si tampoco, caerá en el JPEG clásico. De esta forma puedes aprovechar las ventajas del formato en navegadores modernos sin sacrificar compatibilidad.

Configuración del servidor (MIME type)

Para que el navegador sepa qué está recibiendo, el servidor debe enviar las imágenes AVIF con el tipo MIME correcto: image/avif. En muchos servidores modernos ya viene de serie, pero en otros tendrás que declararlo a mano.

En IIS, por ejemplo, bastaría con algo así en el web.config de tu sitio:

<system.webServer>
<staticContent>
<mimeMap fileExtension=".avif" mimeType="image/avif" />
</staticContent>
</system.webServer>

En Apache o Nginx se puede hacer algo equivalente en la configuración global o en el archivo de sitio virtual, añadiendo el mapeo de extensión a tipo MIME correspondiente.

Desventajas y limitaciones actuales de AVIF

AVIF no es perfecto. Aunque tiene muchas virtudes, también hay que tener en cuenta sus puntos débiles y limitaciones actuales para no llevarse sustos al adoptarlo.

Sin renderizado progresivo

Una diferencia importante con JPEG es que AVIF no admite, a día de hoy, renderizado progresivo. Con un JPEG progresivo, el navegador puede mostrar una versión muy borrosa de la imagen mientras se sigue descargando, dando la sensación de que todo va más rápido.

Con AVIF no: el navegador necesita recibir todo el archivo completo antes de poder mostrarlo. En conexiones muy lentas, esto puede notarse como un “todo o nada”, especialmente con imágenes grandes que no se hayan optimizado bien.

Codificación más lenta y decodificación más exigente

Otra desventaja es que la compresión AVIF es computacionalmente más pesada que la de JPEG o incluso WebP. Lo verás claramente si juegas con Squoosh o avifenc: codificar una imagen puede tardar varios segundos, dependiendo del tamaño y de la configuración de calidad.

A nivel de cliente, la decodificación también exige más CPU que un JPEG normal, aunque en dispositivos modernos no suele ser un problema grave. Donde podría dar guerra es en hardware muy antiguo o sin aceleración por hardware para AV1, especialmente si la página carga muchas imágenes AVIF a la vez.

Herramientas todavía en expansión

Aunque el soporte ha crecido mucho, todavía no estamos en el punto de “abro cualquier programa y guardo en AVIF sin pensar”. Hay editores que solo lo soportan mediante plugins, otros están en fase experimental y algunos flujos profesionales aún no lo contemplan de serie.

Además, si descargas una imagen AVIF de un sitio y tu sistema o tus viewers no lo soportan de fábrica, te verás obligado a convertirla a JPEG o PNG con herramientas como Tonfotos, Squoosh u otros conversores online o de escritorio. No es un drama, pero es una fricción más para el usuario.

Usos prácticos de AVIF y SEO

Con todo lo anterior, la gran cuestión es: ¿en qué casos concretos merece la pena apostar por AVIF y cómo puede ayudarte en posicionamiento y experiencia de usuario?

Diseño y desarrollo web

En diseño web, AVIF es un aliado muy potente para páginas que dependen mucho de lo visual: tiendas online, portfolios, medios, landings de producto… En todos esos contextos, reducir el peso de las imágenes sin que pierdan presencia mejora:

• Los tiempos de carga en móvil y escritorio.
• Las métricas de experiencia (LCP, FID, CLS).
• Las tasas de conversión y permanencia en página.

Si combinas AVIF con un buen sistema de imágenes responsivas (srcset, sizes, <picture>) y un CDN que entregue las versiones optimizadas según dispositivo, puedes conseguir un salto importante en rendimiento sin sacrificar estética.

Fotografía digital y contenido multimedia

Para fotógrafos, creadores de contenido y gente que trabaja con imagen de alta calidad, AVIF ofrece una forma de distribuir fotos con mucho detalle y buen color sin tener que subir archivos descomunales. No pretende reemplazar a RAW ni a formatos de trabajo, pero sí es un gran formato de entrega online y de archivo final ligero.

Su soporte de HDR y profundidad de color alta resulta muy atractivo en contextos donde se cuida mucho el rango dinámico y la fidelidad cromática, y donde el público objetivo está ya en dispositivos capaces de mostrarlo.

Impacto en SEO: rendimiento y optimización de imágenes

Desde el punto de vista SEO, AVIF aporta principalmente mejoras indirectas al reducir el peso de las páginas. Google da cada vez más importancia a la velocidad de carga y a los Core Web Vitals, así que tener imágenes optimizadas ayuda a:

• Bajar tiempos de respuesta y de interacción percibida.
• Reducir el abandono en primeros segundos.
• Mejorar ligeramente las opciones de posicionar frente a sitios más pesados.

Eso sí, conviene no obsesionarse: AVIF es una pieza más del puzzle. Para sacarle todo el jugo a nivel SEO hay que acompañarlo de buenos textos, estructura clara, marcado adecuado, datos estructurados, etc. Donde sí es casi “obligatorio” empezar a usarlo es en proyectos con muchas imágenes y objetivos claros de rendimiento.

Visto todo lo anterior, AVIF se ha ganado por méritos propios un sitio entre los formatos de imagen más interesantes del momento: ofrece compresión muy agresiva, soporte de HDR, canal alfa y animaciones, está impulsado por las grandes compañías de Internet y ya cuenta con una compatibilidad bastante decente en navegadores y sistemas, por lo que merece la pena ir incorporándolo desde ya en webs y proyectos visuales, siempre con un buen fallback a WebP o JPEG para no dejar a nadie fuera del contenido.