Formato de Imagen AVIF: 30% más pequeño que WebP

AVIF: El Nuevo Rey de la Compresión de Imágenes

AVIF (AV1 Image File Format) basado en la tecnología de codificación de video AV1, es el próximo formato de imagen después de WebP.

Formato	Códec	Tamaño a igual calidad	Soporte de navegador
JPEG	libjpeg	Referencia	Todos
WebP	VP8	-25~35%	97%+
AVIF	AV1	-50~60%	92%+
PNG	deflate	3-5x JPEG	Todos

Dato clave: A igual calidad SSIM, AVIF es un 20-30% más pequeño que WebP y un 50-60% más pequeño que JPEG.

---

¿Por qué AVIF es tan pequeño?

Ventajas de la codificación AV1

1. Predicción intra-frame: Aprovecha la redundancia espacial dentro de la imagen
2. Codificación por transformada: Soporta bloques de transformada de 4×4 a 64×64
3. Matriz de cuantización: Cuantización más fina en el dominio de frecuencia
4. Síntesis de Film Grain: Separa el grano de película, se describe con parámetros en lugar de almacenar píxeles

Con pérdida vs Sin pérdida

Modo	Comparación de tamaño	Escenario de uso
Con pérdida (CQ 30)	40% de JPEG	Fotos, capturas
Con pérdida (CQ 50)	25% de JPEG	Miniaturas, vistas previas
Sin pérdida	50-60% de PNG	Iconos, recursos UI
Con pérdida + Alpha	30% de PNG	Fotos con transparencia

---

Compatibilidad con Navegadores (2026)

Navegador	Soporte AVIF	Versión
Chrome	✅	85+
Firefox	✅	93+
Safari	✅	16+
Edge	✅	85+
Samsung Internet	✅	15+
IE	❌	No soportado

Cobertura 92%+, se puede usar con confianza en producción.

Estrategia de Degradación

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Foto" loading="lazy">
</picture>

El navegador selecciona el primer formato compatible en orden.

---

Usar ToolsKu para Convertir a AVIF

Pasos de Operación

1. Abrir Herramienta de Conversión de Formato de Imagen
2. Subir imagen (soporta JPG, PNG, WebP, GIF)
3. Seleccionar formato de salida AVIF
4. Ajustar parámetros de calidad:
   • Alta calidad (CQ 20-30): Casi sin pérdida, tamaño reducido 40-50%
   • Equilibrado (CQ 35-50): Adecuado para la mayoría de escenarios, tamaño reducido 50-60%
   • Alta compresión (CQ 55-70): Miniaturas/vistas previas, tamaño reducido 60-80%
5. Descargar el resultado de la conversión

Referencia de Efecto de Conversión

Imagen original	Tamaño original	AVIF (CQ 35)	Tasa de compresión	SSIM
Foto de paisaje (4K)	8.2MB	1.1MB	87%	0.95
Foto de retrato	3.5MB	0.5MB	86%	0.94
Captura de UI	1.2MB	0.15MB	88%	0.97
Icono (PNG+Alpha)	45KB	12KB	73%	1.00

---

Capacidades Especiales de AVIF

Canal Alpha (Transparencia)

AVIF soporta con pérdida + canal Alpha, algo que JPEG no tiene:

PNG (transparente) 45KB → AVIF (transparente, CQ 35) 12KB → tamaño reducido 73%

HDR / Amplio Gamut de Color

AVIF soporta las dos funciones de transferencia HDR PQ y HLG, así como el amplio gamut BT.2020:

Característica	JPEG	WebP	AVIF
Profundidad de color	8-bit	8-bit	8/10/12-bit
Gamut de color	sRGB	sRGB	sRGB / BT.2020
HDR	❌	❌	✅ PQ/HLG
Alpha	❌	✅	✅

Animación

AVIF soporta secuencias de animación (AVIS), similar al WebP animado:

GIF animado 2.5MB → WebP animado 0.8MB → AVIF animado 0.5MB

---

Conversión por Línea de Comandos

Usar libavif (avifenc)

# Instalación
# macOS: brew install libavif
# Ubuntu: apt install libavif-bin

# Conversión básica
avifenc input.jpg output.avif

# Especificar calidad (0-63, menor = mayor calidad)
avifenc -q 30 input.jpg output.avif

# Compresión sin pérdida
avifenc --lossless input.png output.avif

# Especificar velocidad (0-10, más lento = mejor compresión)
avifenc -q 35 -s 6 input.jpg output.avif

Usar ImageMagick

# Convertir a AVIF
magick input.jpg -quality 65 output.avif

# Conversión por lotes
magick mogrify -format avif -quality 65 *.jpg

---

Conversión Automática con Nginx

# Convertir dinámicamente JPEG a AVIF
map $http_accept $avif_suffix {
  "~*image/avif" ".avif";
}

server {
  location ~* ^/.+\.(png|jpg|jpeg)$ {
    add_header Vary Accept;
    try_files $uri$avif_suffix $uri =404;
  }
}

Cuando el cliente soporta AVIF, se devuelve automáticamente la versión .avif (requiere pregeneración).

---

Mejores Prácticas

1. Usar degradación <picture>: Degradación de tres niveles AVIF → WebP → JPEG
2. Parámetro de calidad 35-50: Punto de equilibrio óptimo para la mayoría de escenarios
3. Pregenerar en lugar de convertir dinámicamente: Generar en tiempo de construcción, evitar carga de CPU en el servidor
4. Fotos con AVIF, iconos con SVG: Imágenes vectoriales no son adecuadas para AVIF
5. Imágenes con Alpha usar AVIF: Reemplazar PNG, reducir tamaño 70%+
6. Configurar CDN para conversión automática: Cloudflare Image Resizing / CloudFront soportan devolver AVIF automáticamente según el encabezado Accept