AVIF explicado — cuándo el 30% menos que WebP justifica el fallback
Tomoda HinataAutor y mantenedor de la herramientaPublicado el 26 abr 20265 min de lectura
AVIF (AV1 Image File Format) envuelve un keyframe de AV1 en un contenedor HEIF y queda ~20–30% más pequeño que WebP a la misma calidad. Sigue habiendo huecos — Outlook desktop, Edge mail, Android Webview antiguo, macOS Mail inline — así que en producción se sirve detrás de un `<picture>` con fallback a WebP.
Herramientas usadas en esta guía
¿Qué es AVIF técnicamente?
AV1 keyframe en HEIF (mismo contenedor que HEIC). AV1 es el sucesor libre de VP9/HEVC; sus herramientas (bloques variables, transformadas avanzadas, codificación de entropía moderna) explican el 20–30% extra.
Patrón `<picture>` con fallback
AVIF primero, WebP después, `<img>` con JPG. El navegador elige el primero que sabe decodificar; sin JS.
¿Cuándo merece la pena?
Tres dianas: hero en sitios de alto tráfico, galerías de e-commerce, portfolios. Tres exageraciones: blogs de bajo tráfico, plantillas de email, subidas SNS efímeras.
Coste de encoding y build vs runtime
Q60 ~10× más lento que JPG Q82. 100 imágenes en estación: 2–3 min. Edge con 10 s: timeout. Encoda en build; el decode es rápido (<50 ms).
Pasos
Aprox. 2 minElegir master
PNG/RAW/TIFF si es posible; JPG-only también vale.
Abrir el conversor
Soltar archivo; calidad 60 por defecto.
Encodar
5–15 s por imagen.
Cablear `<picture>`
AVIF primero, WebP fallback, JPG como `<img>`.
| Formato | Tamaño | Encoding (M2) | Soporte 2026 |
|---|---|---|---|
| JPG Q82 | 245 KB | 0,1 s | 100% |
| WebP Q82 | 165 KB | 0,4 s | 98% |
| AVIF Q60 | 115 KB | 4,2 s | 92% |
Preguntas frecuentes
¿AVIF soporta transparencia?
Sí, alfa de 10 bits.
¿AVIF animado?
Sí (AVIS) pero soporte estrecho; mejor WebP para animación.
¿HDR?
Sí, AVIF 10/12 bits con HDR10.
¿Y resoluciones múltiples?
Combina `<picture>` con srcset/sizes.
¿AVIF reemplaza al JPG?
No en el horizonte previsible.
¿El navegador frena el encoding?
No — AV1 simplemente es caro.
Probar ahora
Ultra-light images with the modern AVIF format
AVIF ConverterEste artículo incluye traducción asistida por IA. Avísanos si encuentras errores.