Todos los gráficos que vienen en una página web tienen que ser descargados desde el servidor y por ello debemos de mantener el tamaño de las imágenes lo más ligero posible para que la página se descargue rápido. Todos los formatos de imagen son en escencia archivos de "mapa de bits" o bitmaps (bmp), sin embargo, los archivos bmp son archivos sin compresión que suelen ser muy pesados para poner en una página web.
Los diferentes formatos que trataremos en este artículo comprimen la información de forma distinta para que sean fácilmente descargados. Conocer la forma en la que estos formatos comprimen la imagen nos permitirá saber cuándo es recomendable guardar un archivo como JPG, como GIF o como PNG.
Una mala selección en el formato puede provocar varios problemas como: gráficos innecesariamente grandes o gráficos con textos borrosos o degradados que muestran bandas. Pero ¿cómo saber qué formato es el adecuado para un gráfico determinado? Este artículo definirá las principales diferencias entre tres de los formatos más comunes.
GIF
Este formato, aunque es el más antiguo de los tres, ha sobrevivido a la extinción por algunas características únicas que lo hacen muy adecuado para ciertos gráficos. Listaremos estas características y prestaremos especial atención a los cuidados que hay que tener para que los archivos GIF sean lo más optimizado posibles.
Paleta de colores de 256 tonos máximo
Los archivos GIF pueden contener un máximo de 256 tonos de colores, no más. El motivo de que los gráficos GIF sean tan pequeños en tamaño se debe en gran parte a que sólo manejan un número limitado de colores. Cada pixel de una imagen GIF trae un número que dice de qué color se debe pintar ese píxel, como si fuera un cuaderno de colorear por números. La paleta de colores puede tener 1 color o hasta 256 colores, y esta paleta de colores se guarda también junto con el archivo, así que si tenemos una paleta con muchos colores, el archivo pesará más. Esta limitante nos dá la primer pauta para saber que las imagenes que guardemos como GIF, no deben de tener muchos tonos de colores.
No es muy buena idea entonces guardar fotografías que contienen muchos colores en formato GIF, o tampoco gráficos que contienen muchos degradados, pues éstos se mostraran como bandas de color. Este "bandeado" de tonos puede reducirse un poco utilizando la técnica conocida como "dithering", que no es otra cosa que revolver o dispersar pixeles de un tono en otro tono, para dar la apariencia de que se estan mezclando y simulen el degradado. La desventaja del dithering es que provoca que el archivo aumente su tamaño en Kb debido al algoritmo que utiliza el GIF para comprimir la información que contiene.
Algoritmo de compresión LZW
No nos vamos a meter a detalles matemáticos de cómo se ejecuta este algoritmo, basta saber que al guardar un archivo GIF, se comienza a leer el pixel superior izquierdo y se verifica qué color es (supongamos que rojo), luego se continúa hacia la derecha y se verifica también el color de este otro, si es también el mismo tono de rojo entonces se continúa con el tercero y así sucesivamente hasta encontrar un pixel que no sea del mismo color. De esta forma el algoritmo guarda que hay 50 pixeles rojos diciendo algo como "50px - rojo", en lugar de guardar algo como "1px - rojo/1px - rojo/1px - rojo/1px - rojo/etc...". El agoritmo es más complejo que esto, pero a grandes rasgos puede entenderse de esta manera.
El hecho de que se comience a leer de izquierda a derecha y de arriba a abajo, nos permite deducir que los gráficos con degradados verticales se comprimirán de manera mucho más eficiente que gráficos con degradados horizontales, pues en los degradados verticales hay más pixeles contiguos del mismo color.
Transparencia de índice
Puede definirse uno de los colores de la imagen como color transparente, sólo uno, de tal forma que los pixeles que queden transparentes dejarán ver el color del fondo sobre el que sea colocada la imagen GIF. Ésta es una gran ventaja si queremos modificar el color de fondo de la página independientmente de la imagen, sin embargo, hay que tener mucho cuidado con lo que se conoce como anti-alias en los bordes.
El anti-alias es una técnica para suavizar los bordes que quedan pixelados en los gráficos con contornos redondeados. Dicha técnica consiste en modificar los pixeles que quedan en el contorno del objeto, para que sean de un tono intermedio entre el color del objeto y el color de fondo.
Si a un gráfico que tiene aplicado anti-alias le ponemos el fondo transparente, la imagen mostrará un "halo" alrededor que será del color del fondo que tenía originalmente. Éste color del "halo" se le conoce como color "Mate", y puede ser cambiado en algunas aplicaciones (como Adobe Fireworks) al momento de guardar el gráfico como GIF.
En resumen, si queremos que la imagen tenga partes transparentes, entonces el formato GIF puede ser una opción, sólo teniendo cuidado de que los bordes de los objetos que queden opacos no tengan anti-alias; o si los tienen, que entonces el color de Mate sea exactamente igual al color del fondo donde se colocará la imagen. Por supuesto que en ésta última opción la imagen quedará "casada" con el fondo, y si se cambia el color de fondo, entonces se tiene que volver a exportar el gráfico con otro color de Mate.
Lossless: Sin pérdidas de calidad
Debido a los métodos que utiliza el formato GIF para comprimirse (Paleta de color y algoritmo LZW), la imagen queda exactamente igual si la abrimos y la guardamos nuevamante. Esto quiere decir que no hay pérdida de calidad y podemos re-exportar el archivo como GIF tantas veces como queramos.
No hay que entender por Lossless que si tenemos una fotografía con millones de colores y la exportamos a GIF vaya a quedar con la misma calidad que el original. Obviamente la paleta reducirá los millones de colores a tan sólo 256 y se aplicará el algoritmo LZW, sin embargo, una vez teniendo el archivo en GIF ya no habrá más perdidas de calidad al re-exportar el archivo, es decir, ya no se re-comprime.
Soporte para animación
El formato GIF tiene la capacidad de intercambiarse a si mismo por otros gráficos dando la perceción de movimiento. Un GIF Animado es como tener varios GIF's que se intercambian después de una fracción de tiempo. Hay que considerar que el tamaño de un archivo GIF Animado dependerá de qué tantos pasos (o frames) tenga la secuencia.
JPG
El JPG es un formato muy adecuado para comprimir fotografías, pero tiene algunas desventajas que le estan haciendo perder terreno frente al nuevo formato PNG. Aún así, el JPG puede considerarse de gran utilidad por ser soportado en prácticamente todos los navegadores.
Millones de colores
En JPG se pueden guardar imagenes que contengan hasta 16 millones de colores, suficientes para representar una fotografía con mucho colorido. Y el tamaño del archivo comprimido es bastante ligero como para presentar en un sitio web.
8 x 8 pixeles
La compresión en el formato JPG se basa en dos principios: 1. El ojo humano es más sensible a los cambios en el brillo que en los cambios de color. 2. Es más sensible al cambio de brillo en áreas de color homogéneo. Bajo estos principios el proceso divide la imagen en recuadros de 8 x 8 pixeles y modifica los niveles de brillo y color en cada bloque con ciertos algoritmos en los cuáles no nos vamos a meter, sólo basta saber que la información menos perceptible para el ojo humano es desechada.
JPG no es Lossless
Cada que se guarda la imagen como JPG, el proceso de compresión se ejecuta nuevamente sobre el archivo ya comprimido y se re-comprime, desechando más información cada vez. Por esta razón, las imagenes guardadas en JPG pierden calidad con cada re-exportación, y los bloques de 8 x 8 pixeles son cada vez más notorios en imagenes con muchas re-compresiones.
Ruido alrededor de los textos
Al guardar imagenes con textos sobre fondos de color homogéneo es muy probable que los textos muestren lo que se conoce como "ruido" alrededor. El proceso de compresión provoca que los textos (especialmente si no tienen anti-alias) muestren pixeles como bruma alrededor del texto, haciendo que la imagen aparente estar sucia.
Lo recomendable en estos casos es evitar guardar este tipo de gráficos como JPG y guardarlos en otro formato como GIF, el cual está optimizado para guardar imagenes con áreas de color homogéneo. Otra opción sería aumentar la calidad del JPG, pero ésto se traduce en un aumento proporcional en el tamaño del archivo.
JPG no soporta transparencia
Si la imagen que deseas requiere tener áreas transparentes, entonces puedes olvidarte de este formato. JPG simplemente no soporta transparencia de ningún tipo.
Entrelazado (Interlaced JPG)
Las imagenes JPG tienen una capacidad que ya no es muy utilizada actualmente: el Entrelazado. Cuando el ancho de banda de internet era muy bajo, se optaba por guardar las imagenes en formato de JPG Interlaced, lo cuál provocaba que en lugar de que la imagen se fuera cargando de arriba a abajo, el navegador mostraba un esbozo de la imagen completa en baja resolución y conforme iba descargándose más información, las fotos iban tomando mayor claridad.
Este tipo de JPG nació de la necesidad de previsualizar la fotografía antes de tener que esperar a que toda la información se procesara. El ancho de banda actual ha dejado obsoleto el uso de esta variante de JPG.
PNG
Este es el formato que vendrá a sustituir el JPG como el método de compresión más utilizado en web. Aunque normalmente son archivos más grandes y algunos navegadores no lo soportan, las ventajas de este formato superan éstas limitaciones.
Millones de colores
El formato PNG tiene una profundida de color de 24 bits, por lo que puedes guardar imagenes con millones de colores.
Compresión Lossless
Puedes guardar tu imagen como PNG tantas veces como desees sin perder calidad.
Transparencia Alpha
Ya dijimos que el formato PNG tiene una profundidad de color de 24 bits, pero el PNG puede tener 8 bits adicionales en cada pixel para guardar 256 niveles de transparencia. Ésto significa que a difierencia de la transparencia de índice, dónde un pixel es completamente opaco o completamente transparente, la transparencia Alpha permite que los pixeles tengan 256 niveles de opacidad.
El agregar 8 bits de información adicionales a cada pixel se traduce en un archivo de mayor tamaño, pero la posibilidad de crear gráficos translúcidos independientemente del color de fondo bien vale esos Kb de más.
Soporte para vectores
Los archivos PNG son archivos de mapa de bits, pero también pueden guardar información vectorial, lo que permite que el formato pueda guardar trazados vectoriales, editarlos y volverse a guardar. De hecho el formato nativo de Fireworks es el PNG donde se pueden guardar los trazados y volver a abrir el archivo para editarlos.
No por guardar información vectorial significa que el PNG pueda ser un gráfico escalable directamente en el navegador como los SVG´s (Scalable Vector Graphics), pero ofrece la flexibilidad de abrirlos en un editor y modificarlos.
IE6, la gran desventaja para el formato PNG
La gran piedra en el zapato para el uso definitivo del PNG como el formato idóneo para las imagenes en web es que el navegador Internet Explorer 6 no lo soporta del todo. Específicamente no soporta la transparencia Alpha, la cuál es una de las principales ventajas de éste.
Afortunadamente el uso del navegador IE6 esta en descenso, y está siendo reemplazado por navegadores más estándar que soportan éste formato. IE7 ya lo soporta y pronto veremos un aumento en el número de websites que utilicen éste formato para comprimir sus imagenes.
Sitios relacionados