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:: 2024-10-22

Índice: mostrar

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.

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:

BMP 742KB

PNG 226KB

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 relativamente moderna en comparación con otros formatos de imágenes, ya que fue anunciada en el año 2010 y tuvo su salida en el 2018, hasta hace poco la mayoría de los navegadores no soportaban el formato y solo servía para Chrome. Actualmente muchos navegadores, incluyendo Safari, tienen compatibilidad con este formato de imagen.

Actualización 22/10/2024: Actualmente todos los navegadores comunes menos IE (que está depreciado) lo leen con normalidad

Información extraída de la web CanIUse

En cualquier caso, se recomienda poner una imagen alternativa en un formato clásico para que todos los navegadores sean capaces de procesar la imagen y que no haya problemas de compatibilidades que desemboquen en una mala experiencia del usuario.

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.