Categorías

Optimización de PageSpeed: Consigue una carga más rápida de las imágenes Parte 2 - AVIF

La velocidad de la página es un componente crucial para un sitio web. Usted puede aumentar la velocidad de su sitio haciendo una variedad de modificaciones de optimización de la velocidad de la página. Una de ellas es la optimización de las imágenes.

En la primera parte de nuestro Optimización de PageSpeed: Consiga que las imágenes se carguen más rápido hablamos de WebP, qué es y cómo implementarlo en tu sitio. Otro formato de imagen de última generación que está ganando popularidad debido a su capacidad de compresión, sin sacrificar la calidad de la imagen es AVIF.

AVIF es un formato de imagen de código abierto y libre de derechos basado en el códec de vídeo AV1 desarrollado por la Alliance for Open Media (AOMedia) en colaboración con Google, Cisco y Xiph.org.

Con AVIF, las imágenes se comprimen y se hacen más pequeñas, conservando la misma calidad de la imagen original. AVIF ofrece la mejor compresión del mercado, manteniendo la calidad de las imágenes. Es compatible con cualquier códec de imagen y reduce significativamente el tamaño del archivo en comparación con JPEG, PNG e incluso WebP.

En comparación con JPEG, AVIF tiene 50% menos de tamaño, y en comparación con WebP, tiene 20-30% menos de tamaño de archivo, sin pérdida de calidad.

El AVIF ha sido desarrollado por muchas empresas como Google, Amazon, Cisco y Netflix, entre otras. Estas empresas están desarrollando el formato debido a su necesidad de imágenes de alta calidad que no consuman demasiado ancho de banda. Netflix incluso afirma que AVIF es muy superior a JPEG, PNG y WebP, y actualmente lo utiliza para sus miniaturas de imágenes.

logotipos de moomba

El formato de imagen AVIF admite las siguientes características, que lo hacen potencialmente mejor en comparación con otros formatos de imagen:

  • Profundidad de color de 8, 10 y 12 bits
  • Compresión sin pérdidas y compresión con pérdidas
  • Monocromo (alfa/profundidad) o multicomponentes
  • Incluye un canal alfa que proporciona un toque más rico a las imágenes
  • Submuestreo de croma 4:2:0, 4:2:2, 4:4:4
  • Cualquier espacio de color, incluyendo: gama cromática amplia, ISO/IEC CICP y perfiles ICC
  • Alto rango dinámico, que proporciona imágenes mejores y más brillantes
  • Grano de la película
  • Máxima compresión en formato libre de derechos

Aunque el formato de imagen AVIF tiene muchas ventajas, el principal inconveniente que presenta es su disponibilidad y la compatibilidad con los navegadores.

En el momento de escribir este artículo (noviembre de 2021), AVIF es compatible con Firefox, Chrome, Android y Opera. Por el momento, Microsoft Edge y Safari no soportan el formato de imagen. Sin embargo, si usted es un usuario de Microsoft, hay un complemento disponible que puede descargar que proporciona soporte para ello. Además, Firefox todavía no soporta AVIFs animados.

webp y avif

WebP vs. AVIF

WebP y AVIF son dos formatos de imagen de última generación recomendados por Google en su herramienta PageSpeed Insights. WebP es mucho más antiguo que AVIF y fue desarrollado por Google. También se utiliza con mucha frecuencia y es soportado por más navegadores web en comparación con AVIF.

Sin embargo, AVIF es mucho más pequeño y se renderiza más rápido en comparación con WebP. De hecho, es alrededor de 20-30% menos en comparación con WebP. La única desventaja de AVIF es que, en este momento, no es tan ampliamente apoyado en comparación con WebP.

Sin embargo, las perspectivas para AVIF son brillantes, ya que la compatibilidad con Edge y Safari puede llegar más rápido, ya que se considera un formato de imagen muy prometedor.

Aparte de esos factores principales a tener en cuenta, aquí hay algunas diferencias más entre AVIF y WebP a considerar:

  • WebP sólo funciona con una profundidad de 8 bits, mientras que AVIF admite 8, 10 y 12 bits, lo que acepta una gama más amplia de imágenes para su compresión
  • WebP sólo admite el canal 4:2:0, mientras que AVIF admite 4:2:0, 4:2:2 y 4:4:4
  • AVIF produce una mejor calidad de imagen en comparación con WebP
  • AVIF es compatible con HDR, que produce imágenes de alta luminosidad.

Tanto WebP como AVIF tienen ventajas y desventajas sobre el otro. A la hora de elegir uno de los dos, dependerá principalmente de sus preferencias, del tipo de sitio que tenga y de cuál le proporcione más beneficios.

Cómo implementar AVIF en su sitio web

implementación de avif

Hay un par de programas y aplicaciones que puedes utilizar para convertir tus imágenes a AVIF. Uno de los recomendados es Squoosh, que es una aplicación web de compresión de imágenes desarrollada por el propio equipo de Google Chrome Labs. Otros programas a utilizar son GIMP y Microsoft Paint. Desgraciadamente, Photoshop no lo soporta por el momento.

Dado que AVIF es todavía una tecnología bastante nueva y aún no es totalmente compatible con todos los navegadores, a la hora de implementarla, hay dos formas principales de servir el formato: a través del elemento de imagen y a través de la negociación del contenido.

Se utiliza para que si el navegador utilizado no soporta AVIF, muestre otro tipo de imagen, en su lugar.

Este es un ejemplo del código que se puede añadir al <body> en su página.

<picture>
<source srcset=”images/example.avif” type=”image/avif”>
<source srcset=”images/example.webp” type=”image/webp”>
<img src=”images/example.jpg” alt=&quot; descripción of example image”>

</picture>

La negociación de contenidos permite al servidor servir formatos basados en lo que soporta el navegador. Los navegadores que soportan un formato específico pueden anunciarlo añadiendo el formato a su Accept Request Header. Por ejemplo, el Accept Request Header para imágenes en Chrome es:


Aceptar: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

El código para comprobar si el AVIF está soportado en el manejador de eventos fetch puede ser algo así:


const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);


Puedes utilizar este valor para servir AVIF o cualquier otro formato por defecto.

Otra opción es utilizar un CDN que soporte AVIF. Si alojas tus imágenes en Cloudflare, esto no debería ser un problema ya que han añadido soporte para ello.

Si tu sitio está en WordPress, hay plugins que podrías utilizar para servir las imágenes AVIF a los navegadores que lo soportan y para los que no lo soportan, utilizarían otros formatos de imagen en su lugar.

Algunos ejemplos de estos plugins son Shortpixel, Imagekit, Cloudinary, ImageEngine, entre otros.

Conclusión:

Cada vez surgen más formatos de imagen de nueva generación, ya que las empresas buscan mejorar el rendimiento de la web y mejorar los formatos de imagen anteriores y sus limitaciones.

Tanto WebP como AVIF son formatos de nueva generación recomendados por Google para ayudar a acelerar su sitio y mejorar la experiencia del usuario.

A fin de cuentas, ambos tienen ventajas y desventajas, y dependerá de usted, como propietario de un sitio y de un negocio, decidir cuál es su formato preferido que mejor sirva a su sitio y a sus visitantes/clientes.

Cuando se trata de acelerar un sitio web sin dejar de ofrecer imágenes de calidad, ambos formatos son grandes opciones, en comparación con los formatos más comunes como JPEG y PNG. Hemos probado ambos JPEG vs PNG para ver si hay un formato preferido y encontramos que no hay ninguno, y que realmente se reduce a la velocidad de la página. Consulta nuestra prueba al respecto para obtener más detalles.

Si su objetivo es acelerar su sitio, para ganar rango, la compresión de la imagen es sólo un factor a trabajar y optar por WebP o AVIF es sólo un paso hacia eso. Esperamos que con estos dos artículos tenga una mejor idea de qué formato de imagen de nueva generación elegir.

Para obtener más información y consejos sobre cómo optimizar sus imágenes, consulte nuestro Optimización de la imagen artículo.

Marie Aquino

SIA STAFF SEO WRITER

Marie's biografía completa aquí.