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:
- Disminución en el tamaño del archivo.
- Reducción de la necesidad de almacenamiento.
- Versatilidad.
Pero, tiene como desventajas:
- La incompatibilidad con algunos navegadores.
- 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. 😉
Muy buen artículo. Muchas veces cuando se habla de mejorar la velocidad de una web se piensa primero en el hosting o en el código, pero la optimización de imágenes suele tener un impacto enorme en el tiempo de carga. Como mencionas, formatos de nueva generación como WebP ayudan justamente en ese punto, porque permiten mantener buena calidad visual con archivos mucho más ligeros.
Algo interesante del formato WebP es que fue desarrollado por Google precisamente para hacer las páginas más rápidas. Gracias a sus algoritmos de compresión, las imágenes pueden ser entre un 25 % y 34 % más pequeñas que los JPEG y alrededor de un 26 % más pequeñas que los PNG manteniendo una calidad similar. Esto significa menos peso que descargar para el usuario y, por lo tanto, mejores tiempos de carga y una experiencia más fluida en móviles o conexiones lentas.
Hace un tiempo me pasó algo parecido cuando preparaba un pequeño tutorial para mi blog. Tenía varias capturas de pantalla y al principio la página cargaba bastante lenta. Después de optimizar las imágenes y convertir algunas a formatos más ligeros, también probé mostrar algunos pasos como un pequeño GIF para explicar mejor el proceso. La primera versión del GIF era demasiado rápida, así que antes de publicarlo ajusté el ritmo de la animación (modifiqué la velocidad de los frames en gifspeed.com para que cada paso se viera con más claridad).
Un pequeño consejo adicional que me ha funcionado: además de usar WebP, reducir un poco las dimensiones de las imágenes antes de subirlas suele bajar mucho el peso total de la página sin afectar demasiado la calidad visual.
Gracias por compartir la guía. Este tipo de optimización parece un detalle pequeño, pero puede marcar una gran diferencia tanto en el rendimiento del sitio como en la experiencia del usuario.