Cómo usar imágenes WebP en tu web y mejorar la carga

Actualizado el jueves, 17 noviembre, 2022

WebP es un formato de imágenes de nueva generación desarrollado por Google y promete mejorar los tiempos de carga de tu web al emplear un tipo de compresión intraframe basada en predicción por bloques.

Si te preocupa el SEO y el posicionamiento de tu página seguro que has probado alguna herramienta de auditoría como Google Page Speed o Semrush. En estas herramientas seguramente te recomienden que pases tus imágenes a un formato de nueva generación como WebP para reducir los tiempos de carga y mejorar tus resultados en las búsquedas.

En alguna ocasión te hemos hablado de la influencia de los archivos de imagen en la carga de tu web. Hoy te indicaremos un par de trucos para poder trabajar con este tipo de archivos de la forma más sencilla posible. Es importante destacar que aún siendo un formato de archivo que empieza a estar muy estandarizado, no lo soportan todos los navegadores del mercado, por ello, es importante que a la hora de emplearlo lo hagas con cuidado.

Puedes ver la compatibilidad de las imágenes WebP con los navegadores en la página Can I use.

Ventajas e inconvenientes de imágenes WebP

Aunque se reduzcan mucho el tamaño de las imágenes y, por lo tanto, te ayude a mejorar los tiempos de carga de tu web, deberías saber que no todo es color de rosa con las imágenes WebP. Te indicamos algunas de las ventajas e inconvenientes más populares para poder tomar una decisión justificada.

Conversión a PNG o JPG a WebP

Empecemos por lo primero. ¿Cómo consigo imágenes WebP? A día de hoy no existe ningún dispositivo (cámara, programa…) que ofrezca imágenes en este formato, por lo que tendrás que convertir tus imágenes PNG o JPG a WebP. Puedes utilizar alguno de estos conversores online:

• https://ezgif.com/webp-maker
• https://convertio.co/es/webp-jpg/

Para saber si estás empleando un buen conversor, como mínimo deberías poder indicar el grado de compresión de la imagen. El problema de los conversores online, es que, la conversión suele estar limitada a un número concreto de archivos. Si empleas PhotoShop, puedes realizar la conversión desde el propio programa. PhotoShop, de forma nativa, tampoco permite exportar a WebP, sin embargo, puedes descargarte de su web un plugin para poder exportar imágenes en este formato.

Nuestro consejo es que si vas a convertir todas las imágenes de tu web, crees un droplet para poder automatizar la conversión de un gran número de archivos.

Si eres desarrollador, recuerda que también puedes convertir imagenes a webP a través de Node.js. Necesitarás emplear el módulo imagein y el plugin imagemin-webp.

Uso de imágenes WebP

Como comentamos, no todos los navegadores admiten imágenes WebP, tal como puedes observar en la web canIUse. Sin embargo, existe una forma de incluirlas ofreciendo una alternativa para los navegadores que todavía no las soporten.

WebP y HTML

El truco para ofrecer WebP y que tu web siga funcionando en todos los navegadores que no soporten este nuevo formato es ofrecer diferentes opciones de imagen. Para ello, solamente tienes que cambiar el marcado HTML básico de <img> a <picture>. Algo más o menos así:

<picture>
  <source srcset="img/Imagen.webp" type="image/webp">

  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

De esta forma, si tu navegador no soporta el primer source del marcado, irá yendo uno por uno por los declarados a continuación. Puedes poner por último el marcado img con el link a JPG, el cual es soportado por todos los navegadores. Recuerda que puedes emplear media queries para filtrar el uso de una imagen u otra según condiciones concretas, (por ejemplo solo entregar el formato WebP en móviles)

WebP y CSS

Hemos visto que mediante el cambio de marcado de nuestra web y usando las media queries podemos solventar el problema que existe entre estas imágenes con navegadores antiguos… en CSS no pasa lo mismo. En este caso, para poder emplear imágenes WebP en nuestro código CSS será necesario tener Modernizr. Una librería JavaScript que se encargará de gestionar entre otras cosas, la entrega de imágenes WebP según el navegador que visite la página web.

WebP y WordPress

Si trabajas con WordPress y tu versión es superior a la 5.8, tenemos buenas noticias. ¡Ya permite imágenes WebP de manera nativa! Si por cualquier motivo, no puedes actualizar la versión, tranquilo, existen varios plugins para que WordPress soporte archivos WebP:

• WebP Express
• WebP Converter for Media
• WP Enable WebP

Además, tanto en las nuevas versiones, como con los plugins, el propio WordPress se encargará de ofrecer las imágenes adecuadas según el navegador con el que se esté visitando la web.

Después de este repaso, seguro que ya tienes todos los conocimientos necesarios para usar imágenes WebP en tu página web o a la hora de crear tu tienda online y mejorar los resultados de búsqueda y tiempos de carga. ¡Hasta la próxima!