¿Puedo usar WebP? Un formato hecho para la web

Los estudios del HTTP archive muestran que el peso promedio de una página web de escritorio se ha disparado de 523 kilobytes en 2011 a 2196 kilobytes en 2021. Un sitio web más pesado implica tiempos de carga más largos, y los usuarios suelen ser bastante impacientes.

La mayor parte de ese peso que ralentiza la carga proviene de las imágenes. Si vas a incluir todo ese contenido multimedia que hace que tu sitio sea atractivo —y pesado—, te interesará estar al tanto de las nuevas tecnologías que ayudan a optimizar el rendimiento, el tamaño y la velocidad de carga de tu sitio.

Aquí es donde las imágenes WebP resultan muy útiles.

WebP es un formato de imagen moderno y compacto que permite ofrecer imágenes de alta calidad con un tamaño de archivo menor que los formatos tradicionales como JPEG y PNG. Con imágenes más ligeras, tu sitio carga más rápido y mejora su posicionamiento SEO sin sacrificar la calidad visual.

¿Qué son las imágenes WebP?

WebP es un tipo de archivo de imagen creado por Google que ofrece compresión con y sin pérdida para la web. Lanzado en 2011, se ha convertido en un estándar tras su adopción generalizada en los navegadores en 2020. Los archivos WebP se identifican por la extensión .webp.

WebP es una tecnología de código abierto y cualquiera puede descargar y contribuir al código fuente. Google desarrolló este formato para reducir el tamaño de las imágenes comprimidas sin perder calidad, utilizando una codificación predictiva similar a la que se emplea en los fotogramas clave de vídeo.

Las investigaciones de Google demuestran que han logrado comprimir imágenes en archivos significativamente más pequeños. La compañía afirma que WebP tiene la ventaja de ser un 26% más pequeño que los archivos PNG y entre un 23 y un 24% más pequeño que los archivos JPG equivalentes. El tamaño de una imagen WebP puede alcanzar hasta 16383 × 16383 píxeles.

¿Dónde es compatible WebP?

Podemos decir que WebP ya es un estándar ampliamente adoptado. En 2022, WebP contaba con una cuota de mercado del 97% entre los navegadores web, incluyendo Google Chrome, Safari, Firefox, Edge y Opera. Los CMS como Webflow y herramientas gráficas como Photoshop también admiten imágenes WebP habitualmente.

Aunque muchas herramientas son compatibles con WebP, el JPG sigue siendo el formato de imagen más popular en la web. Según el HTTP Archive, WebP solo representaba alrededor del 7% de todas las imágenes en sitios web en 2021, aunque esa cifra sigue creciendo.

Características clave de los archivos de imagen WebP

No todos los formatos de imagen tienen las mismas capacidades. Una de las ventajas del formato WebP es que puede manejar más funciones (como transparencia y animación) que otros formatos, manteniendo un tamaño de archivo menor.

Compresión con y sin pérdida

WebP puede utilizarse tanto para compresión con pérdida como sin pérdida. Estos términos definen qué ocurre al descomprimir la imagen: la compresión con pérdida descarta datos al descomprimir, mientras que la compresión sin pérdida apenas pierde información. La ventaja de la compresión con pérdida es que genera archivos mucho más pequeños.

Transparencia

Las imágenes WebP admiten transparencia (es decir, un canal alfa). Otros formatos como PNG también lo hacen, pero los JPG no. Según las investigaciones de Google, la transparencia añade menos datos que en otros formatos.

La transparencia es especialmente útil al diseñar sitios web. Permite crear bordes irregulares en una forma y ver el fondo detrás de ella, como ocurre con el logotipo de Webflow más abajo. También permite crear profundidad y contraste al superponer elementos. Incluso puedes crear efectos visuales avanzados como el glassmorphism para que tu sitio luzca fresco y moderno.

Animación

Las imágenes WebP pueden animarse, al igual que el conocido GIF. Esta es una ventaja sobre los JPG, que no admiten animación. Además, los archivos WebP animados tienen un tamaño menor que los archivos GIF o APNG.

Metadatos

WebP permite añadir metadatos a las imágenes utilizando tanto XMP como EXIF. Los metadatos son útiles para proporcionar contexto digital a las imágenes; por ejemplo, la fecha y la ubicación adjuntas a una foto tomada con una cámara digital. Puedes añadir etiquetas y descripciones breves a las imágenes con metadatos que ayuden a los motores de búsqueda a identificarlas, lo que impulsará tu SEO.

Perfil de color

Puedes incrustar un perfil ICC para la gestión del color en un archivo WebP, el cual es administrado por el International Color Consortium. Un archivo ICC puede importarse a programas de edición de imágenes como Adobe Photoshop para ayudar a gestionar el color en un archivo entre distintos dispositivos o para su impresión.

Las ventajas de usar imágenes WebP al crear sitios web

WebP es una forma más eficiente de codificar imágenes. Hace que los archivos de imagen sean más pequeños, ocupen menos espacio de almacenamiento y aumenten la velocidad de tu sitio. Las imágenes más ligeras ayudan a tu diseño web de varias formas importantes.

Usar imágenes WebP puede hacer que tu sitio sea más rápido

Los datos son uno de los factores que más ralentizan un sitio web. PageSpeed Insights es una de las mejores herramientas para analizar el rendimiento de tu sitio web a un nivel detallado. Identifica el ajuste correcto del tamaño de las imágenes, la codificación eficiente de imágenes y el uso de formatos de imagen modernos como formas clave de mejorar la velocidad de tu sitio.

Un sitio más rápido mejora la experiencia del cliente, lo que conduce a una mejor tasa de rebote y conversión

Hay pocas cosas que ahuyenten más a los visitantes que las páginas de carga lenta, y un tiempo de carga más rápido puede marcar una diferencia enorme en tus tasas de rebote y conversión.

Estudio tras estudio se ha demostrado que los visitantes de un sitio web son reacios a esperar a que las páginas carguen. Con solo 10 segundos de tiempo de carga, la tasa de rebote aumenta un 123%.

Los clientes también están mucho más dispuestos a convertir cuando una página carga rápidamente. Un estudio de Portent mostró que reducir el tiempo de carga de la página de solo 5 segundos a 1 segundo aumentaba las tasas de conversión dos veces y media. Para el comercio electrónico, la velocidad es aún más importante, ya que la conversión cae un 0,3% por cada segundo adicional de tiempo de carga.

Los sitios de carga más rápida son mejores para el SEO

Un sitio web que carga más rápido también puede ayudar a tu optimización en motores de búsqueda (SEO). Desde 2021, la actualización del algoritmo de Google añade la experiencia de página, que incluye múltiples mediciones de velocidad de página, como factor de posicionamiento. El comportamiento del usuario en tu sitio web también afectará a tu posicionamiento, especialmente la tasa de rebote.

Los archivos más pequeños te ayudan a ahorrar espacio de almacenamiento

Cuanto mayor sea la compresión de tus archivos de imagen, menos espacio tendrás que pagar.

Solo tienes una cantidad limitada de espacio en disco en un servidor para tu sitio web y, dependiendo de tu alojamiento web, el almacenamiento puede resultar costoso. Además, no solo los archivos multimedia deben caber en tu almacenamiento. Es posible que tengas temas de tu CMS, JavaScript, CSS y bases de datos para mantener tu sitio en funcionamiento.

Dónde puedes crear y convertir imágenes WebP

Para usar imágenes WebP en tu sitio web, necesitas un CMS —como Webflow— que sea compatible con este formato. Luego, puedes crear imágenes nuevas en un software de diseño que permita guardar archivos como WebP o convertir las que ya tienes en tu computadora o dentro de tu CMS.

Crea imágenes WebP con software de diseño

Puedes crear archivos WebP de forma nativa con muchos programas de diseño, incluidos Photoshop, Google Photos, Blender y muchos otros. Google también ofrece un complemento gratuito que permite usar WebP en versiones anteriores de Photoshop.

Al guardar una imagen terminada en un programa de diseño compatible con WebP, verás esta opción en el menú desplegable cuando elijas "guardar para web".

Convierte imágenes a WebP con el software de Google

Si tienes algo de experiencia técnica, puedes descargar la herramienta de conversión precompilada cwebp de Google y usarla para convertir imágenes a WebP en tu computadora. También puedes instalar la API libwebp de Google para codificar y decodificar archivos WebP. Ambos sitios incluyen instrucciones detalladas para comprimir imágenes con estas herramientas.

Convierte imágenes existentes en tu CMS con Webflow

También puedes convertir las imágenes que ya están en tu CMS de Webflow a WebP usando el gestor de activos. La herramienta de conversión de imágenes WebP de Webflow convertirá y reemplazará las imágenes que ya estás usando por el formato WebP. Este video ofrece instrucciones paso a paso sobre cómo convertir imágenes a WebP en Webflow.

Qué más puedes hacer para optimizar tus sitios web

La optimización de imágenes es solo una forma de mejorar el rendimiento de tu sitio web. La carga diferida (lazy loading) de imágenes, la mejora en la carga de fuentes y la precarga de enlaces pueden acelerar el rendimiento de tu sitio.

Crea un sitio web adaptable que funcione bien en dispositivos móviles y otros equipos. Asegúrate de que tus imágenes tengan el tamaño adecuado para cargarse bien en móviles, especialmente porque los navegadores móviles suelen operar con conexiones más lentas. Elige un alojamiento web que no solo sea rápido, sino también confiable.

WebP es solo una de las herramientas que puedes añadir a tu experiencia en creación web. Al final, diseñar para la web consiste en crear una experiencia de usuario excelente. Puedes lograrlo optimizando tu sitio para que cargue tan rápido y sin esfuerzo que los usuarios ni siquiera tengan que pensarlo.