AVIF es el nuevo contendiente en el mundo de los formatos de imagen para web. Promete comprimir un 50% más que JPG y un 20% más que WebP manteniendo calidad visual equivalente. Pero, ¿es ya el momento de usarlo? ¿Qué pasa con los navegadores que no lo soportan? Esta guía responde todo.
AVIF (AV1 Image File Format) es un formato de imagen derivado del codec de vídeo AV1, desarrollado por la Alliance for Open Media (AOM) — un consorcio que incluye a Google, Apple, Mozilla, Netflix y Amazon, entre otros.
Fue diseñado desde cero para aprovechar las técnicas de compresión más avanzadas disponibles. A diferencia de JPG (creado en 1992) o WebP (2010), AVIF (2019) incorpora:
Para una fotografía típica de 1920×1080 píxeles con calidad visual equivalente:
Referencia base. Compatible en todos lados. Artefactos visibles en calidades bajas.
30% más ligero que JPG. Soporte del 97% de navegadores. El estándar actual.
50% más ligero que JPG. Calidad superior a baja tasa de bits. Codificación lenta.
| Característica | JPG | WebP | AVIF |
|---|---|---|---|
| Compresión (vs JPG) | — | ~30% mejor | ~50% mejor |
| Transparencia | ❌ No | ✅ Sí | ✅ Sí |
| Animación | ❌ No | ✅ Sí | ✅ Sí (mejor) |
| HDR / amplia gama | ❌ No | ❌ No | ✅ Sí |
| Velocidad de codificación | ⚡ Rápida | ⚡ Rápida | 🐢 Lenta |
| Soporte navegadores 2026 | ✅ 100% | ✅ 97% | ✅ 93% |
AVIF tiene soporte en todos los navegadores modernos principales:
⚠️ Usuarios sin soporte: según Can I Use, aproximadamente el 7% de los usuarios globales aún usa navegadores sin soporte AVIF (principalmente IE11 y versiones muy antiguas de Safari). Por eso siempre debes servir AVIF con un fallback a WebP o JPG.
💡 Regla práctica: si ya sirves WebP y tienes buen rendimiento, no migres a AVIF urgentemente. Si estás diseñando un nuevo sitio o refactorizando assets, sí vale la pena implementar AVIF con fallback desde el principio.
La forma correcta de usar AVIF en web es con el elemento <picture>, que ofrece alternativas al navegador según lo que soporte:
<picture>
<source srcset="imagen.avif" type="image/avif">
<source srcset="imagen.webp" type="image/webp">
<img src="imagen.jpg" alt="Descripción de la imagen" width="800" height="600">
</picture>El navegador usa la primera fuente que entiende. Chrome y Firefox modernos usan AVIF. Safari < 16.4 usa WebP. IE y navegadores muy viejos usan JPG. Tú solo defines las tres opciones.
Next.js convierte y sirve AVIF automáticamente si lo configuras en next.config.js:
module.exports = {
images: {
formats: ['image/avif', 'image/webp'],
},
};Activa "Polish" en el dashboard de Cloudflare → Speed → Optimization. Con la opción "Lossless" o "Lossy" Cloudflare sirve automáticamente el formato que cada navegador soporte, incluyendo AVIF.
Mientras AVIF madura en tus herramientas, WebP ya te da un 30% de ahorro con soporte del 97% de navegadores. Sin registro, todo en tu navegador.
⚡ Convertir a WebP gratisA largo plazo, probablemente sí. Pero WebP tiene casi una década de ventaja en ecosistema de herramientas y soporte. En 2026, la estrategia más práctica es usar AVIF con fallback a WebP en lugar de migrar completamente.
Adobe Photoshop añadió soporte de lectura de AVIF en versiones recientes (2022+), pero la exportación nativa aún es limitada. Alternativas: usar Squoosh, ImageMagick o un CDN que convierta automáticamente.
No. Los clientes de email (especialmente Outlook) no soportan AVIF. Para emails usa JPG o PNG. Ni siquiera WebP funciona en todos los clientes de email.
A calidades equivalentes (misma calidad visual percibida), AVIF es más pequeño pero el resultado visual es muy similar. La diferencia es más notable en tasas de bits muy bajas: AVIF mantiene más detalles con menos bytes que WebP.
Gratis, instantáneo, privado. Sin registro.
⚡ Usar ComprimirPro ahora