Uso de imágenes WEBP para mejorar el tiempo de carga

¡Hola Wecindario ! espero que el verano vaya de lujo. Hoy vamos a ver el uso de imágenes WEBP para mejorar el tiempo de carga. Y empezamos poir definir qu ees WebP, y solo debes saber que es un formato de imágenes de nueva generación desarrollado por Google y  se supone que mejora 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 te interesa WEBP, Pero como en todo, antes de nada revisaremos pros y contras.

Las ventajas e inconvenientes de imágenes WebP

Aunque se reducen mucho los tamaños de las imágenes y  te ayude a mejorar los tiempos de carga de tu web, debes saber que no todo es color de rosa , así que aquí tienes los pros y contras

Primeramente. ¿Cómo consigo las imágenes WebP? Cómo por ahora las cámaras No hacen estos formatos, puedes usar estas dos webs.

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

Y para saber si estás usando un buen conversor, te deberia dejat  indicar el grado de compresión de la imagen. Mi consejo es que si vas a convertir todas las imágenes de tu web, crees un droplet para  automatizar la conversión de un gran número de archivos.y Si eres desarrollador, recuerda que también puedes convertir imagenes a webP a través de Node.js. Y para ellos usa el módulo imagein y el plugin imagemin-webp.

Uso de las imágenes WebP

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

El WebP y el HTML

El consejo para ofrecer WebP y que tu web siga funcionando en todos los navegadores  es ofrecer diferentes opciones de imagen. ¿Cómo lo hacemos? solamente tienes que cambiar el marcado HTML básico de <img> a <picture> Por esto:

<picture>
  <source srcset="img/imagen.webp" type="image/webp">
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Además, si tu navegador no soporta el primer source del marcado,puedes poner por último el marcado img con el link a JPG, el cual es soportado por todos los navegadores.Y usando media queries lo solucionamos

El WebP y El CSS

Hemos visto que usando las media queries podemos solucionar el problema que existe entre estas imágenes con navegadores antiguos… en CSS no tenemos esta suerte  En este caso, para poder emplear imágenes WebP en nuestro código CSS  tenemos que usar Modernizr. Que es una librería JavaScript que se encargará de gestionar  la entrega de imágenes WebP según el navegador que visite la página web.

El WebP y el WordPress

Si usas WordPress y  es superior a la 5.8, tenemos buenas noticias. ¡Ya te permiten imágenes WebP de manera nativa! Si por lo que sea , no puedes actualizar , puedes usar estos plugins:

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

Y, tanto en las nuevas versiones, como con los plugins, el mismo WordPress se encargará de ofrecer las imágenes adecuadas según el navegador,  ¿a que es genial?

Seguro que con esto ya tienes una idea generalizada  y ya sabes,  más o menos , cómo implementar imágenes WebP en tu página web y mejorar los resultados de búsqueda y tiempos de carga.

¡Hasta la próxima Wecindario!

Accede a más contenido

En Hoswedaje, ofrecemos más contenido relacionado. Os dejamos un par de post, uno es sobre liberar memoria SWAP desde un terminal LINUX. Y otro sobre error 403, cómo solucionarlo en la web.

  Descubre cómo liberar la memoria SWAP desde un terminal LINUX, pinchando aquí.

  ¿Te preocupa el error 403? Aprende a solucionarlo en la web, leyendo este artículo.