Si bien es una “antigua novedad”, es probable que muchos de ustedes desconocen este formato. WebP es un formato gráfico que ofrece una imagen de mejor calidad que el JPG con menos peso.

Con sus jóvenes 8 años de antigüedad, al momento de escribir estas líneas, está empezando a ser cada vez más popular entre los que nos dedicamos a contenido en la red.

Veamos de qué se trata…

Google lo hizo de nuevo

Al gigante de Mountain View no le alcanza con tener el buscador más consultado, ni el navegador más utilizado, ni el sistema operativo para dispositivos (como celulares, tabletas o televisores inteligentes) más popular,… Quiere “copar” todo, según parece.

Si bien es una opinión, analizando números, es una realidad. Objetiva. Sin tintes.

Lo cierto es que Google, al comprar On2 Technologies en 2008, echó mano al proyecto VP8 que ésta estaba desarrollando (un códec de video) y comenzó a desarrollar el formato WebM; un formato de imagen multimedia (imagen en movimiento y audio) de alta compresión.

A diferencia de JPEG que fué la base para el M-JPEG, es decir, un formato de vídeo basado en el método JPEG; el formato WebP nace a partir de WebM.

Vale remarcar que tanto WebM y WebP son formatos de código abierto (open source), por lo cual cualquiera puede acceder a las entrañas de este desarrollo para colaborar con él, o al menos saber de qué se trata.

Haciendo cuentas

No voy a profundizar en las entrañas del proceso de compresión, los algoritmos, las fórmulas matemáticas que esconde este ingenio.

Pero sí voy a realizar algunas comparativas.

Tengamos en cuentas que, como en todo formato con “pérdida”, se busca que la imagen sea “liviana” (de poco tamaño el archivo que la contiene) sin que esa pérdida sea “visible”. En otras palabras: que ocupe poco espacio y no se sacrifique mucho la calidad de la imagen en sí misma.

No estoy hablando de un formato para gráfica impresa, sino para medios digitales; básicamente, poder mostrar imágenes de una calidad aceptable para pantallas. En particular, para la web (de allí su nombre).

NOTA: por una cuestión de compatibilidad con los navegadores y de peso de las imágenes, simularé los resultados de la conversión. Luego retomaré este tema.

Supongamos una imagen como el logo de GIMP, lo abrimos con esa misma aplicación (lo llevamos a un tamaño de 400px por lado en el diálogo de importación) y le ponemos un fondo blanco. La exportamos en formato TIFF (sin compresión), JPG (al 100% y submuetreo 4:4:4) y a WebP (al 100% también). El resultado que obtuve es:

Formato	Tamaño (en bites)	Diferencia
SVG	21852	Original
TIF	837148	3830%
JPG	20101	-8.01%
WebP	16438	-24.77%

Aclaro un poco estos guarismos:

• Que el SVG (un gráfico de vectores) pese mas que su versión JPG, es una casualidad;
• Recordemos que utilizamos la mejor calidad para exportar, por lo tanto los valores pueden ser más significativos si pensamos en optimizar la relación peso/calidad;
• Es impensable que utilicemos un TIF para la web; lo que no le quita mérito para usos de gráfica impresa u otros procesos.

Si ampliamos con GIMP, o cualquier otro editor de imágenes compatible con el formato WebP, observamos la notable diferencia entre los formatos, en particular la aparición de artifacts (o “artefactos de compresión”, la traducción no me agrada en absoluto) en el formato JPG, que se ve notablemente suavizado (casi imperceptible) en el formato WebP, como se observa a continuación:

Algo que hacer notar

Hay un dato que muchos observarán: no hago la comparativa con PNG o GIF (estático), que permite transparencias (canal alfa, alpha channel).

Pues, WebP permite el uso de transparencias lo cual también podría hacer sombra a ese formato.

Tampoco lo comparé con otros formatos de imagen en movimiento (GIF animado, MPEG, y otros) pues, considero que excede el tópico del artículo.

Compatibilidad

Navegadores

Según CanIUse un poco más del 72% de navegadores lo soporta a nivel global y un 85% de Argentina. Nada mal.

Según el Consorcio de la World Wide Web (W3C), un referente oficial, Chrome es el más popular de los navegadores que, “casualmente”, soporta este formato; seguido por Edge/IE, Firefox, Safari y Opera… De éstos, IE y Firefox son los que no lo soportan por completo.

Pero, hay solución para ello.

CMS (Sistemas de Administración de Contenidos)

Con WordPress a la cabeza de los CMS, seguido de lejos por Joomla y otros, podemos asegurar que el soporte de WebP está asegurado vía plugins dedicados a tal fin o bien adaptando el código debido a que muchos CMS son Open Source…

Como nota aparte, antes de continuar, ¿ven lo importante de que los programas que utilicemos sean de código abierto?.

Lo que hacen es, sencillamente, detectar si el navegador soporta el formato y, en caso negativo, ofrece la versión optimizada en formato JPG.

Beneficios y contras

Utilizar un formato que reduce el tamaño de una imagen y mantiene una calidad gráfica respetable, beneficia en la reducción del tráfico del sitio:

• Positivo:
  • menos ancho de banda utilizado (desde el servidor y desde el cliente),
  • mayor velocidad de carga (mejor SEO),
  • permite el uso de transparencia,
  • es posible utilizarlo para imágenes en movimiento,
• Neutro: segmentación (quienes usan navegadores compatibles o no),
• Negativo: duplicidad de información (misma imagen, dos formatos; ergo, incremento en almacenamiento).

Sin embargo, a pesar de la obligación de tener la misma imagen en dos formatos (JPG y WebP) para alcanzar al 100% de los navegadores, la mayoría de los cibernavegantes utiliza navegadores que aceptan este formato y la tendencia es que aumenten en el tiempo. Por lo tanto, el punto neutro y negativo anterior, se diluirán en el tiempo.

Conclusión

Este hallazgo, quizás casual, abre nuevas perspectivas a la producción de imágenes:

• reduce el tráfico en los sitios web,
• optimiza el uso de ancho de banda,
• optimiza (a futuro) el uso de espacio,
• desalienta el hurto de material gráfico,
• mejora la velocidad de descarga,
• mejora el SEO…
• ¿Algo se me escapa?

También me alienta a hacer una futura entrada sobre formatos gráficos según su uso final: gráfica impresa, web, redes sociales, etc… Incluso, pensando de manera lateral, una entrada referente a digitalización y los parámetros para realizarla de manera óptima…