Formato de imagen AVIF: Compresión de próxima generación basada en AV1

AVIF (AV1 Image File Format) es un formato de imagen moderno basado en la codificación intra-fotograma del codec de vídeo AV1, estandarizado por la Alliance for Open Media (AOM) en 2019. Entrega una eficiencia de compresión excepcional — típicamente 40-50% más pequeño que JPEG a calidad visual equivalente — mientras soporta HDR, amplia gama de colores, profundidad de color de 12 bits y transparencia alpha.

Fundamento técnico: Codificación intra-fotograma AV1

AVIF usa el contenedor HEIF (ISO/IEC 23008-12, el mismo contenedor que HEIC/HEIF de Apple) con compresión intra-fotograma AV1. El proceso de codificación incluye conversión de espacio de color YCbCr, submuestreo de croma (4:2:0, 4:2:2 o 4:4:4), predicción intra con 56 modos, transformada DCT/ADST, cuantización, filtro de restauración de bucle (Wiener + CDEF) y codificación por entropía ANS.

Matriz de características de AVIF

Característica	AVIF	JPEG	WebP	PNG
Compresión con pérdida	✅	✅	✅	❌
Compresión sin pérdida	✅	❌	✅	✅
Transparencia alpha	✅	❌	✅	✅
Animación	✅	❌	✅	❌ (APNG)
HDR (10-bit+)	✅	❌	❌	❌ (8-bit)
Amplia gama de colores	✅ (P3, BT.2020)	Limitado	❌	❌
Color de 12 bits	✅	❌	❌	✅
Soporte de navegador (2024)	~95%	~100%	~97%	~100%
Sin royalties	✅	✅	✅	✅

Soporte de navegadores y plataformas

• Chrome: 85+ (ago 2020)
• Firefox: 93+ (oct 2021)
• Safari: 16+ (sep 2022) — AVIF animado aún no soportado en Safari
• Edge: 121+ (ene 2024) soporte completo
• iOS Safari: 16+ (sep 2022)

Siempre usa el elemento <picture> con fallbacks para máxima compatibilidad:

<picture>
  <source srcset="imagen.avif" type="image/avif">
  <source srcset="imagen.webp" type="image/webp">
  <img src="imagen.jpg" alt="Descripción" width="800" height="600">
</picture>

Codificación de AVIF

avifenc (codificador de referencia de libavif)

# Codificación con pérdida básica (calidad 0=peor, 100=mejor)
avifenc --quality 60 --speed 6 entrada.jpg salida.avif

# Alta calidad (equivalente a JPEG ~90)
avifenc --quality 80 --speed 4 entrada.jpg salida.avif

# Codificación sin pérdida
avifenc --lossless --speed 6 entrada.png salida_lossless.avif

# Codificación HDR de 10 bits
avifenc --quality 70 --depth 10 --cicp 9/16/9 entrada_hdr.png salida_hdr.avif

# 4:4:4 croma (evita sangrado de color en texto/gráficos)
avifenc --quality 80 --yuv 444 entrada.png salida_444.avif

ffmpeg

# Codificación AVIF básica
ffmpeg -i entrada.jpg -c:v libaom-av1 -still-picture 1 -crf 30 salida.avif

# Con SVT-AV1 (codificación mucho más rápida)
ffmpeg -i entrada.jpg -c:v libsvtav1 -still-picture 1 -crf 30 salida.avif

sharp (Node.js)

const sharp = require('sharp');

// AVIF de alta calidad
await sharp('entrada.jpg')
  .avif({ quality: 80, speed: 4 })
  .toFile('salida.avif');

Referencia de calidad vs. tamaño de archivo

Calidad AVIF	JPEG equivalente	Tamaño vs. JPEG
80	~95	~55% más pequeño
70	~90	~50% más pequeño
60	~85	~45% más pequeño
50	~80	~40% más pequeño

Limitaciones de AVIF

1. Velocidad de codificación: libaom-av1 es extremadamente lento — codificar una imagen de alta resolución puede tardar 30-60 segundos. SVT-AV1 es 5-10× más rápido.
2. AVIF animado en Safari: Safari en macOS/iOS aún no soporta AVIF animado (en 2024).
3. Herramientas: No todas las herramientas de procesamiento de imagen soportan AVIF. GIMP 2.10+ lo soporta; Photoshop requiere un plugin.

Resumen

AVIF representa la frontera actual de la compresión de imágenes web con pérdida. Su compresión basada en AV1 logra archivos 40-50% más pequeños que JPEG a calidad equivalente, mientras soporta HDR, amplia gama de colores, profundidad de 12 bits, transparencia alpha y animación. La velocidad de codificación sigue siendo la barrera principal — para pipelines de producción, SVT-AV1 o servicios de codificación en la nube abordan esto. Con soporte de navegador del 95%+ y adopción por Netflix, Facebook y todas las CDN principales, AVIF es el formato de elección para la entrega de imágenes web de alto rendimiento cuando la eficiencia de compresión es la prioridad.