Mundo Web
manuales - recursos - gráficos - programación...

Home - HTML - Imágenes en HTML - 1 - 2 - 3 -4 - 5 - 6 - 7 - 8 - 9 - 10 - 11

Imágenes en HTML (V)
por Luciano Moreno, del departamento de diseño web de BJS Software.


Formatos gráficos. El estándar GIF.-

Ya sabemos cómo introducir imágenes en nuestra página, y cómo podemos trabajar con ella mediante sus atributos. La siguiente pregunta será ¿;qué imágenes podemos usar en una página web?.

Existen multitud de programas gráficos, y cada uno de ellos nos permite salvar la imagen creada en multitud de formatos diferentes, pero hoy por hoy sólo podemos usar en nuestras páginas 4 de ellos, ya que los demás no son reconocidos por los navegadores. Estos formatos posibles son: GIF, JPG, BMP y PNG. Todos ellos pertenecen al tipo de formatos de trama o mapa de bits, porque están formados por una matriz de puntos de color (filas y columnas). Pasemos a continuación a estudiar con más profundidad cada uno de ellos, empezando por el formato GIF.

Los ficheros gráficos GIF (Graphics Interchange File = Formato para Intercambio de Gráficos) son sin duda los más comunes en las páginas web, debido sobre todo a su facilidad de construcción y a su poco peso en Ks, además de ser soportados por todos los navegadores. Pueden ser creados (o exportados como) por casi todos los programas gráficos del mercado, y se guardan con la extensión .gif. Además, el formato GIF es muy simple, y define y guarda una imagen pixel a pixel.

Este formato fué estandarizado por CompuServe en 1987 ( primera versión o gif 87a), aunque la patente del mismo pertenece a la empresa Unisys, y se basa en un sistema de codificación del color de 8 bits, por lo que el número máximo de colores que soporta es de 2 elevado 8 = 256. Posteriormente, en 1989, CompuServe amplió las propiedades de este formato para que se pudieran crear con él imágenes animadas, transparencias e imágenes entrelazadas, dando lugar a la segunda versión de este estándar, conocida como gif 89a. Usa un sistema de compresión LZW modificado.

Entre sus ventajas destacan:

* Posee un sistema de compresión simple, que si bien no permite una optimización extrema del fichero, tampoco produce pérdida de calidad en el gráfico. Este proceso de compresión es especialmente efectivo en el caso de gráficos con pocos colores y con grandes zonas de un mismo color, ya que se basa en guardar todos los pixels del mismo color de una imagen como una especie de matriz que los agrupa, en vez de salvarlos uno a uno. Cuantos menos colores tenga la imagen y más extensión total ocupe cada uno de ellos dentro de la misma, mejor compresión obtendremos.

* Es posible crera con ellos gráficos con fondo transparente, de tal forma que podemos situarlos en nuestra página sin que se aprecien distorsiones con el fondo de la misma, a la vez que evitamos con ello el efecto de contraste de color entre fondos que se puede dar cuando usanos imágenes. (véase el manual de colores en la web).

ejemplo de GIF transparente

* Podemos guardar una imagen en formato GIF asociandola con su propia paleta de colores, lo que hace que el tiempo de carga de la misma se disminuya ( a menos colores en una paleta, más rápido se carga la imagen) y que el gráfico sea más compatible con los diferentes sistemas operativos y navegadores (digamos que la imagen va "con el pan debajo del brazo"), ya que no depende entonces de la paleta estándar segura que por defecto posee cada uno de ellos.

* Nos da la posibilidad de construir imágenes animadas, ya que es posible crear un gráfico formado por diferentes escenas que se unen formando una secuencia y establecer el tiempo que debe mediar entre una de ellas y su siguiente, como si fuera una película de cine.

ejemplo de GIF animado

* Permite construir imágenes entrelazadas. Este tipo de gráficos tiene la propiedad de ir mostrándose en la pantalla del navegador progresivamente, ya que divide la imagen en una especie de cortina formada por líneas horizontales, de tal forma que al cargarlas, el navegador muestra primero un grupo de las bandas que la forman, después otro grupo, y así sucesivamente hasta completar la presentación completa en pantalla. Con ello es posible ir viendo cómo se va formando la imagen ante nuestros ojos, y podemos apreciar desde un principio un bosquejo de la misma, sin tener que esperar a que el navegador la cargue por completo. Este bosquejo se va perfeccionando poco a poco hasta resultar la imagen completa final. Ver ejemplo en la siguiente ventana.

Pero no todo son ventajas. Los ficheros GIF tienen también sus limitaciones, entre las que podemos destacar:

* Sólo nos permiten trabajar con 256 colores. Si estuviésemos seguros que estos fueran colores soportados por todos los navegadores y sistemas operativos, este defecto no sería tan grave, pero es que debemos contar con esta limitación de colores según cada uno de ellos, con lo que al final nos queda un número de colores total compatibles muy pequeño.

ejemplo de GIF con pocos colores

* Debido a esta limitación en los colores, no son adecuados para representar escenas con muchos colores ni con una gradación entre estos, como es el caso de una fotografía. Para estos menesteres es mejor usar otro tipo de formato, como el JPG.

 

 

anterior
siguiente

Home - HTML - Imágenes en HTML - 1 - 2 - 3 -4 - 5 - 6 - 7 - 8 - 9 - 10 - 11