Descubre qué es el formato WebP y cómo te ayudará a mejorar la velocidad de carga de tu web.

Tal vez has probado alguna herramienta como Lighthouse de Google, cuyos indicadores te han expresado la necesidad de que mejores los tiempos de carga de tu página web. La optimización de las imágenes juega un papel importante en este aspecto.

Algunos formatos pueden ralentizar el desempeño general de un sitio debido a su peso. Hoy en día existen alternativas que resultan más eficientes y es necesario tener en cuenta a la hora de desarrollar o estructurar un sitio web.

Estos son conocidos como Formatos de Próxima Generación, entre los cuales se encuentran los del tipo JPEG 2000, JPEG XR y WebP. A continuación descubrirás lo qué es y cómo usar WebP para que mejores la velocidad de carga de tu sitio web.

¿Qué es WebP?

Se trata de un formato para imágenes creado por el propio Google, que comprime las imágenes con un 30% menos de su peso en JPG, PNG y GIF. Es de código abierto y se basó inicialmente en un estándar para videos llamado VP8 que dicha empresa adquirió en 2010.

Con ello hizo posible la compresión de imágenes con pérdida. Luego, se encargó de trabajar con diversas técnicas adicionales que dieron paso a la comprensión sin pérdidas, los metadatos, uso de transparencias, perfil de colores y animaciones.

El tamaño máximo en píxeles de una imagen WebP es de 16383 x 16383.

Ventajas y Desventajas del Formato WebP

Este formato proporciona importantes ventajas en su uso, tales como:

1.- Disminución en el tamaño del archivo

El formato ofrece un alcance de compresión cercano al 30%, por lo que al considerar la transformación de la mayor cantidad de imágenes posibles, aumentará la velocidad de carga del sitio web, así como las oportunidades de tener un mejor posicionamiento en buscadores.

2.- Reducción de la necesidad de almacenamiento

Al disminuir el volumen de los archivos, la web requerirá menor espacio de  almacenamiento en tu hosting, que puede ser utilizado para datos o cualquier otro recurso.

3.- Es un formato muy versátil

WebP ha sido creado aglutinando las cualidades de los formatos PNG, JPG y GIF en uno solo. Por lo cual, si tienes la necesidad de emplear transparencias, animaciones o compresión podrás utilizarlo de manera indistinta.

Ahora bien, el uso de este formato también puede implicar algunas desventajas como las siguientes:

1.- Compatibilidad 

Aunque los avances han sido muchos, el formato WebP no es compatible con algunos navegadores. Sin embargo, la verdad es que los más usados como Chrome, Edge, Firefox y Opera ofrecen soporte para todas sus bondades.

2.- La calidad de la imagen

Aunque no es tan notorio a simple vista, en sitios de fotografía o diseño gráfico se pueden apreciar algunas diferencias.

¿Cómo Transformar una Imagen a WebP?

Para convertir una imagen a WebP existen múltiples opciones. Algunas de ellas son:

1.- Gimp

Gimp, el popular software de edición de imágenes y diseño gráfico, permite guardar una imagen en formato WebP. Para ello, solo necesitas abrir la imagen que deseas transformar con este software, y luego exportarla a este formato.

2.- Convertio.io

Convertio.io es una opción en línea que ofrece la posibilidad de realizar conversiones limitadas diarias y gratuitas.

3.- Ezgif.com

ezgif.com es otra alternativa gratuita con la que puedes convertir tus imágenes a este fabuloso formato.

¿Cómo usar WebP en tu sitio?

Debido a que aún existen algunas incompatibilidades con este formato en navegadores, se recomienda emplear dos alternativas de carga en imágenes.  Esto es posible a través del contenedor Picture de HTML.

 <picture>

<source srcset=”/images/imagen1.webp” type=”image/webp”>

<img src=”/images/imagen2.jpg” alt=”Logo”>

</picture>

De esta manera si el navegador no soporta el formato WebP, entonces mostrará la alternativa JPG que se indica en la etiqueta IMG.

También, puedes emplear la librería de JavaScript  Modernizr. Con ella podrás detectar la compatibilidad de los navegadores a través de sus propiedades Modernizr.webp , Modernizr.webp.lossless , Modernizr.webp.alpha y Modernizr.webp.animation .

Dentro de WordPress existen otras alternativas que trabajan de manera eficiente para convertir las imágenes a este formato. Se trata del complemento WebP Convert  gratuito que emplea diferentes métodos para transformar las imágenes.

Conclusión

Para mejorar el posicionamiento orgánico en buscadores y la experiencia del usuario en general, es necesario optimizar el rendimiento de la web. Uno de los factores más relevantes para alcanzar este objetivo es el de trabajar las imágenes.

El formato WebP es una alternativa creada por Google que disminuye el peso de las imágenes en un 30% con respecto a los formatos tradicionales como lo son JPG, PNG y GIF.

Ofrece como ventaja:

1. Disminución en el tamaño del archivo.
2. Reducción de la necesidad de almacenamiento.
3. Versatilidad.

Pero, tiene como desventajas:

1. La incompatibilidad con algunos navegadores.
2. Calidad de la imagen.

Algunas alternativas para transformar tus imágenes a este formato son a través del programa gratuito Gimp o por medio de los servicios en línea Convertio.io y Ezgif.com .

Puedes basarte en el contenedor Picture de HTML para establecer alternativas de carga orientados a los navegadores que no soporten este formato. También, las librerías Modernizr, así como el plugin de WordPress WebP Express.

Gracias por tu tiempo.