WebP: una alternativa a JPG y PNG

Los formatos JPEG y PNG son muy populares para el diseño de páginas web, pero fueron creados para una web muy diferente a la que usamos hoy. Nuevos formatos de imágenes como WebP ofrecen mejor calidad con archivos más pequeños para sitios web que cargan más rápido.

El formato JPEG fue creado en 1992, y actualizado a la versión que conocemos hoy en 1994. El formato PNG, que agrega un canal de transparencia, fue creado en 1996 y liberado en 1997. Ambos formatos fueron creados para hacer más sencilla la publicación de imágenes con calidad fotográfica en la web, cuando la gente aún se conectaba utilizando un modem y una línea telefónica.

Tanto JPG como PNG ofrecían una relación calidad-tamaño mucho mejor que otros formatos de esa misma época, como BMP o TIF, y esto ayudó mucho a su rápida adopción. Sin embargo, 25 años después el uso de la web ha cambiado, y los usuarios ahora tienen pantallas de super alta resolución (desde Retina Display hasta 4K) en sus PCs, smartphones y smartTVs, aunque el ancho de banda no ha crecido en la misma proporción ni al mismo ritmo.

Sabemos que el tiempo de carga de un sitio afecta su experiencia de usuario y reduce la tasa de conversiones en él. Al mismo tiempo, sitios con imágenes de mala calidad o de baja resolución también son percibidos de manera negativa por sus usuarios. ¿Cómo crear sitios con imágenes de buena calidad sin aumentar el tiempo de carga?

WebP, un nuevo formato para imágenes digitales

En el año 2010, la empresa On2 Technologies estaba trabajando en un nuevo codec de video llamado WebM (Web Multimedia) como una opción más abierta para la distribución de video en la web, en contraste con otros codecs de video que tienen restricciones legales por uso de patentes para migrarlas a múltiples plataformas.

Uno de los trabajos derivados del grupo de trabajo de WebM fue WebP, anunciado por primera vez el 30 de septiembre de 2010 como un nuevo estándar abierto para gráficos de color (true color) con compresión para la web, capaz de producir archivos más pequeños con una calidad de imagen similar al esquema JPEG.

En 2010 Google adquirió a On2 Technologies y a finales de 2011 anunció el soporte de WebP para imágenes animadas (como hace el formato GIF), transparencia (canal alfa), perfil ICC, soporta para metadatos en estándar XMP y soporte para creación de imágenes de mosaico (teselado) de hasta 16384×16384 unidades.

Características y ventajas de WebP

De acuerdo a Google, las imágenes WebP lossless son 26% más pequeñas en tamaños comparadas con su equivalente en PNGs. Las imágenes WebP lossy son entre 25 y 34% más pequeñas que imágenes JPEG con la misma calidad.

Las imágenes WebP lossless tienen soporte para transparencia (también conocido como canal alfa) al costo de solo 22% bytes adicionales. Para los casos en que la compresión RGB es aceptable, las imágenes WebP lossy también soportan transparencia, proveyendo archivos hasta tres veces más pequeños comparados con imágenes PNG de la misma calidad.

Soporte de WebP

A pesar de que WebP ya tiene casi 10 años de publicado, no había sido una alternativa viable para sustituir archivos JPG o PNG debido a la falta de soporte en los navegadores web, aunque eso está cambiando rápidamente.

WebP es soportado actualmente por Google Chrome para desktop y mobile, Firefox, Opera y Edge; solo Internet Explorer y Safari no ofrecen soporte nativo para WebP todavía.

Una opción para dar soporte a navegadores que no soportan WebP nativamente, es utilizar la etiqueta HTML picture, con un respaldo de la imagen en JPG o PNG:

<picture>
   <source srcset="img/tesseractspace.webp" type="image/webp">
   <source srcset="img/tesseractspace-old.jpg" type="image/jpeg">
   <img src="img/tesseractspace-old.jpg" alt="Texto Alt de la imagen"> 
</picture> 

Los navegadores más antiguos que no soporten la etiqueta picture usarán la referencia de la etiqueta img.

Muchas aplicaciones de diseño gráfico ya soportan el formato WebP tanto para edición como para exportación. Sketch tiene soporte nativo para Web; en Adobe Photoshop aún es necesario instalar un plug-in para esta funcionalidad.

Herramientas para conversión a WebP

WebP es un formato para imágenes digitales de código abierto, lo que facilita la creación de herramientas para crear imágenes en este formato.

La principal herramienta para conversión de imágenes JPG o PNG a WebP o viceversa es la herramienta de línea de comando cwebp, disponible sin costo para Windows, Mac o Linux precompiladas, usando Git o un gestor de paquetes como Chocolatey (Windows) o HomeBrew (Mac)

Por ejemplo, para convertir todas las imágenes en una carpeta a WebP, se hace con este comando:

• Para Windows:

 > for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )

• Para Mac / Linux:

$ for F in *.jpg; do cwebp $F -o basename ${F%.jpg}.webp; done

También es posible hacer conversión de imágenes por lotes usando node.js, instalando antes los módulos imagemin y imagemin-webp:

npm install imagemin imagemin-webp

El script en node.js sería algo así:

const imagemin = require("imagemin");
 const webp = require("imagemin-webp");
 imagemin(["originales/*.png"], "imagenes", {
   use: [
     webp({
       quality: 75
     })
   ]
 }).then(function() {
   console.log("Todas la imágenes fueron convertidas");
 });

Para Safari en Mac o en iOS, o para los usuarios de Internet Explorer, se pueden utilizar servicios en la Nube como Cloudinary, que ofrece conversión de imágenes con un API REST que automáticamente ofrece una imagen en formato WebP si el navegador del usuario la soporta, o la cambia a JPG/PNG si el navegador no la soporta, conservando la extensión de los archivos.

• URI para WebP en Cloudinary:

https://res.cloudinary.com/drp9iwjqz/image/upload/f_auto,q_auto/v1508291830/jeremywagner.me/using-webp-images/tacos-2x.jpg

Referencias

Además de la documentación oficial en el sitio de WebP, el libro «The WebP Manual» de Jeremy Wagner ofrece muchas técnicas para crear, convertir e implementar el formato WebP en sitios web y apps móviles.