¿Qué es WebP?

WebP es una tecnología de compresión de imágenes desarrollada por Google hace aproximadamente una década.
El archivo WebP se representa mediante el formato de archivo «.webp».
La compatibilidad con el formato de archivo WebP ha aumentado bastante en los últimos años gracias a los navegadores modernos, plataformas como WordPress y muchas otras herramientas y bibliotecas de software.
Y debido a su mayor compatibilidad y popularidad en los últimos años, el WebP se ha convertido en un estándar de facto para las imágenes web.
La razón principal para implementar esta tecnología fue reducir el tamaño del archivo de imagen tanto como fuera posible, manteniendo la calidad de la imagen.
El tamaño del archivo de imagen afecta en gran medida al rendimiento del sitio web y también a la clasificación SEO. Esto conduce a un aumento de la tasa de rebote y a una clasificación más baja en herramientas analíticas como PageSpeed Insights.
El WebP afecta especialmente a la métrica Largest Contentful Paint (LCP) del Core Web Vitals (CWV), que mide el tiempo que tarda en cargarse el mayor componente de contenido en la pantalla visible.
Los sitios web que no tienen imágenes optimizadas suelen tener problemas de rendimiento y ésta es la razón por la que se introdujo webp.
La conversión a WebP es una de las técnicas de optimización predeterminadas que se activan de fábrica para los clientes de 10Web Booster.
Funciona para cualquier sitio web WP, alojado en cualquier hosting.

¿Cuánto puede reducir WebP la carga útil de la imagen?

La tecnología WebP proporciona dos métodos de compresión, la compresión con pérdida y la compresión sin pérdida.
Ambos métodos de compresión funcionan de forma diferente. El método de compresión con pérdida WebP reduce la imagen un 25-34% respecto a las imágenes JPEG con un índice de calidad SSIM (Structural Similarity Index Measure) equivalente.
Y las imágenes WebP sin pérdidas tienen un tamaño un 26% menor que las PNG.
Estos métodos no sólo reducen el tamaño de la imagen, sino que también reducen la carga de los servidores web al tener un tamaño menor.

Compresión de imágenes para WebP

Un archivo WebP está formado por datos de imagen VP8 o VP8L, y un contenedor basado en RIFF.
Utiliza dos métodos de compresión, la compresión con pérdidas y la compresión sin pérdidas.
Veremos cada uno de estos métodos de compresión en detalle.

Compresión con pérdidas

La compresión con pérdidas reduce el tamaño de la imagen eliminando los metadatos de la propia imagen.
Utiliza la codificación predictiva para codificar una imagen.
La codificación predictiva es una técnica para predecir el valor de un bloque el algoritmo utiliza el valor de su bloque vecino.
Aquí, el VP8 divide una imagen en algo llamado macrobloques.
Para cada macrobloque, el codificador intenta restaurar la parte desconocida de la imagen comprendiendo las partes vecinas ya descodificadas de la imagen.
Esto se llama codificación predictiva.
La razón por la que WebP es mucho mejor que JPEG es la codificación predictiva.
Y para conseguir una compresión eficaz, sustrae los datos innecesarios del bloque.
El luma de 4×4, el luma de 16×16 y el croma de 8×8 son los tres tipos de macrobloques que se utilizan con los modos de intrapredicción VP8.
En el 90% de los casos, se recomienda la técnica de compresión con pérdidas.
Reduce en mayor medida el tamaño del archivo de la imagen, lo que da lugar a imágenes de buena calidad y a velocidades de página más altas.
Pero a veces también puede afectar a la calidad de la imagen, así que en ese caso, puedes utilizar otra técnica de compresión WebP llamada compresión sin pérdidas.

Compresión sin pérdidas

El método de compresión sin pérdidas utiliza diversas técnicas para transformar una imagen y reducir su tamaño.
Las diversas técnicas de transformación que intervienen en la compresión sin pérdidas son las siguientes.
Transformación predictiva (espacial) – Reduce la entropía de la imagen.
La entropía es una medida del contenido de información de la imagen, que se interpreta como la incertidumbre media de la fuente de información.

• Transformada de color (descorrelación) – Descorrelaciona los valores R, G y B de cada píxel.
• Sustraer Transformación Verde – Sustrae los valores verdes de los valores rojo y azul de cada píxel.
• Transformación de la indexación del color (paletas) – Identifica el número de valores ARGB únicos de la imagen.
• Codificación en caché de color – Utiliza fragmentos de imagen ya vistos para reconstruir nuevos píxeles.

Después de aplicar todas estas técnicas a la imagen, finalmente se realiza la codificación de entropía en la imagen transformada.
Al utilizar la compresión sin pérdidas, se mantiene la calidad de la imagen, pero el tamaño del archivo de imagen tampoco se reduce mucho en comparación con la compresión con pérdidas.

¿Cuáles son las ventajas de utilizar WebP?

• Tiempos de carga de página más rápidos – Como el tamaño de la imagen es menor, mejora la velocidad del sitio.
• Menos tráfico de red, por tanto menos costes.
• También admite la transparencia del fondo de la imagen y funciones de animación como GIF.
• Gradaciones de color más suaves Mejora en el algoritmo de compresión.
• Aumenta el posicionamiento SEO.

¿Cuáles son las desventajas de utilizar WebP?

• Calidad de la imagen – A veces puede afectar a la calidad de la imagen, pero la mayoría de las veces hace un gran trabajo.
• Compatibilidad con navegadores – WebP es compatible con los principales navegadores.
  Pero todavía hay algunos navegadores antiguos que no soportan WebP.
  Es posible que algunas personas sigan utilizando navegadores antiguos o heredados sin actualizar sus versiones, lo que podría afectarles.

¿Qué navegadores soportan el formato WebP?

Casi todos los navegadores principales y modernos admiten el formato de archivo WebP.
A continuación se incluye una lista de todos los navegadores que admiten WebP tanto en ordenadores de sobremesa como en dispositivos móviles.

• Google Chrome (V3+)
• Mozilla Firefox (V65+)
• Microsoft Edge (V104+)
• Opera (V11.5+)
• Safari (V14+)

Estas versiones son utilizadas por alrededor del 99%+ de los visitantes, por lo que utilizar WebP sin fallback sólo provoca la pérdida de un 1% de visitantes. Algunas versiones antiguas de algunos navegadores como Safari y navegadores heredados como IE no son compatibles con el formato WebP.
Siempre se recomienda utilizar la última versión de los navegadores para que puedas aprovechar las últimas mejoras y correcciones de errores.

¿Cómo convertir imágenes a WebP?

A continuación se indican las formas de convertir imágenes al formato WebP.

Convertir manualmente imágenes a WebP:

Para convertir manualmente una imagen en un formato de archivo WebP, puedes utilizar varios programas, herramientas y utilidades de edición fotográfica de terceros, como se menciona a continuación.

• Photoshop,
• cwebp (herramienta de conversión para Linux, Windows o macOS),
• paquetes npm,
• Traga,
• Webpack, etc

Lo único que debes tener en cuenta a la hora de convertir una imagen manualmente a WebP es sentirte cómodo utilizando cualquiera de estos programas, herramientas y utilidades.
Y lo bueno es que no tienes que aprender a utilizar este software desde cero sólo para convertir tus imágenes a WebP.
Siempre hay alternativas. Aparte de esto, también puedes utilizar plugins en WordPress para convertir automáticamente una imagen a WebP.

Cómo activar WebP en WordPress

Si ya tienes una imagen WebP y utilizas la versión 5.8 o superior de WordPress, puedes utilizar fácilmente WebP en tu sitio web WordPress.
Simplemente tienes que subir la imagen WebP a la biblioteca multimedia de WordPress y utilizar esa imagen en cualquier parte de tu sitio web directamente, como harías normalmente con otras imágenes.
Esto se debe a que WordPress 5.8 ha introducido soporte integrado para el formato de archivo WebP. Si utilizas versiones anteriores de WordPress, entonces puedes utilizar plugins de terceros para utilizar WebP en WordPress.

Conversión y optimización de WebP con 10Web Booster

El 10Web Booster es el plugin de optimización de velocidad para mejorar el rendimiento general de cualquier sitio web.
También permite convertir y optimizar una imagen a formato WebP.

1. Para convertir y optimizar cualquier imagen utilizando 10Web Booster, primero tienes que instalar este plugin a través del panel de administración de WordPress.
2. A continuación, tienes que conectar tu sitio web con el panel de control de 10Web.
3. Una vez que hayas conectado correctamente tu sitio web al panel de control de 10Web, se te redirigirá automáticamente al panel de control o puedes pulsar el botón «Gestionar» del plugin de WordPress de 10Web para ir al panel de control de 10Web.
4. Ahora para convertir y optimizar la imagen puedes seleccionar la pestaña «Optimizador de imágenes» y desde aquí podrás convertir y optimizar tu sitio web.