Cuando vamos navegando por esas páginas, nos encontramos de todos, claro. Páginas muy simples, páginas muy recargadas, otras bastante equilibradas, ...

En lo que se refiere a los gráficos, hay veces que desistimos de la carga de una página por lo que nos tarda en llegar alguna de sus imágenes, que hace que no cargue lo demás. Recuerda aquello de dimensionar las imágenes. Mira, si nuestro navegador mientras va cargando una página se encuentra con una imagen, lo deja todo hasta que ésta se carga completamente, y luego prosigue; pues bien, si a la imagen en cuestión le hemos puesto sus medidas, el navegador deja el espacio correspondiente y sigue con la carga del resto de la página (no sé si lo he dicho ya quince mil veces...).

A la hora de poner una imagen debemos considerar su tamaño. Pero no sólo las medidas que vamos a poner en el navegador, sino las de la imagen en sí. Me explico. No es la primera vez que visualizando una página observo que tarda, y tarda, y tarda,.... Y sólo tiene una pequeña imagen en el centro (quizá una imagen de 150x150). Una vez que termina de cargar, miro las Propiedades de esa imagen (botón derecho-Propiedades) donde aparece el tamaño en bytes, y me aterrorizo al ver que la imagen en cuestión ocupa más de 150Kb.

¿Cómo es posible? Me pregunto. Manos a la obra. Copio la imagen (botón derecho-Copiar) y me la llevo a mi editor gráfico (PSP) y veo que sus dimensiones originales eran monstruosas.

A nuestro diseñador de páginas web, no se le ocurrió otra cosa que a la hora de colocar la imagen en la página modificar las medidas a las que se debía ajustar su imagen gigante.

Eso no se hace, hombre!!

Tenemos que redimensionar la imagen con nuestro editor, para dejarla al tamaño preciso, majete.

También tenemos que tener en cuenta el formato que utilizamos para nuestras imágenes. Vamos a ver los más utilizados en las páginas web.

El formato JPEG

Es el formato adecuado para imágenes que utilizan muchos colores, como fotografías, o imágenes con degradados.

Tiene a su favor la posibilidad de poder manejar imágenes con gran profundidad de color (hasta 16,7 millones de colores). La mayoría de los editores gráficos son capaces de manejar este formato. Yo os recomiendo el Paint Shop Pro, que será sin lugar a dudas el mejor editor gráfico shareware.

Cuando guardamos una imagen en este formato, podemos establecer la ratio de compresión que queremos aplicar a la misma. Cuanta mayor compresión queramos, menos calidad obtendremos, pero también menor tamaño en Kb del fichero; así que tenemos que mantener un equilibrio entre tamaño y calidad.

El formato GIF

Es el formato originalmente más utilizado en internet. El JPEG es bastante posterior, con lo cual muchos navegadores tardaron en adoptarlo.

Este formato es el ideal para imágenes en las que se repite mucho un color, y las que tienen pocos colores. Soporta imágenes de hasta 256 colores, que está muy bien, pero que para imágenes realísticas no son suficiente.

Existen varios subformatos de este formato GIF. Vamos a verlos.

GIFs transparentes

Podemos definir un color de los utilizados en la imagen como transparente. Así el navegador no nos mostrará ese color, dejando ver el fondo de la página. Lo vemos con un ejemplo.

	Esta imagen NO es transparente.
	Esta imagen es la misma, pero tiene el color blanco transparente.

Cómo hacemos que un color sea transparente. Pues depende del programa editor de gráficos que utilicemos. De todos modos, sea cual sea, debemos guardar la imagen como GIF, subformato 89a. Lo más normal es tener una opción con la que digamos al programa qué color queremos que sea transparente. Te diré que en PSP 4.14, debes seguir estos pasos:
1. File-Preferences-Files Format Preferences; y aquí en la solapa GIF seleccionar "Set the transparency to the background color", con lo cual para cada imagen podemos establecer el color transparente que deseeemos.
2. Una vez realizado el gráfico, y establecidos los 256 colores, seleccionar como color de fondo el color que queramos hacer tranparente.
3. Por último, guardar como GIF 89a.

De todos modos creo que por aquí cerca debería haber un manualillo sobre Paint Shop Pro versión 5.0 (varía algo en este aspecto y en otros muchos, de la versión anterior). Pincha AQUÍ para ir al manual.

GIFs entrelazados

Lo más normal es que según se va cargando una imagen en nuestro navegador, la podamos ir visualizando de arriba abajo. De todos modos, a menudo aparecen unas imágenes que al principio se ven borrosas, y que se van "aclarando" según nos va llegando su información. ¿Por qué pasarán estas cosas?

Explicación: Se trata de GIFs entrelazados. En este subformato, en lugar de almacenarse la información de manera secuencial (línea 1, línea 2, ...) se almacena en secuencias de saltos de líneas (Por ejemplo, para una imagen de 20 lín, se guardaría: 1,5,9,13,17 - 2,6,10,14,18 - ...)

¿Qué ventaja puede tener? Pues que no tenemos que esperar a que se cargue toda la imagen para hacernos una idea de qué cosa nos está llegando (aunque sea de una manera un poco burda. La imagen entrelazada y la no entrelazada tarda el mismo tiempo en cargarse, pero la primera nos parece que se da más prisa, porque la vamos viendo casi entera...

GIFs animados

Habrás visto en algunas (en muchas) páginas gráficos que están en movimiento; algunos para llamar nuestra atención (sobre todo en banderolas -banners- publicitarios), y otros para cansarnos y motivar nuestro "no-vuelvo-nunca-jamás-de-los-jamases-por-aquí".

Pues bien. Estos gráficos son los GIFs animados. En realidad se trata de una serie de gráficos en formato GIF que se juntan con un programilla y nos da como resultado un solo GIF en el que se van visualizando todos los que lo componen, dando así la sensación de movimiento.

Os voy a poner un ejemplo de lo que os digo. Las imágenes que verás a continuación están cogidas del paquete del programa GIF Construction Set, uno de los que nos permite realizar nuestro propios GIFs animados.

Partimos de cuatro imágenes:

ani1.gif	ani2.gif	ani3.gif	ani4.gif

Y después de compilarlas con nuestro programa, conseguimos una apariencia de movimiento, como puedes observar en la imagen que ves a continuación:


animado.gif

Si en lugar de 4 imágenes, hubiéramos utilizado 8, pues la transición entre ellas sería más suave, aunque también el tamaño del fichero resultante sería mayor.

Por último decirte que, como todo, los GIFs animados agradan en su justa medida. Si nos pasamos poniendo botones destelleantes, barras de separación que resultan ser perros corriendo "pacá y pallá" sin parar, y eso, pues que o es una página merece la pena realmente por el contenido que tiene, o seguro que muchos nos volveremos por allí jamás. Conque cuidado con el uso de este elemento.

Te voy a decir un truquillo: Para para el movimiento de esos gráficos mientras estás intentando leer una página que hace un uso excesivo de ellos, sólo tienes que pulsar el botón DETENER de la barra de navegación, pero primero espera a que se cargue toda la página... Los gráficos se detendrán (qué tranquilidad) y tú podrás leer su contenido sin destellos ni carreritas...

Si quieres saber cómo construir tus propios GIFs animados, y no encuentras por ahí información, pues que me lo digas y veremos qué podemos hacer, ¿vale?

© Ismael Asensi 2000