WebP es un nuevo formato de imagen desarrollado por Google que ofrece un ratio de compresión un 25% mayor que un PNG y entre 25%-34% que el JPEG.
Utilizar WebP es nuestras páginas web nos ayudará a mejorar el tiempo de carga y ofrecer una mejor experiencia a nuestros usuarios.
Por desgracia no todos los navegadores ofrecen aún soporte a este nuevo formato por lo que en muchos casos tendremos que utilizar ambos formatos.
La forma correcta de hacerlo será la siguiente:
<picture>
<source srcset="cdn/images/2.webp" type="image/webp">
<img src="cdn/images/2.jpg" alt="Telefónica">
</picture>
De esta forma, si el navegador sí permite los WebP, cargará primero dicho formato. En el caso de no saber interpretarlo cargará las imágenes en jpg.
En el caso de que necesitemos aplicarlo a imágenes dentro del CSS podemos hacer uso de la librería Modernizr.
Esta librería trae por defecto un autodetector de soporte para WebP que podremos utilizar de la siguiente manera:
.no-webp .client1 {
background-image: url("image.jpg");
}
.webp .client1{
background-image: url("image.webp");
}
Automáticamente Modernizr sabrá qué clase aplicar y por lo tanto se cargará el formato de imagen soportado por el buscador.
Google tiene una guía muy interesante que ofrece diversas formas de detectar soporte para WebP.
Usar WebP en Wordpress
Si hacemos uso de Wordpress lo tendremos relativamente más fácil puesto que podemos instalar la extensión WebP Express para, automáticamente, convertir todas las imágenes a este formato y mostrarlas siempre que el navegador sea compatible.