| Artículos | 01 MAR 1998

GIF frente a JPEG

Tags: Histórico
Técnicas y trucos de diseño en Internet
Ramón Montero.

Una de las primeras ideas de un diseñador Web es incorporar imágenes de gran calidad a sus páginas, capaces de dejar maravillado al afortunado navegante que recale en semejante lugar. Hoy en día es relativamente fácil conseguir buenos gráficos, ya que los programas de ilustración, las aplicaciones de retoque, los elementos de captura de imágenes, las colecciones de dibujos y demás instrumentos de diseño disponibles en la actualidad, proporcionan las herramientas apropiadas para conseguir diseños realmente impactantes.

Pero existe un gran problema al respecto, ya que la reducida velocidad de transmisión con la que trabajan la mayoría de los usuarios que se conectan a Internet, hace que las páginas que incorporen gráficos muy extensos, sean abandonadas por muchos de los visitantes, exigiendo de un buen diseñador Web que sea capaz de proporcionar imágenes realmente interesantes, y que al mismo tiempo, se puedan transferir lo suficientemente rápido como para que los tiempos de espera sean admisibles.

En la mayoría de los casos, este requisito debe primar sobre cualquier otro, lo que exige un buen conocimiento de las características de los formatos gráficos más utilizados en Internet, o sea, los formatos de mapa de puntos GIF y JPEG. Como en anteriores artículos de esta serie, no se trata tanto de describir con detalle las características técnicas de las entidades gráficas, como de contemplar su mejor utilización práctica.

Algunas consideraciones generales

El conflicto generado entre el deseo de incluir en las páginas Web imágenes lo más detalladas y definidas posibles, por una parte, y el alto coste en tiempo que supone cargar por Internet archivos gráficos muy extensos, por otra parte, debe resolverse encontrando un equilibrio adecuado entre el tamaño y la gama de colores, teniendo en cuenta que influye más el número de colores que las dimensiones de la imagen. En una de las tablas adjuntas se puede apreciar cómo afectan el número de colores y la resolución de la imagen en el tamaño teórico sin comprimir del archivo.

De acuerdo que estos datos no se corresponden con los tamaños de los ficheros gráficos GIF y JPEG, y en consecuencia con los tiempos de descarga, pero sí tienen mucha importancia para calcular la repercusión de cada variable y para tener en cuenta la cantidad de memoria que utilizará el usuario cuando las imágenes sean visualizadas en su equipo. La concusión es que no importa tanto el tamaño una imagen como su paleta de colores.

GIF

Dejando aparte las cuestiones más técnicas de este formato, por lo que al diseño en la Web se refiere, nos interesa conocer cómo se comporta con los distintos casos de imágenes posibles. Lo primero que hay que tener en cuenta es que sólo admite un máximo de 256 colores, que suelen ser suficientes en la mayoría de los casos, ya que éste es el número de colores de los modos de vídeo que soportan la mayoría de los navegantes por Internet, pero que pueden ser una limitación inadmisible en determinadas ocasiones.

La segunda característica que hay que dominar, y seguramente la más importante, es su sistema de compresión, del que hay que tener en cuenta dos cuestiones principales: a) que comprime muy eficazmente secuencias repetidas de colores, y b) que trabaja de forma tal que siempre es más eficaz comprimiendo colores repetidos horizontalmente que verticalmente. Vamos a ver unos ejemplos realizados con el programa Paint Shop Pro que nos aclare todo mejor.

Respecto al primer punto, si observamos la figura 1, veremos que un fichero GIF monocolor de 1x1 puntos definido con una paleta de dos colores ocupa 34 bytes, la mayoría dedicados a los datos propios del formato; si aumentamos el tamaño a 10x10 puntos y mantenemos su color y su paleta, el fichero solo aumenta hasta 41 bytes; aumentar el tamaño de la imagen a 100x100 puntos solo implica un fichero de 148 bytes. Con estos ejemplos deducimos que el tamaño de un fichero GIF depende mucho de sus secuencias repetidas y poco de su tamaño. En la figura 2 podemos ver otros ejemplos que sirven para corroborar este punto, ya que si observamos las diferencias entre los tamaños de los ficheros GIF de las cuatro imágenes, no podremos mas que estar de acuerdo con lo comentado anteriormente.

Para entender el segundo punto hay que fijarse en la figura 3, en la que vemos el mismo diseño realizado con una paleta de dieciséis colores y en la que se aprecia la gran diferencia de espacio que ocupa una y otra figura, dependiendo de que las secuencias de colores se repitan en sentido horizontal o vertical. En la figura 4 se han alargado las dimensiones horizontal y vertical del diseño anterior para que se pueda observar su repercusión en los tamaños de los ficheros GIF.

El formato GIF presenta dos posibles versiones: la 87a y la 89a (ver la figura 5), siendo importante que se utilice la del año más actual si queremos aprovechar todas sus posibilidades, entre las que se incluyen la posibilidad de definir un color como transparente, la facultad de cargar la imagen en modo entrelazado y la característica de poder usar GIFs animados.

Aunque en otros artículos se tratarán más detenidamente las propiedades antes citadas, a continuación se van a comentar las utilidades de cada opción. Marcar uno de los colores de la imagen como transparente significa que el programa que utilice el usuario como visor sustituye la zona correspondiente a dicho color por el diseño del fondo del documento, no siendo necesario que sea una región exterior del dibujo (ver la figura 6).

El modo entrelazado del formato GIF se utiliza para presentar rápidamente una vista aproximada de la imagen final, ya que con este sistema la imagen se carga primero como un borrador global y después se complementa con los detalles finales, lo que da una sensación ilusoria de gran velocidad, ya que permite que el usuario no deba esperar hasta el final para hacerse una idea de su contenido (ver la figura 7). Este sistema tiene la contrapartida de aumentar el tamaño del fichero gráfico, por lo que solo se debe usar con imágenes grandes.

Los GIFs animados son secuencias de imágenes que se presentan secuencialmente con una carencia determinada. Son muy efectistas ya que pueden simular una animación, pero deben ser utilizados con prudencia, pues el tamaño de los ficheros GIF crece tanto como la suma de las imágenes que soporta. Cuando solo se mueve una parte de la imagen, es muy útil que las subimágenes del GIF animado se recorten para incluir solo la zona en movimiento, reduciendo así su tamaño final. Las transiciones entre las distintas imágenes deben ser controladas al máximo para conseguir una buena sensación (ver la figura 8).

Por suerte para los diseñadores Web, el control de la transparencia, el entrelazado y la animación de los ficheros GIF se puede realizar fácilmente con las muchas herramientas que hay disponibles en la actualidad, siendo algunas de ellas gratuitas (como Microsoft Gif Animator) o muy baratas (como Paint Shop Pro).

JPEG

Las características que más nos interesan del formato JPEG son que soporta dieciséis millones de colores y que su sistema de compresión es controlable directamente por el diseñador. En lo que respecta al número de colores soportados no hay mucho que aclarar, salvo comentar que es el más adecuado para imágenes de tipo fotográfico o cualquier otra que exija una gran calidad de tonos.

En cuanto a su método de compresión, hay que tener en cuenta dos puntos importantes: a) que el método que utiliza para la compresión implica una cierta pérdida de calidad, y b) que el diseñador puede controlar dicha calidad en el momento de generar el fichero JPG (JPG es la extensión del formato JPEG).

El formato JPEG utiliza un tipo de compresión conocido como "con pérdida", que significa que mientras más reducido sea el tamaño del fichero, más

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información