En la parte 1 de nuestro artículo PageSpeed Optimization: Get Faster Loading Images, hablamos todo sobre WebP, qué es y cómo implementarlo en su sitio. Otro formato de imagen de próxima generación que está ganando popularidad debido a sus capacidades 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 regalías basado en el códec de video AV1 desarrollado por 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 alta. 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 es un 50% menos de tamaño, y en comparación con WebP, es un 20-30% menos de tamaño de archivo, sin pérdida de calidad.
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 afirmó que AVIF es muy superior a JPEG, PNG y WebP, y actualmente lo está sirviendo para sus miniaturas de imágenes.
El formato de imagen AVIF admite estas siguientes características, lo que las hace potencialmente mejores en comparación con otros formatos de imagen:
Aunque el formato de imagen AVIF tiene muchas ventajas, la principal desventaja que tiene es su disponibilidad y soporte de navegador.
Al momento de escribir (noviembre de 2021), AVIF es compatible con Firefox, Chrome, Android y Opera. Por el momento, Microsoft Edge y Safari no admiten el formato de imagen. Sin embargo, si es un usuario de Microsoft, hay un complemento disponible que puede descargar que proporciona soporte técnico para él. Además, Firefox aún no admite AVIFs animados.
WebP y AVIF son formatos de imagen de próxima generación recomendados por Google en su herramienta PageSpeed Insights. WebP es mucho más antiguo en comparación con AVIF y fue desarrollado por Google. También se usa muy comúnmente y es compatible con más navegadores web en comparación con AVIF.
AVIF, sin embargo, es mucho más pequeño y se renderiza más rápido en comparación con WebP. De hecho, es alrededor de un 20-30% menos en comparación con WebP. El único inconveniente de AVIF es que no es tan ampliamente compatible en este momento, en comparación con WebP.
Sin embargo, las perspectivas para AVIF son brillantes, ya que el soporte para Edge y Safari puede llegar más rápido, ya que se considera un formato de imagen muy prometedor.
Aparte de los principales factores a considerar, aquí hay algunas diferencias más entre AVIF y WebP a considerar:
Tanto WebP como AVIF tienen ventajas y desventajas sobre el otro. Cuando se trata de cuál elegir entre los dos, dependerá principalmente de su preferencia, qué tipo de sitio tiene y cuál le proporcionaría el mayor beneficio.
Hay un par de programas y aplicaciones que puede usar para convertir sus imágenes a AVIF. Uno que se recomienda es Squoosh, que es una aplicación web de compresión de imágenes que fue desarrollada por el propio equipo de Google Chrome Labs. Otros programas a utilizar son GIMP y Microsoft Paint. Desafortunadamente, Photoshop no lo admite a partir de este momento.
Dado que AVIF sigue siendo una tecnología bastante nueva y aún no es totalmente compatible con todos los navegadores, cuando se trata de implementación, hay dos formas principales de servir al formato: a través del elemento de imagen y a través de la negociación de contenido.
Esto se utiliza para que si el navegador utilizado no es compatible con AVIF, mostrará otro tipo de imagen, en su lugar.
Aquí hay un ejemplo del código que podría agregar a las etiquetas de 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=”description of example image”>
</picture>
La negociación de contenido permite que el servidor sirva formatos basados en lo que es compatible con el navegador. Los navegadores que admiten un formato específico pueden anunciarlo agregando el formato a su encabezado de solicitud de aceptación. Por ejemplo, el encabezado Aceptar solicitud para imágenes en Chrome es:
Aceptar: image/avif,image/webp,image/apng,image/,/*;q=0.8
El código para comprobar si AVIF es compatible con el controlador de eventos fetch puede tener un aspecto similar al siguiente:
const hdrAccept = event.request.headers.get(“aceptar”);
const sendAVIF = /image/avif/.test(hdrAccept);
Puede utilizar este valor para servir AVIF o cualquier otro formato predeterminado.
Otra opción es usar una CDN que admita AVIF. Si aloja sus imágenes en Cloudflare, esto no debería ser un problema, ya que han agregado soporte para ello.
Si su sitio está en WordPress, hay complementos que podría usar que podrían ayudarlo a servir imágenes AVIF a los navegadores que lo admiten y para aquellos que no lo admiten, usaría otros formatos de imagen en su lugar.
Ejemplos de estos plugins incluyen Shortpixel, Imagekit, Cloudinary, ImageEngine, entre otros.
Cada vez surgen más formatos de imagen de próxima generación a medida que las empresas buscan mejorar el rendimiento web y mejorar los formatos de imagen anteriores y sus limitaciones.
Tanto WebP como AVIF son formatos de próxima generación recomendados por Google para ayudar a acelerar su sitio y mejorar la experiencia del usuario.
Al final del día, ambos tienen ventajas y desventajas, y dependería de usted, como propietario del sitio y propietario de un negocio, decidir cuál es su formato preferido que mejor serviría a su sitio y a sus visitantes / clientes.
Cuando se trata de acelerar un sitio y al mismo tiempo proporcionar imágenes de calidad, ambos formatos son excelentes opciones, en comparación con los formatos más comunes como JPEG y PNG. Ambos hemos probado JPEG vs PNG para ver si hay un formato preferido y descubrimos que no hay ninguno, y que realmente se reduce a la velocidad de la página. Echa un vistazo a nuestra prueba sobre eso para obtener más detalles.
Si su objetivo es acelerar su sitio, para ganar rango, la compresión de imágenes es solo un factor en el que trabajar e ir por WebP o AVIF es solo un paso hacia eso. Esperamos que a través de estos dos artículos, ahora 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 artículo Optimización de imágenes.
Before you can receive free updates, link building strategies or SEO tips you need to confirm your email right now.
(It’s easy)
Just go to your inbox, open the confirmation email from the SIA, and click the link.
And that’s it!
PS: If you don’t see a confirmation email, please check your spam/junk or promotions folders. Sometimes the confirmation message ends up there by mistake.
Obtenez nos 7 études S.I.A. les plus controversées qui feront trembler la tête même les SEO les plus avancés d’incrédulité.
De plus, nous vous alerterons lorsque nous publierons de nouveaux tests au public.
Obtenga nuestros 7 estudios S.I.A. más controvertidos que harán que incluso el SEO más avanzado sacuda la cabeza con incredulidad.
Además, le avisaremos cuando publiquemos nuevas pruebas al público.
Get Our Most 7 Controversial S.I.A. Studies That Will Make Even the Most Advanced SEO Shake Their Head in Disbelief.
Plus we will alert you when we publish new tests to the public.
