Tamaño de las imágenes Cuando vamos navegando por las páginas del Web parece a veces que todo se detiene completamente. Esto es algo que por desgracia ocurre muy a menudo. Pueden ser muchas las causas: conexiones de la red defectuosas, servidores lentos, etc. Son cosas que en general no nos queda más remedio que soportar.
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:
Reducir el tamaño de la imagen con un programa gráfico. Esto hará que haya menos pixels que almacenar, y por tanto menos kilobytes que cargar.
Reducir el número de colores utilizados en la imagen. Una imagen GIF puede tener un máximo de 256 colores, pero podemos a veces reducir este número. Por ejemplo, se puede conseguir un logo atractivo para encabezar las páginas con sólo dos colores, uno de primer plano y el otro de fondo. Con un programa gráfico adecuado se pueden hacer estas comprobaciones y reducciones.
Simplificar las imágenes. El formato GIF comprime la imagen buscando las secuencias repetidas en los datos y abreviándolas. Esto quiere decir que las zonas grandes de un sólo color se comprimen muy bien, al contrario de las que tienen muchos tonos y graduaciones.
Como referencia, el fichero de una imagen no debe sobrepasar los 100k, mejor aún más pequeño. Tampoco conviene que el tamaño de la imagen en la pantalla sea mayor de 500x400 pixels, para no obligar al usuario a tener que desplazarla con los cursores.
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.
El formato JPEG El método de compresión utilizado por el formato GIF es muy conveniente para comprimir áreas monocolor, como las que puede haber por ejemplo en un diagrama sencillo. Pero no es tan conveniente para cosas más complicadas, como por ejemplo fotografías de objetos de la vida real. Además estos objetos no presentan un aspecto nada favorable si están reducidos a los 256 colores de este formato.
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.
GIFs transparentes Una característica muy útil del formato GIF es la opción de hacer transparente un color determinado, es decir, que en la página del Web ese color concreto no se vea, siendo reemplazado por el fondo de la página. Por tanto, si en una imagen escogemos el color de su fondo como transparente, parecerá flotar sobre el fondo de la página (sea éste el que sea, incluso un fondo de imágenes).
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.
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.
Por ejemplo, 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".
GIFs entrelazados Normalmente, un fichero GIF contiene los datos de cada línea de la imagen de una manera ordenada, de tal manera que al ser cargada por el navegador aparecerá dibujada línea a línea desde arriba hasta abajo.
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 propósito de esto es que al ser cargada esta imagen por un navegador que implemente esta característica (Netscape, Explorador de Microsoft, etc), se verá la imagen completa desde el principio, comenzando con una definición muy grosera que luego se va afinando poco a poco.
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.
Partiendo del ejemplo práctico del capítulo anterior, mipag8.htm, vamos a sustituir dos imágenes por su versión transparente, tal como se ha comentado en el capítulo. Capturamos primero ambas imágenes (azul2.gif y cara2.gif) y las guardamos en el mismo directorio que el documento HTML que vamos a crear.
Nota: las imágenes son las mismas que ya habíamos utilizado en ejemplos anteriores (con el nombre de azul.gif y cara.gif) si bien tienen la particularidad de que hemos convertido en transparente el color blanco que tenían de fondo.
Luego sustituiremos en mipag8.htm las imágenes azul.gif por azul2.gif y cara.gif por cara2.gif y guardaremos este fichero como mipag9.htm y lo cargamos en el navegador para verlo.
