Por qué la compresión AVIF puede no funcionar en tu navegador — Y qué ocurre tras bambalinas
AVIF es el formato de imagen de nueva generación que promete archivos un 50% más pequeños que JPEG con mejor calidad. Pero si seleccionas AVIF como formato de salida y el archivo se vuelve mayor en lugar de menor, es que tu navegador no soporta realmente la codificación AVIF.
¿Qué es AVIF?
AVIF (AV1 Image File Format) es un formato de imagen moderno basado en el códec de vídeo AV1. Fue desarrollado por la Alliance for Open Media (AOMedia) y ofrece capacidades de compresión realmente impresionantes:
- 50% más pequeño que JPEG a calidad visual equivalente
- 20% más pequeño que WebP a calidad equivalente
- Soporta contenido HDR (Alto Rango Dinámico)
- Soporta transparencia (canal alfa)
- Soporta animación (sustituyendo a GIF)
- Libre de regalías y de código abierto
Por todos los indicios, AVIF es el futuro de las imágenes web. Sin embargo, hay una distinción importante entre decodificar (ver) y codificar (crear) imágenes AVIF.
Decodificar vs codificar: la diferencia clave
La mayoría de los navegadores modernos pueden mostrar imágenes AVIF sin problema. Chrome, Firefox, Safari y Edge soportan la decodificación de AVIF, lo que significa que pueden mostrar imágenes AVIF en páginas web sin ningún inconveniente.
Pero codificar, crear realmente un archivo AVIF desde cero, es una historia completamente distinta. Esto requiere que el navegador implemente la codificación AVIF en su Canvas API, lo cual es computacionalmente costoso y mucho más difícil de implementar que la decodificación.
Soporte de codificación AVIF en navegadores (a marzo de 2026)
| Navegador | Decodificación AVIF | Codificación AVIF (canvas.toBlob) |
|---|---|---|
| Chrome 121+ | ✅ Sí | ✅ Sí |
| Firefox | ✅ Sí | ❌ No |
| Safari | ✅ Sí | ❌ No |
| Edge | ✅ Sí | ✅ Sí (basado en Chromium) |
| Chrome móvil | ✅ Sí | ✅ Sí |
| Safari móvil | ✅ Sí | ❌ No |
Qué ocurre realmente cuando tu navegador no soporta la codificación AVIF
Aquí es donde las cosas se ponen interesantes y confusas. Cuando seleccionas AVIF como formato de salida pero tu navegador no puede codificar AVIF, esto es lo que sucede:
La alternativa silenciosa
El método canvas.toBlob(callback, 'image/avif', quality) de la Canvas API no lanza un error cuando la codificación AVIF no está soportada. En su lugar, hace algo discreto:
- Recurre silenciosamente al formato PNG
- El tipo MIME del blob resultante se convierte en
image/pngen lugar deimage/avif - El archivo se guarda con extensión
.avif, pero el contenido real es PNG
Esto significa que tu archivo "AVIF" es en realidad un PNG disfrazado, y PNG es un formato sin pérdida que suele producir archivos de 3 a 5 veces más grandes que el JPEG original. Por eso tu imagen parece haber crecido 5 veces.
El impacto en el mundo real
Imagina este escenario: subes una foto JPEG de 500KB y seleccionas AVIF como formato de salida, esperando un archivo de unos 250KB. Pero en su lugar:
- Tu navegador genera PNG en silencio → el archivo se convierte en 2.5MB
- La extensión del archivo dice
.avifpero el contenido es PNG - Otras herramientas pueden no abrirlo porque la extensión no coincide con el contenido
- Puede que pienses que AVIF es un formato terrible, cuando en realidad tu navegador simplemente no lo soporta
Cómo detectamos el soporte AVIF
Img Zip detecta proactivamente si tu navegador soporta la codificación AVIF. Creamos un pequeño canvas de 1×1 píxel e intentamos codificarlo como AVIF:
canvas.toBlob(blob => {
if (blob !== null && blob.type === 'image/avif') {
// ¡La codificación AVIF está soportada!
} else {
// No soportada — se mostrará advertencia
}
}, 'image/avif');
Si el navegador devuelve un blob con un tipo distinto (como image/png) o null, sabemos que la codificación AVIF no está disponible y mostramos claramente una advertencia de "Navegador no soportado" en el selector de formato.
¿Y el formato ICO?
Los archivos ICO (icono) tienen un problema similar. La Canvas API no soporta la codificación ICO en absoluto: ningún navegador la implementa. Cuando seleccionas ICO como salida, el navegador recurre a PNG, dando como resultado un archivo con extensión .ico pero contenido PNG.
Para propósitos de favicon, los navegadores modernos aceptan archivos PNG con extensión .ico, así que esta solución a menudo funciona. Pero no es un verdadero archivo ICO.
¿Qué puedes hacer si tu navegador no soporta AVIF?
Opción 1: Usa WebP en su lugar
WebP está soportado por todos los navegadores modernos tanto para decodificar como para codificar. Ofrece una compresión entre un 25% y un 35% mejor que JPEG, no tan buena como el 50% de AVIF, pero excelente y universalmente soportada.
Opción 2: Cambia a un navegador basado en Chromium
Si la codificación AVIF es importante para ti, Chrome 121+ y Edge (basado en Chromium) ofrecen actualmente el mejor soporte. Ambos pueden codificar AVIF mediante la Canvas API.
Opción 3: Usa software de escritorio
Para la codificación profesional de AVIF, herramientas de escritorio dedicadas como squoosh (la propia herramienta de Google), libavif o Photoshop con complementos AVIF ofrecen una codificación fiable independientemente del soporte del navegador.
El futuro del soporte AVIF en navegadores
La buena noticia es que el soporte de codificación AVIF se está expandiendo. A medida que el códec AV1 se vuelve más prevalente (impulsado por la adopción del streaming de vídeo), los proveedores de navegadores están invirtiendo más en el soporte de codificación. Esperamos que Firefox y Safari añadan la codificación AVIF Canvas en futuras actualizaciones.
Cuando todos los navegadores principales soporten la codificación AVIF, herramientas basadas en navegador como Img Zip podrán ofrecer compresión AVIF a todo el mundo, proporcionando la mejor optimización de imagen absoluta sin necesidad de instalar software.
Conclusión
AVIF es un formato increíble, pero el soporte de codificación del navegador aún está poniéndose al día. Si ves una advertencia de "Navegador no soportado" al seleccionar AVIF, no te preocupes: no es un error, es una limitación de tu navegador actual. Usa WebP como alternativa fiable o cambia a un navegador basado en Chromium para soporte completo de codificación AVIF.
Img Zip siempre será transparente sobre lo que tu navegador puede y no puede hacer, para que nunca obtengas resultados inesperados.
Prueba a comprimir tus imágenes ahora: detectaremos automáticamente lo que soporta tu navegador.
Ready to compress your images?
Try Img Zip — free, private, and no sign-up required.
Start Compressing →