Deja de usar PNG y JPG y empieza hoy con AVIF

En este artículo conocerás un nuevo formato de imagen llamado AVIF, mucho más liviano sin perder calidad, lo que hace que tu aplicación sea mucho más rápida de descargar y mejora su rendimiento.

En primer lugar, ¿qué es AVIF? ¿Es para comer? Caniuse lo define así:

“A modern image format based on the AV1 video format. AVIF generally has better compression than WebP, JPEG, PNG and GIF and is designed to supersede them. AVIF competes with JPEG XL which has similar compression quality and is generally seen as more feature-rich than AVIF”.

Esto significa que AVIF es un nuevo formato de imagen basado en el códec de video AV1. Lo que destaca de él es que comprime una imagen mucho mejor que otros como WebP, JPEG o PNG. Por mucho que AVIF tenga cierta competencia con el formato JPEG XL, el sistema de vectorización y las curvas hacen que la compresión no pierda mucha calidad al comprimirse.

Una comparación sencilla sería así:

Nota que, a pesar de que el formato .webp ha sido muy utilizado en la web, el nuevo formato AVIF comprime más y, por lo tanto, es el más recomendado hoy en día para una aplicación web.

Entre sus principales ventajas, destaco:

- Mejora en el desempeño de tu sitio web (ya que las imágenes se cargarán más rápido).

-Menos ancho de banda de internet y, de igual forma, menor consumo de electricidad (ahorrando la batería del celular de la persona que cargará tu sitio, por ejemplo).

-Y, por supuesto, mejora en la experiencia del usuario =).

¿Cómo convertir una imagen en AVIF?

Las herramientas más famosas y especializadas son avif.io y Squoosh (hecha por Google).

Recomiendo mucho usar Squoosh, incluso como herramienta de aprendizaje, porque con Squoosh puedes cambiar los valores de compresión y ver cómo se comportan con tu imagen.

La configuración por defecto de Squoosh para AVIF ya es muy potente. Mira un ejemplo con esta hermosa computadora en JPG:

Esta imagen de computadora es un JPG de 47.9 KB. Si lo enviamos a Squoosh, nos mostrará la comparativa entre ambos formatos:

Con la configuración predeterminada, puedes notar una diferencia de tamaño del 75 %, hasta 12,2 KB. Si redujéramos el tamaño de la imagen a la mitad (en lugar de cambiarlo directamente en la web mediante CSS), llegaría a los 5,01 KB (un 90% menos que la imagen original):

Compatibilidad con los browsers

La lista más actualizada y completa de navegadores se puede encontrar en Caniuse. Hasta la redacción de este artículo, los principales navegadores ya tienen soporte para el nuevo formato AVIF:

Sin embargo, incluso si un navegador aún no es compatible con AVIF, puedes aplicar dos técnicas diferentes para hacer que tu sitio funcione incluso sin que el navegador esté preparado: con un Polyfill o usando una alternativa con la etiqueta <picture>.

Utilizar el tag <picture>

Para empezar, puedes usar una técnica de navegador llamada Content Negotiation, que descargará la imagen con el formato correcto según el soporte de tu navegador. Por ejemplo:

En este ejemplo, antes del download,  la etiqueta <picture> validará el soporte en el navegador y solo entonces la imagen se descargará con el formato correcto.

Puedes definir varios formatos. El perfecto para una aplicación sería AVIF, con WebP y JPG como opciones siguientes:

Recordemos que la etiqueta de la imagen es una lógica y solo está ahí para crear respaldos. Si es necesario aplicar algún CSS para diseñar la imagen en su aplicación, este CSS debe aplicarse directamente a la etiqueta IMG, ya que la imagen no participará en el DOM al renderizar.

Utilizar un Polyfill

Esta técnica, aunque es menos recomendable (ya que agregará una dependencia a su proyecto), es muy fácil de aplicar y no requerirá ningún cambio en el código de su aplicación.

¿Cómo funciona? Al agregar un archivo llamado avif.js para que se ejecute al iniciar tu aplicación, se creará la capacidad de interpretar este tipo de imagen. Un detalle: el Polyfill para AVIF no funciona en pestañas privadas y en versiones anteriores de los navegadores Firefox (53+) y Edge (17+).

Se recomienda usar ambas técnicas juntas: Crear soporte para AVIF con Polyfill y usar la etiqueta <picture>. Si el usuario abre en una pestaña privada, se utilizará el fallback. Para ver todas las versiones compatibles y cómo instalar Polyfill, consulta la documentación en GitHub.

Algunas funcionalidades adicionales de AVIF

Así como PNG acepta imágenes con transparencia y GIF acepta microanimaciones, los archivos AVIF también poseen características interesantes (además de su increíble compresión):

• Soporte de animaciones: Acepta imágenes multicapa y de secuencia de imágenes (como GIF).
• Elementos gráficos: La forma como AVIF vectoriza la imagen hace que no quede “pixelada” al comprimir, como sucede con JPG.
• Soporte HDR: AVIF soporta una paleta de 12 bits de colores, que puede usarse en imágenes HDR y WCG (Wide color Gramut, usado especialmente en TVs).
• Soporte de transparencia: es igual que PNG, es decir, acepta transparencias, imágenes monocromáticas y multicanal (muy utilizada en el medio científico para imágenes de microscopios y telescopios).

Más herramientas útiles

Por último, y para ayudarte en tu vida, considera usar una herramienta como just-gimme-na-img. Con esta herramienta, puedes cargar una imagen y te proporcionará:

● La imagen convertida a AVIF,
● Los comandos para usar Squoosh en la línea de comandos para convertir su imagen a varios tamaños diferentes,
● Y el código del tag <picture> para que la incluyas en tu solicitud.

Conclusión

Vimos que, aunque AVIF tiene una mejora significativa en términos de compresión y rendimiento en comparación con los formatos tradicionales en la web, la compatibilidad con varios navegadores aún no está completamente cubierta.

Esto nos lleva a técnicas como agregar un Polyfill y usar Content Negotiation con el tag <picture>. Puedes cambiar las imágenes en tu sitio web y cambiar el código para que sea compatible. Consumir menos recursos y optimizar una aplicación web es clave para las aplicaciones del futuro, así que buena optimización para ti.

¡Hasta la próxima!

Álvaro Junqueira: https://github.com/alvarocjunq