Si aún siguen batallando con los formatos tradicionales (.jpeg, gif, png) para web, ahora tenemos un nuevo jugador en la cancha, llamado “WebP”. Este nuevo integrante del arsenal de imágenes para la web, tiene un gran respaldo ya que el principal promotor de este formato es nada más y nada menos que Google, a raíz de su adquisición de On2 Technologies como un derivado de VP8. Y aunque por el momento el soporte nativo únicamente es Google Chrome y Opera, Google afirma que tiene soporte en muchas herramientas y bibliotecas de software.
Calidad vs velocidad de carga
Pero, ¿realmente que ventajas ofrece este nuevo formato? Recuerden que una forma de clasificar los formatos de imagen es en: lossless ( sin pérdida) y lossy (con pérdida), de ahí el uso de PNG’s y JPEG’s o GIF’s, respectivamente. Esto siempre ha sido la decisión incómoda de diseñadores y desarrolladores web: Calidad vs velocidad de carga. Donde se sacrifica generalmente la calidad de la imagen para tener una carga más rápida o uno se resigna al ancho de banda y una carga lenta para tener una mejor calidad de imagen. Pues este chiquitín toma lo mejor de los dos bandos y nos da la opción de que sea lossless o lossy.
Las imágenes lossless WebP, son 26% más pequeñas comparadas con un PNG. Las imágenes WebP lossy, son entre 25 y 34% más pequeñas en comparación con imágenes JPEG con un índice equivalente SSIM. WebP admite transparencia a través de un canal alfa, con tan sólo un 22% de bytes adicionales. La compresión lossy también admite transparencia y generalmente ofrece archivos 3 veces más pequeños comparados con PNG’s con compresión lossy para canales rojo, verde y azul.
Como funciona
La compresión Lossy WebP, usa código predictivo para codificar una imagen, que es la misma metodología que usa el codec VP8 para keyframes de video. El código predictivo usa valores de bloques vecinos de pixeles para predecir los valores en un bloque, después codifica sólo la diferencia residual entre los valores actuales de la predicción.
Los residuales típicamente contienen valores cero, los cuales se comprimen mejor. WebP, incluso utiliza bloques de tamaños variables.
La compresión Lossless WebP, utiliza fragmentos previamente analizados para reconstruir nuevos pixeles. Puede utilizar una paleta local si se encuentra una equivalente. Esta paleta se actualiza continuamente para reutilizar colores recientes. Este modo de compresión se llama “VP8L” y comparte algunas características con el algoritmo de compresión LZ77.
Una archivo WebP consiste en información de imagen VP8 o VP8L y un contenedor basado en RIFF. La biblioteca standalone libwebp funciona como referencia de implementación para la especificación WebP, y esta disponible en el git respository y como tarball.
¿Cómo lo implemento?
Ahora vienen las maromas para poder usar este formato. Si son del grupo selecto de desarrolladores que tiran líneas de código en Xcode y están acostumbrados a usar la terminal de su ordenador, al tener Xcode instalado lo único que necesitan es descargar Mac Ports, que es un sistema para compilar, instalar y gestionar software open source. Después deben descargar las utilidades precompiladas cwebp para convertir formatos JPEG, PNG y TIFF a WepP, y dwepp si quieren convertir de WebP a PNG.
Aquí todos requisitos y pasos necesarios 😉
Si son desarrolladores más apegados a la parte gráfica que al código. Pueden descargar la aplicación XnConvert, que es una aplicación multiplataforma que permite automatizar varias tareas relacionadas con imágenes, entre ellas convertir de un formato a otro, entre ellos a WebP.
Aquí una guía rápida:
- Descarga XnConvert aquí.
- Agrega la imagen o imágenes.
- En la etiqueta Output, selecciona un folder en tu ordenador y WepP en formato.
- En las opciones del formato, es donde puedes decidir si quieres que tu imagen tenga pérdida o no. Al igual que JPEG, el cuadro de diálogo tiene un slider para determinar la calidad de la imagen.
- Convierte y compara resultados.
Conslusiones
Independientemente de que este formato se haga un estándar recomendado por la W3C, recuerden que al final, es el número de desarrolladores que implementan una recomendación, lo que hace de un nuevo formato un éxito o que se pierda en la gran lista de recomendaciones de la W3C. Aunque en este caso Google, apostará fuerte por WebP y tal vez estemos usándolo antes de lo esperado como parte de nuestro flujo de trabajo para el desarrollo de sitios y aplicaciones web. Por cierto les recomendamos para aprender a desarrollar las mejores aplicaciones web nuestro Diplomado Web Developer próximo a empezar el 14 de mayo.