Imágenes AVIF: hasta un 40% de ahorro de datos frente a WebP

El formato WebP es estupendo. Pero, ¿qué pasa si quieres aún más? AVIF es como WebP, pero con un motor turbo.

Este formato, basado en el códec de video AV1, puede ahorrar entre un 30% y 40% más de datos que WebP, manteniendo la misma o mejor calidad.

AVIF (Formato de Archivo de Imagen AV1) surgió en 2019 como un proyecto conjunto de la Alliance for Open Media. Al igual que WebP, utiliza tecnología de códecs de video, pero esta vez del más moderno AV1. ¿El resultado? Una compresión aún más eficiente y archivos más pequeños.

Si ya estás usando WebP y deseas llevar la optimización de imágenes al siguiente nivel, AVIF es el siguiente paso lógico.

AVIF (Formato de Archivo de Imagen AV1) – un formato moderno para una compresión de imágenes aún más eficiente.

¿Por qué usar AVIF?#

AVIF ofrece varias ventajas sobre formatos más antiguos:

• Mejor compresión que WebP
  AVIF típicamente ahorra un 20–30% más de datos que WebP con la misma calidad. En comparación con JPEG, el ahorro es aún más significativo – hasta un 50% o más.
• Soporte de transparencia
  Al igual que WebP, AVIF admite canales alfa, por lo que puedes usar imágenes transparentes sin recurrir al ya obsoleto formato PNG.
• Sin pixelación
  Mientras que JPEG presenta "pixelación" con alta compresión (artifactos de bloqueo), AVIF tiende a difuminar suavemente la imagen, lo cual es mucho más tolerable para el ojo humano.
• Soporte HDR
  AVIF puede mostrar imágenes con un rango dinámico más alto, lo cual es especialmente valioso para fotógrafos.
• Más espacios de color
  Soporta una gama más amplia de espacios de color, incluyendo Rec2020.

Soporte en navegadores#

El soporte para AVIF en los navegadores está mejorando rápidamente. Actualmente, todos los navegadores modernos lo soportan:

• Chrome (desde la versión 85) y otros navegadores basados en Chromium
• Firefox (desde la versión 93)
• Safari (desde la versión 16)
• Edge (desde la versión 85)

Consulta Soporte AVIF según CanIUse. Sin embargo, todavía hay versiones antiguas de navegadores que no soportan AVIF, por lo que recomendamos que revises tus estadísticas de navegador e implementes un fallback a WebP o JPEG.

Cómo implementar con fallback a WebP#

Para garantizar la compatibilidad con navegadores más antiguos, puedes usar el elemento HTML <picture> con múltiples fuentes. El navegador seleccionará automáticamente el formato que soporta:

<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="1600" height="900" loading="lazy" />
</picture>

El navegador recorrerá las fuentes de arriba hacia abajo y usará la primera que soporte. Si no soporta AVIF, recurrirá a WebP. Si tampoco soporta WebP, usará JPEG como última opción.

Automatización de la conversión#

Lo ideal es automatizar la generación de imágenes AVIF. Hay varias opciones:

• Cloudflare
  Cloudflare en una configuración específica convierte automáticamente las imágenes a AVIF si el navegador soporta este formato. No necesitas hacer nada en tu propio servidor.
• PHP 8.1+
  Desde PHP 8.1 está disponible la función nativa imageavif() para generar imágenes AVIF. Puedes ajustar los parámetros quality y speed.
• ImageMagick
  La herramienta ImageMagick soporta la conversión a AVIF mediante el comando magick convert.
• Servicios externos
  Puedes utilizar servicios como AWS Lambda con CloudFront, que convierten automáticamente las imágenes bajo demanda.

Nuestra experiencia práctica#

En nuestras consultorías sobre velocidad web, en PageSpeed.ONE hemos ayudado a implementar AVIF en varios proyectos. Aquí están nuestras experiencias y recomendaciones:

Ahorro de datos esperado#

Con el formato AVIF es posible alcanzar un ahorro de tamaño de datos de imágenes en un rango de aproximadamente 30 a 40% en comparación con WebP. Esto, por supuesto, varía según el tipo de imagen – el ahorro suele ser mayor en fotografías que en gráficos con bordes definidos.

Configuración de parámetros recomendada#

Basándonos en nuestras pruebas, recomendamos la siguiente configuración:

• Quality (calidad): aproximadamente 50
• Effort: valor 4

Un valor más alto de effort aumenta el tiempo de generación de la imagen, pero también el ahorro potencial de datos. Recomendamos probar esta configuración en tus imágenes específicas, ya que los valores óptimos pueden variar según el tipo de contenido.

Comparación práctica del ahorro de datos al usar AVIF frente a WebP. Fuente: informe Técnico en monitoreo PLUS en el sitio web del cliente de PageSpeed.ONE. Herramienta: Squoosh

Opciones de implementación#

Existen dos caminos principales para implementar AVIF:

1. Generación propia
   Si tienes control sobre el servidor, puedes generar imágenes AVIF tú mismo. La ventaja es el control total, la desventaja es la mayor carga del servidor.

2. Servicios externos
   Es muy variado, a veces es adecuado Cloudflare, a veces CloudFront y AWS Lambda. Recomendamos hacer una estimación según tus necesidades y el volumen de imágenes.

3. Conversión manual
   Para sitios estáticos más pequeños, comprime las imágenes a formato AVIF manualmente, usando herramientas como Squoosh, Image to Avif en Cloudinary o el conocido TinyPNG.

Monitoreo del impacto#

Al igual que con WebP, con AVIF es importante monitorear el tamaño de datos de las imágenes y su impacto en la métrica LCP. En nuestro monitoreo PLUS puedes seguir cómo cambia el tamaño de las imágenes a lo largo del tiempo y su impacto en la velocidad de carga de la página.

Siempre monitorea el tamaño de datos de las imágenes. Incluso un solo cambio en una imagen puede causar fluctuaciones en la velocidad y afectar las conversiones de tu sitio web. Fuente: informe Técnico en monitoreo PLUS.

¿Cuándo usar AVIF vs WebP?#

AVIF no siempre es la mejor opción en comparación con WebP. Aquí tienes una guía rápida de cuándo usar cada uno:

• Usa AVIF, si: Buscas el máximo ahorro de datos. Apuntas a navegadores modernos. Y tienes el tiempo y los recursos para probar configuraciones.

• Quédate con WebP, si: Necesitas una solución universal con máxima compatibilidad. La generación de AVIF ralentizaría tu servidor. Y deseas una implementación más sencilla.

• Solución ideal:
  Usa AVIF con fallback a WebP. Los navegadores que soportan AVIF recibirán los archivos más pequeños. Los navegadores antiguos recibirán WebP. Todos contentos.

Resumen#

AVIF es el siguiente paso lógico después de WebP. Ofrece una compresión significativamente mejor, pero requiere un poco más de trabajo en implementación y pruebas de configuración.

Si ya estás usando WebP y deseas optimizar aún más, AVIF es una opción a considerar. Especialmente si tienes la posibilidad de automatizar a través de Cloudflare u otros servicios similares.

Pero siempre ten en mente un fallback para navegadores más antiguos y monitorea el impacto en la velocidad del sitio web. Cada kilobyte ahorrado cuenta, pero no a costa de la compatibilidad.

Aquí encontrarás más consejos para optimizar imágenes en la web e información detallada sobre el formato WebP.