Muchas veces el uso que se hace de los formatos de imagen no es coherente con la finalidad para la cual esos formatos se crearon. El desconocimiento (o el apuro) a la hora de generar la imagen final que, por ejemplo, debemos publicar en una web nos lleva a cometer errores que pueden tener malas consecuencias:
- La imagen se degrada tanto que resulta desagradable.
- La imagen se degrada o no, pero queda con un tamaño que multiplicado por los visitantes que tenga nuestra web resulta en más costos de hosting («queda muy pesada»).
- La imagen queda perfecta, pero el usuario tarda mucho tiempo en acceder al contenido y se va.
Es necesario conocer que los formatos tienen cada uno un objetivo, y que no existe un formato «mejor» en todos los casos. Exploremos los tres más utilizados actualmente en la web.
El famoso JPEG
Este formato es tal vez el más usado y no siempre es la mejor elección. Fue creado en la década de los ’80 por el «Joint Photographic Experts Group» (Grupo de expertos en fotografía). De allí su sigla, aunque normalmente se lo nombre como «JPG» debido a que en sistemas Microsoft DOS se utilizaban extensiones de tres caracteres.
Este formato de imagen tuvo gran aceptación gracias a su mecanismo de compresión. Es necesario distinguir aquí dos términos:
- formato: es la manera en la cual la información de la imagen debe ser organizada en un archivo de computadora para que pueda ser leída posteriormente. La «información» de la imagen no es nada más que todos sus pixeles, teniendo éstos información de color y de opacidad, que serán almacenados como bytes.
- algoritmo de compresión: es, básicamente, una serie de cálculos que se realizan con la información de los pixeles para reducir el conjunto de datos y lograr un tamaño de archivo menor.
Volviendo a JPEG, el éxito de su algoritmo de compresión está determinado por la posibilidad de elegir la «fuerza» de esta compresión. Al comprimir más la imagen, reduciendo su tamaño, (y esto lo sabemos todos) generamos una imagen con peor calidad. Esto se denomina «algoritmo con pérdida», ya que estamos literalmente perdiendo información de la imagen en haras de reducir también el tamaño en bytes. El usuario tiene entonces la posibilidad de elegir cuánto desea perder, dependiendo de sus propias necesidades.
Pero esta compresión tiene a su vez un comportamiento que depende del objetivo para el cual fue diseñada. Como dijimos, este algoritmo proviene del mundo de la fotografía. Al comprimir imagenes fotográficas (por ejemplo, un paisaje) el algoritmo JPEG es muy eficiente, en el sentido de que logra reducir mucho el tamaño del archivo final sin generar defectos visibles al ojo humano. Dicho de otro modo: hay que comprimir mucho una foto para empezar a notar los defectos generados por este algoritmo.
Cuando se trata de imágenes que poseen planos de color y líneas con cambios abruptos de un pixel al siguiente (una obra de Piet Mondrian, por ejemplo) el algoritmo de JPEG es muy deficiente y se generan los llamados «artifacts»: esos conocidos ruidos en la imagen, generados durante la compresión.
Artifacts generados por la compresión. Izquierda: original; derecha: comprimido con jpeg.
Cuando estemos ante imágenes de estas características «Mondrianescas» no elegiremos el formato JPEG. Los mismos artifacts también afectan notoriamente a la tipografía.
GIF, el animado
El formato GIF también fue ideado a fines de la década del ’80. Su sigla proviene de «Graphics Interchange Format» (Formato para intercambio de gráficos) y fue creado por la empresa Compuserve.
Existen diferencias fundamentales entre GIF y JPEG. GIF es un formato que se caracteriza por trabajar con una paleta de colores. Al guardar una imagen, se elige una cantidad de colores (entre 2 y 256) y se representa toda la imagen con esa paleta. Esta «normalización» de la paleta a utilizar es la que permite que el archivo final contenga menos información que el original, resultando de menor tamaño. Este tipo de formato se denomina «color indexado».
Por supuesto, esta reducción en la cantidad de colores también implica una peor calidad debido a la pérdida de la información de color original, por lo que el formato GIF no puede utilizarse en fotografías como JPEG a menos que querramos lograr algún efecto (como el «posterizado» de Adobe Photoshop).
Fotografía original a la izquierda, indexada con GIF a 64 colores a la derecha.
Una vez que la imagen ha sido reducida en colores se realiza una operación muy parecida a la que usan los populares formatos ZIP o RAR. Este paso es «sin pérdida» porque al descomprimirse se obtiene un archivo idéntico al original. Este segundo paso le permite a GIF perder aún más peso de archivo.
Dos características interesantes de GIF son el soporte para «canal alfa» y para animaciones. El canal alfa es un dato adicional, que indica qué pixeles deben ser opacos y cuáles transparentes, posibilitando de esta manera imágenes con porciones que dejan ver lo que haya por detrás, algo imposible en JPEG. Las animaciones GIF son posibles ya que este formato puede almacenar varias imágenes en un mismo archivo, mostrándolas secuencialmente para formar una animación. Esto lo convirtió en el formato por defecto para banners en la web, antes de Adobe Flash. Es de destacar que el formato GIF no crea artifacts en la imagen.
El moderno PNG
PNG está siendo cada vez más usado. Muchos profesionales que trabajamos en web tenemos alguna reticencia todavía, debido a los problemas que tenían los navegadores antiguos para mostrarlo. Fuera de esta cuestión emocional, la verdad es que los actuales navegadores grado «A» trabajan perfectamente con este formato.
PNG («Portable Network Graphics»: Gráfico portable en redes) se inventó a mediados de los ’90 como alternativa a GIF. Los bytes que componen las primeras partes de los png están diseñadas para poder detectar distintos sistemas operativos. El hecho de que los sistemas operativos (DOS, Mac, Unix) históricamente hayan tratado ciertos caracteres de diferente modo es lo que lleva a este diseño. De allí la denominación de “portable”.
PNG posee canal alfa al igual que su antecesor GIF. Pero mientras que los canales alfa de GIF son de 1 bit (es decir, un pixel será opaco o transparente, sin intermedios), los de PNG permiten mayor «profundidad de bits». Resumiendo: los pixeles de una imagen en formato PNG pueden tener un porcentaje de opacidad, de más a menos transparente.
Una imagen PNG (un círculo verde degradado) en una página web, vista sobre dos fondos. Demostración de transparencias intermedias.
Respecto de la compresión debe tenerse en cuenta que PNG se puede utilizar en color indexado o en color verdadero. «Color indexado» es la utilización de una paleta de colores preseleccionada, idéntico a GIF. «Color verdadero» es la utilización de tres canales de color (RGB) por lo cual pueden representarse todos los colores. Estas dos formas de trabajo están identificadas en Adobe Photoshop como sigue:
- PNG-8: creará una imagen con color indexado, igual que GIF, con una paleta de la cantidad de colores que seleccionemos (como GIF, entre 2 y 256 colores).
- PNG-24: trabajara con RGB, creando una imagen sin pérdida.
Debemos notar que al trabajar con PNG-24 es probable que generemos un archivo de mayor peso que un JPEG aún de máxima calidad. Debe compararse en una vista previa para decidir cuál es la mejor opción en este caso. Esto depende de cómo sea la imagen y no se puede determinar de antemano.
Es de destacar que en algunos casos la compresión nula de JPEG (o sea, máxima calidad) modifica igualmente las imágenes de un modo que las inutiliza. Esto es muy común en degradados. En ese caso la solución es utilizar PNG-24, un formato que tampoco genera artifacts en la imagen.
Tanto en PNG-8 como PNG-24 se puede utilizar (o no) la característica de transparencia. A diferencia de GIF, PNG no soporta imágenes animadas en un mismo archivo.
Conclusiones
GIF y JPEG son dos formatos bien arraigados. Cada uno tiene sus pros y contras, debido a que fueron diseñados para situaciones diferentes, hace 30 años.
Utilizaremos JPEG cuando estemos ante fotografías que no tienen características vectoriales o geométricas, por decirlo de algún modo. JPEG es muy propenso a crear artifacts -ruido- cuando comprimimos demasiado y tenemos planos de color o líneas.
Preferiremos GIF cuando aparezcan estas cualidades que llamo «Mondrianescas»: líneas, diagonales, planos de color puro, imágenes a dos colores. Cuando la cantidad de colores sea fija (imaginen un tablero de ajedrez), GIF es la mejor opción dada su paleta de colores indexada.
Si conocemos el manejo de PNG, éste sea tal vez el mejor formato. Es el más moderno y nos permite trabajar con una paleta reducida, al igual que GIF, o con todos los colores, al igual que JPEG. Entre JPEG y PNG la decisión será tomada basándonos en el tamaño de archivo final y por los ruidos que genere JPEG, inutilizando o no nuestra imagen.
Como pensamiento final debo recalcar: no existe un formato mejor para todos los casos.
Imágenes originales en la columna izquierda. Al centro luego de comprimirse a JPEG en 90%. A la derecha luego de convertirse a GIF en 32 colores.
Copyright 2012 Mauro Gullino - Material de libre distribución bajo Licencia Creative Commons Atribución-CompartirDerivadasIgual 2.5 Argentina.