Qué son las imágenes WebP
Las imágenes de las Web son fundamentales para la percepción de quien la visita. Sin embargo, el uso de imágenes de gran calidad puede comprometer la velocidad de carga del sitio, algo negativo para su posicionamiento y también para el visitante. Por eso, es interesante tener en cuenta formatos que aligeren su peso, como WebP, del que hablamos con mayor detalle a continuación.
WebP es el formato de imágenes basado en el formato de vídeo VP8 que Google desarrolló en 2010. Está pensado especialmente para su uso en Web, ya que reduce el tamaño de las imágenes y, por consiguiente, el tiempo de carga, mejorando la velocidad y la experiencia de navegación.
Características de las imágenes WebP
El formato de imágenes WebP puede emplearse tanto para imágenes estáticas como animadas. Su principal ventaja es la compresión, con y sin pérdida, ideal para fotografías, imágenes y gráficos pequeños, consiguiendo de media una reducción del 30% respecto a PNG y JPEG. Para compresiones sin pérdida, supone una reducción del 26% de tamaño respecto a las PNG, mientras que en las compresiones con pérdida se consiguen imágenes entre un 25 y un 34% más pequeñas que en JPEG, con la misma calidad de origen. Admite WebP animados en color verdadero, similares a los GIF o APNG, en los que la mejora de la compresión sin pérdida supone el 19%, mientras que con pérdida alcanza el 64%.
Además, las imágenes WebP animadas cuentan con profundidad de color de 24 bits y admiten transparencia (canal alfa) de 8 Bits, frente a los 8 bits de GIF y su alfa de 1 bit. También se puede utilizar para comprimir RGP con pérdida, dando lugar a archivos hasta 3 veces más pequeños que los PNG. En cuanto al perfil de color, WebP permite contener perfiles ICC incrustados, los datos que describen el espacio de color.
Por otro lado, es posible incluir metadatos XMP y EXIF, como los creados por muchas de las cámaras de fotos actuales, en imágenes con y sin pérdida. Actualmente son compatibles con la gran mayoría de navegadores en sus versiones más recientes, como Chrome, Edge, Firefox, Opera, Safari para iOS, Android, UC, QQ, Baidu, Samsung y Safari para macOS11 Big Sur y posteriores. Internet Explorer es uno de los navegadores que todavía no es compatible con WebP, aunque es posible que pronto se actualice para serlo.
Métodos de compresión
La compresión con pérdida está basada en la codificación de fotogramas clave de VP8. Esta compresión predictiva divide cada trama en macrobloques, en los que el codificador utiliza los valores de los bloques vecinos para predecir el movimiento redundante y la información de color, codificando únicamente la diferencia. Por su parte, la compresión sin pérdidas utiliza diferentes técnicas para transformar los datos y parámetros de la imagen:
Transformación según predicciones espaciales
Habitualmente los pixeles vecinos están correlacionados. Esto es aprovechado por WebP para predecir el valor real de los otros píxeles partiendo de los que ya se han decodificado anteriormente, codificando únicamente el valor residual.
Transformación de color
Su finalidad es la descorrelación de los valores RGB de cada píxel, dividiendo la imagen en bloques y manteniendo el valor del verde, antes de que el rojo se transforme en base al verde y el azul en base al verde y posteriormente en base al rojo.
Sustracción del color verde
Esta transformación resta, en cada pixel, los valores verdes de los rojos y azules.
Transformación por indexación de colores
Cuando existen pocos valores de píxeles únicos, es posible crear una indexación, reemplazando cada pixel por su índice correspondiente.
Memoria caché de color
Este método reconstruye nuevos píxeles a partir de fragmentos de imagen ya vistos para compresiones sin pérdida. En caso de no encontrar resultados adecuados, utiliza los 32 últimos colores utilizados y almacenados en la memoria caché para seguir creando píxeles nuevos.
Comparativa WebP vs JPEG
A las imágenes en formato JPEG o JPG les ha salido un fiero competidor: WebP, que viene pisando cada vez más fuerte. Como hemos comentado anteriormente, el formato WebP no solo reduce considerablemente el tamaño de las imágenes, sino que además ofrece la posibilidad de hacerlo con o sin pérdida, pero manteniendo la calidad de la imagen.
Por otra parte, consigue que las imágenes ocupen mucho menos espacio en los servidores o discos duros que las JPEG. Además, ofrece la posibilidad de crear imágenes animadas y de aplicar la transparencia de imágenes, haciéndolo mucho más flexible que sus competidores. Por contra, las imágenes WebP también presentan algunos inconvenientes. Entre ellos, la limitación en la resolución máxima, que se queda en 16.383×16.383, muy alejada de los 65.535×65.535 píxeles de JPEG. No obstante, estas resoluciones son muy superiores a las habituales, por lo que es muy probable que para la mayoría de usuarios no suponga un problema.
Por último, las imágenes JPEG están más extendidas que las WebP, aunque éstas ya son compatibles con prácticamente todos los navegadores y, desde julio de este año, WordPress 5.8 incluye también soporte nativo para ellas.
Abrir y convertir archivos WebP
Para poder visualizar las imágenes WebP, lo más práctico es utilizar los diferentes navegadores que las soportan, con opciones tan universales como Chrome, Opera o Safari. Una vez abiertos, para guardar los archivos WebP, lo más fácil es indicar el formato preferido antes de guardarlo en el directorio deseado (JPEG, PNG, GIF…): botón derecho del ratón – Guardar imagen como.
Otras alternativas pasan por utilizar visores de imágenes gratuitos como IrfanView o sitios como ezgif, en los que convertir fácilmente imágenes y vídeos Web en otros formatos y viceversa. Adicionalmente, Google ofrece una serie de soluciones dentro de la zona de desarrolladores de WebP, que permiten codificar, decodificar, visualizar o convertir imágenes. Finalmente, y por el momento, cabe recordar que Photoshop no soporta directamente WebP, siendo necesario un plugin adicional.
El futuro de las imágenes WebP
Las previsiones para las imágenes WebP son halagüeñas gracias a las ventajas que presentan frente a otros formatos más extendidos, pero menos eficientes. Es posible que en un futuro no muy lejano se impongan por goleada, logrando una navegación más rápida y ligera.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.