|
|
Pero hay una causa particularmente irritante, y es que hayamos ido a parar a una página que padece del Síndrome de la Imagen Gigantesca, que es la mala costumbre de poner en la página imágenes enormes, lo que se traduce en ficheros de imagen a cargar con un tamaño excesivo.
Hay unas cuantas maneras de minimizar el tamaño de los ficheros de imagen:
Si a pesar de todo, las imágenes que queremos poner siguen teniendo un tamaño de fichero demasiado grande, se puede elegir la solución, vista en el capítulo anterior, de utilizar thumbnails (reproducciones en pequeño que enlazan con la imagen grande). De esta manera es el usuario quien elige qué imágenes cargar.
Otra práctica muy aconsejable, también vista en el capítulo anterior, es la de dimensionar todas las imágenes con los comandos WIDTH y HEIGHT.
Cuando se carga la imagen de una página queda almacenada en el caché. Por tanto, si esta misma imagen se utiliza en otras páginas no será requerida al servidor para ser cargada de nuevo. Por ello, siempre que se pueda, es conveniente repetir la misma imagen en otras páginas, como por ejemplo para los botones, iconos, barras de separación, etc.
Para realizar este tipo de tareas se creó el formato JPEG. Almacena las imágenes con 16.7 millones de colores, que es mucho más de lo que el ojo humano puede distinguir, y hace uso de complicados algoritmos matemáticos para comprimir el tamaño de los ficheros hasta la décima parte de su tamaño original. Esto quiere decir que una imagen complicada que se haya comprimido con este formato tendrá, comparando con el formato GIF, una calidad mayor y un tamaño de fichero menor.
Su único inconveniente es que hay navegadores que no son capaces de manejar directamente estos ficheros y que tienen que traspasarlos a un programa auxiliar para ejecutarlos. Esto quiere decir, que si se quiere tener en cuenta a esos navegadores, no se deben poner imágenes con este formato directamente en la página. Un recurso muy utilizado para solventar esto es el de poner thumbnails en formato GIF que enlacen con las imágenes en tamaño natural y formato JPEG.
De todas maneras, téngase en cuenta que los navegadores que sí pueden manejar este formato son, con mucho, los más utilizados, como son los de Netscape y Microsoft.
Esta es la imagen original, con un fondo blanco no transparente.
La misma imagen, pero con el color blanco transparente.
Pero no todas las imágenes son apropiadas para conseguir este efecto. Es condición indispensable que la imagen tenga un fondo de color uniforme. No vale una imagen con un fondo multicolor.
La imagen de la izquierda tiene un fondo aparentemente uniforme, pero en realidad no es así. La manipulamos con un programa gráfico para proporcionarle uno uniforme. No importaría de qué color sea, puesto que no se va ver, pero es mejor elegir un gris claro, para que en los navegadores que no implementen esta característica de la transparencia, la imagen parezca "casi" transparente. (Los valores RGB para un color gris claro son 207,207,207). Es lo que se ha hecho en la imagen de la derecha.
Hay otro apecto que hay que tener en cuenta y es que el formato GIF tiene dos subformatos diferentes. El más común es el GIF 87a, con el que no se pueden conseguir colores transparentes.
El formato adecuado para ello es el GIF 89a. Por tanto, el programa gráfico debe tener la posibilidad de convertir las imágenes a este subformato.
El último aspecto a tener en cuenta es el siguiente: los programas gráficos tienen normalmente un color de primer plano (foreground) y otro de fondo (background). Para conseguir nuestro propósito tenemos que forzar al programa gráfico para que su color de fondo sea precisamente el color que queremos hacer transparente (en este ejemplo, el color gris claro). Ya no queda más que guardar la imagen en formato GIF 89A e indicar que el color de fondo (común a la imagen y al programa gráfico) sea transparente.
Estos ejemplos se han realizado con el programa para Windows Paint Shop Pro 3.12. Al guardar la imagen (Save As) como GIF 89a, hay que pulsar "Options" y marcar "Set the Transparency Value to the Background".
Otro programa para Windows: LView Pro
Para usuarios del Mac: Transparency
Referencia de consulta: Transparent Background Images
Se puede cambiar este comportamiento si se ha guardado la imagen como un GIF entrelazado (interlaced GIF). En este caso, las líneas quedan guardadas no de una manera consecutiva, sino en saltos de de cuatro en cuatro, y al llegar al final recomienza desde el principio con otra secuencia diferente, también de cuatro en cuatro, así hasta completar la imagen.
Por ejemplo, una imagen de 20 líneas sería guardada con estas secuencias:
El tiempo de carga de una imagen entrelazada y de la misma no entrelazada es el mismo, pero en el primer caso nos hacemos rápidamente una idea del tipo de imagen que es, lo cual puede ser muy conveniente a veces.
Los programas gráficos más completos suelen tener esta posibilidad (p. ej. el Paint Shop Pro), que conviene aprovechar.
He aquí un ejemplo de cómo se carga de distinta manera una imagen relativamente grande (35 kb) primero no entrelazada y luego entrelazada
Luego añadimos entre las etiquetas <HR> y </BODY>, situadas al final, lo siguiente:
<P> <CENTER> <H3> "The truth is out there" </H3>
<IMG SRC="3mulder.gif"> </CENTER>
<P> <HR>
<P> <CENTER> <IMG SRC="bluerib.gif"> </CENTER>
<P> <HR>
Guardamos este fichero como mipag9.html y lo cargamos en el navegador para verlo.
Resultado
 |
   |
 |
