Comenzamos en: 17d 8h 37m 41s
PLAZAS LIMITADAS

La extensión Webp

¿Cómo afecta WebP al SEO?

Autor: Carlos Sánchez
Temática: Multimedia, WPO
Fecha de publicación: 2022-03-03
Última revisión: 2022-08-15

A la hora de comprimir imágenes, un planteamiento habitual suele ser cambiar el formato de imagen a WebP. De hecho, cuando utilizamos herramientas como LightHouse o PageSpeed Insights, es una recomendación que nos suelen hacer.

Web vitals con WebP

Uno de los formatos de nueva generación más conocidos es WebP. Pero ¿Qué es el formato WebP y cuáles son sus ventajas e inconvenientes?

¿Qué es el formato WebP?

El formato WebP es un formato de imagen (como pueden ser jpg o png), desarrollado por Google  (de ahí que se recomiende tanto en las herramientas desarrolladas por y para Google).

WebP es un formato de imagen moderno que proporciona una mejor compresión sin pérdida y con pérdida para imágenes en la web. Usando WebP, los webmasters y los desarrolladores web pueden crear, imágenes mejores sin perder velocidad en la web.

Google

Cómo afecta el formato WebP al SEO

Como hemos visto, el formato WebP nos permite tener imágenes con una mejor calidad/peso que en otros formatos, lo que nos permite mejorar los tiempos de carga para los usuarios de la web, mientras que aporta la misma experiencia de calidad.

Aquí muestro un ejemplo de cómo varía el peso de cada imagen según su formato:

Archivo BMP
BMP 742KB
Archivo PNG
PNG 226KB
Archivo JPG
JPG 53,7KB

WEBP 44,4KB

Todo esto es sin duda una grandísima ventaja, entonces ¿Por qué se siguen usando los formatos JPG y PNG en la web? Pues, al ser una tecnología bastante nueva que fue desarrollada en el año 2010, hasta hace poco la mayoría de los navegadores no soportaban el formato y solo servía para Chrome.

Actualmente la mayoría de navegadores soportan este formato. Sin embargo, el navegador Safari solo lo soporta parcialmente desde su versión 14 y no lo soporta en sus versiones anteriores.

compatibilidad webp

Por esto, para usar este formato en nuestras webs, necesitamos poner una imagen alternativa para que todos los navegadores sean capaces de procesar las imágenes.

Una implementación correcta, sería por medio de la etiqueta picture:

<picture>
<source srcset=»img/ejemplo.webp» type=»image/webp»>
<source srcset=»img/ejemplo.png» type=»image/png»>
<img src=»img/ejemplo.jpg» alt=»Texto Alternativo»>
</picture>

Conclusiones

El WebP es un formato a tener en cuenta ya no a medio-largo plazo, sino en el presente. Sin embargo debemos tener en cuenta que aunque queda poco, sigue sin ser compatible para todos los navegadores. Por lo que sería una mala idea dejar a un usuario con una imagen en blanco (por suerte existen los textos alternativos).

Entonces, siempre y cuando implementemos WebP con la etiqueta picture, es una buena implementación.

Para meter WebP por medio de base64 en un SVG, o para meterlo por medio de CSS en un background, o para meterlo en una etiqueta <img>, es demasiado pronto.

Bibliografía

Google desarrolla WebP como código abierto.

Safari tiene problemas para procesar WebP en versiones antiguas.

¿Quieres hacer el Master de SEO Técnico?

Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB

¡Accede al Master de SEO Técnico!
Tal vez te interesen estos artículos: