Cómo funcionan los formatos de imagen y en qué los mejora WebP

Todavía nos quedan algunas cosas en el tintero del Google I/O. Una de ellas es el "nuevo" códec de imagen para la Web: WebP (Web - Picture, no se han roto la cabeza con el nombre). Digo "nuevo" porque ya existía de bastante antes, pero no está de más darle un repaso.

Lo primero es entender por qué Google está llevando a cabo este esfuerzo. Tenemos tres códecs o formatos mayoritarios: JPEG, PNG y GIF, que datan del 1991, 1996 y 1987 respectivamente. Han cambiado muchas cosas desde entonces, pero aun así estos códecs siguen sirviendo... más o menos.

JPEG es el más usado no sólo en Internet sino también fuera de él. La mayor ventaja que tiene es su capacidad de compresión, que puede llegar a valores tan altos como 100:1 (una imagen de 100KB almacenada en un archivo de 1KB). Pero claro, esa compresión tan potente tiene sus desventajas: pérdida de calidad. Veremos más adelante por qué ocurre esto, pero estoy seguro que a todos nos suenan los _artefactos_, la distorsión de los JPG.

Después tenemos al formato GIF. Realmente el formato es bastante malo: aunque la compresión no tiene pérdidas, tenemos un problema, y es que sólo podemos representar 256 colores. Para que os hagáis una idea, una pantalla normal representa millones de colores. El resultado es que GIF no es un formato de buena calidad, y de hecho sólo se usa para logos simples y para animaciones (es el único que las permite).

Por último, está PNG. Es un formato sin pérdida y que admite transparencia. El problema es que no alcanza una compresión tan alta como JPEG, así que sólo se usa con imágenes pequeñas y con pocos colores.

Al final, tenemos tres formatos distintos, y cada uno destaca en un campo en el que los demás no tienen nada que hacer: JPEG para archivos pequeños, PNG para alta calidad y transparencia, y GIF para animaciones.

WebP pretende unificar todas esas ventajas en un único archivo. Tiene compresión con pérdidas para reducir el tamaño de archivo, sin pérdidas para mantener la calidad (y aun así resultan archivos más pequeños que en PNG), soporta transparencia y animaciones. El formato definitivo, vamos. ¿Cómo lo logran en Google?

¿Cómo funcionan los códecs de imagen?

Para entender un poco el porqué de la necesidad de WebP, tenemos que ver cómo funcionan los códecs de imagen. Aviso que haré varias simplificaciones para que se entienda mejor.

Antes de nada, recordemos que una imagen no es más que una serie de puntos o píxeles, donde cada posición tiene las cantidades de color rojo, verde y azul que componen el color del píxel.

La compresión de imágenes con pérdida de calidad se basa en dos principios (los más importantes, hay muchos más). El principal es que el ojo humano no es capaz de distinguir muchos cambios ligeros de color. Y el segundo, que es más corto guardar una serie de puntos como una función. Por ejemplo, ¿qué es más corto de guardar, cincuenta puntos de una recta o su función (y = ax + b por si alguno no se acuerda)?

No podemos detectar los pequeños cambios de color, así que, ¿para qué guardarlos?

Parece que lo que he dicho no tiene relación, pero en realidad sí. Decíamos que una imagen no es más que una serie de puntos, así que podemos representar esos puntos en una gráfica, y después construir una función que se aproxime a esos puntos.

Esa función nos sale con muchos picos muy pequeños. Espera, ¿no habíamos dicho que esos cambios tan pequeños no los detecta el ojo? Pues lo tenemos fácil: deshagámonos de esos picos. "Aplanemos" la función. Así será más corta, y la guardaremos más fácilmente. Podéis ver un esquema de lo que ocurre en la siguiente imagen.

En JPEG, esto (más o menos) es lo que se llama el proceso de _cuantización_. La cuestión es, ¿qué pasa si nos pasamos al "aplanar" la función? Que perdemos detalle. Los colores se quedan, literalmente, más planos: perdemos contraste. Cada píxel se parece mucho más al resto, y por eso aparecen los artefactos. Exagerando mucho, esto es lo pasa en una imagen real si nos pasamos de compresión:

Este método es bastante eficiente en cuanto al ratio de compresión de la imagen. Lo malo es lo que comentábamos: es irreversible. Perdemos calidad y no la podemos recuperar.

Por suerte, hay otros algoritmos para reducir el tamaño de imagen sin perder la calidad, que se basan en cambiar la forma de expresar la imagen para que se pueda comprimir mejor.

¿Cómo se comprime mejor una imagen (o cualquier archivo)? Ahorrándonos los datos repetidos. Por ejemplo, en lugar de guardar 20 ceros seguidos, simplemente guardamos dos números: 20 (el número de repeticiones) y 0 (el elemento que se repite). El objetivo de los algoritmos con compresión es encontrar otras formas de expresar la imagen de tal forma que haya el mayor número de datos repetidos posible (el nombre técnico es reducir la entropía de información del archivo).

La técnica principal que usan los códecs PNG y GIF para esto es la siguiente. Cogemos un píxel. Sacamos una predicción de cómo será este píxel en función de los de su alrededor. Por ejemplo, si un píxel está rodeado de píxeles rojos, será rojo también; o si está entre uno rojo y otro amarillo, probablemente será naranja.

El truco está en guardar no el valor del píxel, ni la predicción, sino cuánto se desvía la predicción del píxel real. Como en general no hay muchos cambios bruscos en una imagen, habrá muchas diferencias que sean 0 o pequeñas, así que tendremos bastantes datos repetidos. Además, este proceso es reversible, así que no perdemos calidad.

Como hay varios métodos para predecir el valor de un píxel, el codificador escoge el que mejor predice para cada "bloque" de la imagen (esto es, el que saca las predicciones más exactas y el que deja números más pequeños).

¿En qué mejora WebP lo ya existente?

Y después de esta "introducción", podemos ver qué hace WebP para ser mejor que sus antecesores. Recordemos que reduce en un 25% aproximadamente el peso de los archivos con respecto a PNG y JPEG manteniendo la calidad (esto también depende del codificador que se use).

Frente a PNG, WebP lo mejora por tener un mayor abanico de filtros sin pérdida. El filtro de predicción tiene más modos (cada modo valora de forma distinta los píxeles adyacentes al que queremos calcular su valor teórico), lo que permite un mejor ajuste y por lo tanto se pueden comprimir mejor los datos. Además, hay otros dos filtros adicionales: transformación de color e indexación de colores.

Estos filtros se pueden aplicar al mismo tiempo sobre una imagen, de forma que el formato WebP ofrece una compresión máxima mayor usando técnicas que PNG no permite.

Por otro lado, frente a JPEG, WebP destaca por la posibilidad de añadir los filtros sin pérdida que acabo de comentar. Es cierto que JPEG tiene métodos de compresión sin pérdida, pero no son tan efectivos como los de WebP (y son menos usados).

Otra ventaja de WebP es que incluye métodos de compresión mejorados. Al igual que PNG, usa DEFLATE, pero además añade una caché de los colores más usados. En este sentido es el más avanzado de los cuatro formatos.

¿Y todo eso, para qué?

Bien, una vez que hemos visto la teoría, veamos la práctica. Exploremos las imágenes que Google tiene de muestra para comparar qué ofrece, a nivel de calidad, WebP.

Frente a PNG (galería completa), el cambio es impresionante. La calidad de WebP es del 90%, y la imagen en PNG es unas 4-5 veces más grande que la de WebP. Las diferencias en calidad apenas se notan (yo ya me he dejado los ojos y no he visto prácticamente nada).

Con JPEG (galería completa), las cosas están un poco más dispares. De lejos no hay mucha diferencia, pero si pasamos a ampliar vemos que, mientras que en WebP se notan más los bloques de imagen, en JPEG los artefactos en los bordes son mucho más destacados.

Por ejemplo, en imágenes del cielo, si nos fijamos, WebP se queda un poco atrás al darle un patrón más cuadriculado. Sin embargo, la ausencia de artefactos en los bordes de los objetos le da muchos puntos.

Hay que tener en cuenta que al redimensionar las imágenes se pueden haber introducido nuevas distorsiones (o correciones), así que lo más recomendable para apreciar totalmente las diferencias es ir a las galerías que enlazo con Opera o Chrome y ampliar las imágenes.

Conclusiones

Teniendo en cuenta que WebP está orientado a la web más que nada, que las pérdidas en calidad no son demasiado grandes y que la reducción de tamaño es considerable, parece que es la mejor alternativa. Más aún cuando es la que más características tiene de los tres formatos (transparencia, imagen con y sin pérdidas, animaciones).

El problema es el de siempre: la compatibilidad. Hasta que todos los navegadores lo soporten nativamente WebP no es una alternativa razonable al resto de formatos. Y aún en ese momento su adopción será lenta: el resto de programas de imagen (desde Paint hasta Photoshop) tendrán que soportarlo para que los usuarios empiecen a poder usarlo.

Además, esto no es como SPDY: este cambio no es transparente a los usuarios. No es algo entre desarrolladores web y de navegadores. Entran en juego muchos más actores, incluidos los usuarios normales, a los que habrá que cambiarles el chip de "WebP para imágenes en Internet". Y además habrá que contar con las aplicaciones que manejen algo de imágenes (no sólo las especializadas sino también aplicaciones móviles estilo Instagram o cualquiera que permita guardar/subir imágenes) para que cuenten con WebP como el formato por defecto.

Lo que Google está intentando hacer es muy loable, pero le va a costar muchos años plantear WebP como el estándar de imágenes por Internet.

Más información | Especificación de WebP