WEBP: qué es y cómo puede mejorar el rendimiento de tu sitio web

Intenta imaginar Internet sin imágenes, solo con palabras y textos por todas partes. Sería bastante cansador y poco ilustrativo, ¿no crees? La parte visual es sumamente importante en internet, especialmente en un sitio web.

Un diseño web sin imágenes no tendría la misma participación, ya que este tipo de contenido también es bastante expresivo. Después de todo, las imágenes le dan más vida a tu sitio web.

Teniendo esto en cuenta y creando un formato más ligero y optimizado que pueda mejorar velocidad de carga de páginas en Internet, se creó WebP. Hay varios formatos de imágenes disponibles en la web y los más conocidos son PNG, JPEG, GIF y otros.

Si tienes un sitio web, probablemente uses imágenes en estos formatos, ¿verdad? Sin embargo, es posible aplicar imágenes más claras que ayuden a optimizar tus páginas, que es exactamente el formato WebP.

Después de todo, ¿qué es exactamente WebP?#

En 2010, precisamente el 30 de septiembre, Google lo anunció. En esa fecha, el buscador más grande del mundo lanzó un nuevo estándar de código abierto que permite la compresión de imágenes de 24 bits en la web.

Después de eso, el formato también se complementa con otras características, incluida la compresión sin pérdidas, animaciones y transparencia (canal alfa). Chrome, el navegador de Google y Opera ya admiten el formato de compresión desde finales de 2010. Con el tiempo, otros navegadores empezaron a admitir también el formato, aunque sólo de forma experimental.

La popularización de internet en el país fue un proceso lento, en el que las conexiones se realizaban mediante módems de 14K. Por lo tanto, era muy difícil abrir páginas que contenían muchas imágenes debido a la lentitud de carga.

Décadas después, muchos servidores todavía notan cómo el contenido compuesto por muchas imágenes todavía exige mucho y ralentiza un poco la red.

La solución sería utilizar imágenes más claras que les permitieran cargar más rápido, pero, por supuesto, sin perder calidad. JPEG, el formato más utilizado actualmente, era una buena alternativa para reducir el tamaño de los archivos. Por otro lado, también se perdió calidad.

Así, Google se dio cuenta de que los retrasos y los fallos estaban relacionados con la carga de imágenes. Entonces, la solución fue lanzar su propia solución: el formato WebP.

¿Cómo funciona WebP?#

De forma muy simplificada, WebP utiliza codificación predictiva y codifica una imagen mediante compresión. Al codificar la imagen, se utilizan bloques vecinos para predecir los valores de otro bloque y así crear nuevos píxeles. El resultado es una reconstrucción de la imagen con mejor calidad, pero el tamaño es menor.

¿Qué técnicas se utilizan para realizar una compresión sin pérdidas utilizando WebP?

La primera de la compresión sin pérdidas es transformar la imagen. En este sentido, existen diferentes técnicas que se pueden aplicar dentro de la estructura, entre ellas:

• Transformación de color: descorrela los valores RGB de píxeles individuales y divide la imagen en bloques, haciendo que el rojo se convierta en la base del verde y el azul en la base del rojo y el verde, donde se mantiene el valor del verde;
• Transformación basada en indexación de color: si tienes pocos valores de píxeles definidos, es posible transformar el formato WebP en base a indexación de color;
• Transformación por resta de verde: se utiliza una variante en la que se pueden restar los valores de rojo y azul para cada píxel;
• Transformación basada en predicciones espaciales: el formato WebP puede utilizar 13 modos de predicción que utilizan píxeles vecinos para formar la imagen, en los que se predicen los valores actuales de cada píxel;
• Codificación de un caché de color: los fragmentos de imágenes que se vieron y almacenaron previamente en el caché se utilizan para reconstruir nuevos píxeles.

¿Cuáles son las ventajas de utilizar este formato de imagen?#

Google dice que su creación es hasta un 30% más pequeña en comparación con otros tipos de archivos, como JPEG y PNG, pero la ventaja es que no hay pérdida de calidad de imagen.

Por lo tanto, mira otras ventajas de utilizar el formato WebP en tu sitio web.

• Flexibilidad: es posible adaptar el formato para imágenes pequeñas, gráficos y fotografías.
• Compresión con pérdida: se basa en la compresión codificada por fotogramas clave VP8
• Compresión sin pérdidas: son técnicas que cambian los parámetros y datos de la imagen para mantener la calidad.
• Transparencia: el formato WebP también tiene un canal alfa de 8 bits que realiza compresión RGB con pérdida
• Perfil de color: las imágenes WebP pueden tener perfiles ICC integrados, que consisten en un conjunto de datos capaces de describir el espacio de color para formar la imagen.
• Animaciones: graba secuencias de imágenes, como GIF.
• Metadatos: este tipo de imagen puede tener metadatos XMP y EXIF, que las cámaras suelen utilizar para generar

¿Cómo convertir imágenes a WebP para tu sitio web?#

Este formato de imagen se puede utilizar en diferentes sitios web, incluidos WordPress. Aunque WebP no es "directamente" compatible con CMS más conocido en el mundo, la solución es utilizar un complemento, como WebP Express.

Además de esta posibilidad, también es posible descargar directamente imágenes en este formato, siempre que seas usuario de Google Chrome y lo tengas como navegador predeterminado.

Otra alternativa es simplemente arrastrar una imagen sobre una ventana de Chrome para abrirla. Los navegadores basados ​​en Chromium también pueden admitir el formato, aunque algunas versiones anteriores ya no lo admiten. Además de estas opciones, puedes transformar el archivo en PhotoShop.

El formato WebP es especial porque puedes obtener imágenes de menor tamaño, pero sin perder calidad. Esta idea de Google fue increíble para mejorar la experiencia de los usuarios mientras navegan por Internet. Entonces, ¿qué tal si empiezas a adoptarlo en tu sitio web?

Descubra 03 complementos para convertir imágenes a WebP#

A partir de ahora descubrirás 03 opciones de complementos que te ayudarán a dejar tus imágenes en formato WebP.

EWWW Image Optimizer#

Este complemento está disponible para descargar desde el repositorio oficial de WordPress. Actualmente cuenta con más de 800 mil instalaciones activas y es considerado uno de los mejores complementos de compresión de imágenes para WordPress.

También admite imágenes WebP y es capaz de mostrarlas automáticamente a los usuarios que utilizan navegadores compatibles.

Si no desea optimizar imágenes para el nuevo formato, puede utilizar este complemento gratuito para comprimir imágenes en otros formatos y también cambiar su tamaño.

El complemento también tiene una versión premium con más funciones destinadas a la optimización de imágenes.

optimole#

Optimole es otra opción de complemento gratuito para aquellos que desean transformar las imágenes utilizadas al formato WebP. Actualmente cuenta con más de 80 mil instalaciones activas.

Este complemento es capaz de optimizar tus imágenes en tiempo real, sin reducir la calidad de las imágenes. Optimole también tiene una función para reducir la calidad de las imágenes utilizadas, cuando se detecta que la conexión del usuario es lenta. Y si sueles utilizar muchas imágenes y quieres incluir una marca de agua, este complemento también puede ayudarte con esta tarea.

Finalmente, si utiliza creadores de páginas en WordPress, este complemento es compatible con los creadores de páginas y también con el editor Gutenberg.

webp express#

El último complemento de esta publicación es Webp Express. Es gratuito y está disponible para descargar desde el repositorio oficial de WordPress. Con él, puedes convertir tus imágenes a WebP para navegadores compatibles.

El complemento también mantiene archivadas las imágenes originales, por lo que en navegadores que no son compatibles, el complemento mostrará imágenes en formatos como PNG y JPEG.

¿Has entendido la función de WebP?#

A lo largo de esta publicación, podrás comprender mejor cuál es el nuevo formato de imagen disponible en la web y cómo este formato puede ayudarte a tener un sitio web con mayor rendimiento.