Cmo funcionan los

formatos de imagen y en
qu los mejora WebP

165

Twitter

E-mail

GUARDAR

42 COMENTARIOS

PUBLICIDAD

TE RECOMENDAMOS

Deep Dreams tiene un competidor: un algoritmo que colorea imgenes automticamente


Fondos de pantalla: dnde descargarlos y cmo instalarlos en el ordenador y el mvil

15 trucos, extensiones y recursos para buscar imgenes en Internet

CompartirCmo funcionan los formatos de imagen y en qu los mejora WebP

Twitter

17 Mayo 2013

GUILLERMO JULIN @gjulianm

165

Email

Todava nos quedan algunas cosas en el tintero del Google I/O. Una de ellas es el
"nuevo" cdec de imagen para la Web: WebP (Web - Picture, no se han roto la cabeza
con el nombre). Digo "nuevo" porque ya exista de bastante antes, pero no est de ms
darle un repaso.
Lo primero es entender por qu Google est llevando a cabo este esfuerzo. Tenemos tres
cdecs 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
cdecs siguen sirviendo... ms o menos.
JPEG es el ms usado no slo en Internet sino tambin fuera de l. La mayor ventaja que
tiene es su capacidad de compresin, que puede llegar a valores tan altos como 100:1
(una imagen de 100KB almacenada en un archivo de 1KB). Pero claro, esa compresin
tan potente tiene sus desventajas: prdida de calidad. Veremos ms adelante por qu
ocurre esto, pero estoy seguro que a todos nos suenan los artefactos, la distorsin de los
JPG.
Despus tenemos al formato GIF. Realmente el formato es bastante malo: aunque la
compresin no tiene prdidas, tenemos un problema, y es que slo podemos representar
256 colores. Para que os hagis una idea, una pantalla normal representa millones de
colores. El resultado es que GIF no es un formato de buena calidad, y de hecho slo se
usa para logos simples y para animaciones (es el nico que las permite).

Por ltimo, est PNG. Es un formato sin prdida y que admite transparencia. El problema
es que no alcanza una compresin tan alta como JPEG, as que slo se usa con imgenes
pequeas y con pocos colores.

WEBP UNIFICA LAS VENTAJAS DE PNG, GIF Y JPEG EN UN NICO

FORMATO.

Al final, tenemos tres formatos distintos, y cada uno destaca en un campo en el que los
dems no tienen nada que hacer: JPEG para archivos pequeos, PNG para alta calidad y
transparencia, y GIF para animaciones.
WebP pretende unificar todas esas ventajas en un nico archivo. Tiene compresin con
prdidas para reducir el tamao de archivo, sin prdidas para mantener la calidad (y aun
as resultan archivos ms pequeos que en PNG), soporta transparencia y animaciones.
El formato definitivo, vamos. Cmo lo logran en Google?

Cmo funcionan los cdecs de imagen?

Para entender un poco el porqu de la necesidad de WebP, tenemos que ver cmo
funcionan los cdecs de imagen. Aviso que har varias simplificaciones para que se
entienda mejor.
Antes de nada, recordemos que una imagen no es ms que una serie de puntos o
pxeles, donde cada posicin tiene las cantidades de color rojo, verde y azul que
componen el color del pxel.
La compresin de imgenes con prdida de calidad se basa en dos principios (los ms
importantes, hay muchos ms). El principal es que el ojo humano no es capaz de
distinguir muchos cambios ligeros de color. Y el segundo, que es ms corto guardar una
serie de puntos como una funcin. Por ejemplo, qu es ms corto de guardar, cincuenta
puntos de una recta o su funcin (y = ax + b por si alguno no se acuerda)?

NO PODEMOS DETECTAR LOS PEQUEOS CAMBIOS DE COLOR, AS

QUE, PARA QU GUARDARLOS?

Parece que lo que he dicho no tiene relacin, pero en realidad s. Decamos que una
imagen no es ms que una serie de puntos, as que podemos representar esos puntos
en una grfica, y despus construir una funcin que se aproxime a esos puntos.
Esa funcin nos sale con muchos picos muy pequeos. Espera, no habamos dicho que
esos cambios tan pequeos no los detecta el ojo? Pues lo tenemos fcil: deshagmonos
de esos picos. "Aplanemos" la funcin. As ser ms corta, y la guardaremos ms
fcilmente. Podis ver un esquema de lo que ocurre en la siguiente imagen.

En JPEG, esto (ms o menos) es lo que se llama el proceso de cuantizacin. La cuestin

es, qu pasa si nos pasamos al "aplanar" la funcin? Que perdemos detalle. Los colores
se quedan, literalmente, ms planos: perdemos contraste. Cada pxel se parece mucho
ms al resto, y por eso aparecen los artefactos. Exagerando mucho, esto es lo pasa en
una imagen real si nos pasamos de compresin:

A la izquierda, imagen JPEG sin comprimir, a la derecha comprimida demasiado.

Este mtodo es bastante eficiente en cuanto al ratio de compresin de la imagen. Lo

malo es lo que comentbamos: es irreversible. Perdemos calidad y no la podemos
recuperar.
Por suerte, hay otros algoritmos para reducir el tamao de imagen sin perder la calidad,
que se basan en cambiar la forma de expresar la imagen para que se pueda comprimir
mejor.
Cmo se comprime mejor una imagen (o cualquier archivo)? Ahorrndonos los datos
repetidos. Por ejemplo, en lugar de guardar 20 ceros seguidos, simplemente guardamos
dos nmeros: 20 (el nmero de repeticiones) y 0 (el elemento que se repite). El objetivo
de los algoritmos con compresin es encontrar otras formas de expresar la imagen de
tal forma que haya el mayor nmero de datos repetidos posible (el nombre tcnico es
reducir la entropa de informacin del archivo).

La tcnica principal que usan los cdecs PNG y GIF para esto es la siguiente. Cogemos
un pxel. Sacamos una prediccin de cmo ser este pxel en funcin de los de su
alrededor. Por ejemplo, si un pxel est rodeado de pxeles rojos, ser rojo tambin; o si
est entre uno rojo y otro amarillo, probablemente ser naranja.
El truco est en guardar no el valor del pxel, ni la prediccin, sino cunto se desva la
prediccin del pxel real. Como en general no hay muchos cambios bruscos en una
imagen, habr muchas diferencias que sean 0 o pequeas, as que tendremos bastantes
datos repetidos. Adems, este proceso es reversible, as que no perdemos calidad.
Como hay varios mtodos para predecir el valor de un pxel, el codificador escoge el que
mejor predice para cada "bloque" de la imagen (esto es, el que saca las predicciones
ms exactas y el que deja nmeros ms pequeos).

En qu mejora WebP lo ya existente?

Y despus de esta "introduccin", 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 tambin depende del
codificador que se use).

LA PRINCIPAL MEJORA DE WEBP ES DAR MS OPCIONES PARA

COMPRIMIR LA IMAGEN SIN PRDIDA.

Frente a PNG, WebP lo mejora por tener un mayor abanico de filtros sin prdida. El filtro
de prediccin tiene ms modos (cada modo valora de forma distinta los pxeles
adyacentes al que queremos calcular su valor terico), lo que permite un mejor ajuste y
por lo tanto se pueden comprimir mejor los datos. Adems, hay otros dos filtros
adicionales: transformacin de color e indexacin de colores.
Estos filtros se pueden aplicar al mismo tiempo sobre una imagen, de forma que el
formato WebP ofrece una compresin mxima mayor usando tcnicas que PNG no
permite.
Por otro lado, frente a JPEG, WebP destaca por la posibilidad de aadir los filtros sin
prdida que acabo de comentar. Es cierto que JPEG tiene mtodos de compresin sin
prdida, pero no son tan efectivos como los de WebP (y son menos usados).

Otra ventaja de WebP es que incluye mtodos de compresin mejorados. Al igual que
PNG, usa DEFLATE, pero adems aade una cach de los colores ms usados. En este
sentido es el ms avanzado de los cuatro formatos.

Y todo eso, para qu?

Bien, una vez que hemos visto la teora, veamos la prctica. Exploremos las imgenes
que Google tiene de muestra para comparar qu ofrece, a nivel de calidad, WebP.
Frente a PNG (galera completa), el cambio es impresionante. La calidad de WebP es del
90%, y la imagen en PNG es unas 4-5 veces ms grande que la de WebP. Las diferencias
en calidad apenas se notan (yo ya me he dejado los ojos y no he visto prcticamente
nada).

Aumento del 200%. Originales: WebP, PNG.

Con JPEG (galera completa), las cosas estn un poco ms dispares. De lejos no hay
mucha diferencia, pero si pasamos a ampliar vemos que, mientras que en WebP se
notan ms los bloques de imagen, en JPEG los artefactos en los bordes son mucho ms
destacados.

Ampliacin 400%. Izquierda: WebP, 29 KB, original. Derecha: JPEG, 44KB, original.

Por ejemplo, en imgenes del cielo, si nos fijamos, WebP se queda un poco atrs al darle
un patrn ms cuadriculado. Sin embargo, la ausencia de artefactos en los bordes de los
objetos le da muchos puntos.

Ampliacin 300%. Izquierda: WebP, 172 KB, original. Derecha: JPEG, 251 KB, original.

Hay que tener en cuenta que al redimensionar las imgenes se pueden haber
introducido nuevas distorsiones (o correciones), as que lo ms recomendable para
apreciar totalmente las diferencias es ir a las galeras que enlazo con Opera o Chrome y
ampliar las imgenes.

Conclusiones
Teniendo en cuenta que WebP est orientado a la web ms que nada, que las prdidas
en calidad no son demasiado grandes y que la reduccin de tamao es considerable,
parece que es la mejor alternativa. Ms an cuando es la que ms caractersticas tiene
de los tres formatos (transparencia, imagen con y sin prdidas, 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 an
en ese momento su adopcin ser lenta: el resto de programas de imagen (desde Paint
hasta Photoshop) tendrn que soportarlo para que los usuarios empiecen a poder usarlo.
Adems, 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 ms actores,
incluidos los usuarios normales, a los que habr que cambiarles el chip de "WebP para
imgenes en Internet". Y adems habr que contar con las aplicaciones que manejen
algo de imgenes (no slo las especializadas sino tambin aplicaciones mviles estilo
Instagram o cualquiera que permita guardar/subir imgenes) 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 aos
plantear WebP como el estndar de imgenes por Internet.