9. Formato de las imágenes
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)
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
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:
- líneas 1, 5, 9, 13, 17
- líneas 2,6,10,14,18
- líneas 3, 7 ,11, 15, 19
- líneas 4, 8, 12, 16, 20
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.
He aquí un ejemplo de cómo se carga de distinta manera una imagen relativamente grande (35 kb) primero no entrelazada y luego entrelazada
Ejemplo práctico
Partiendo del ejemplo práctico del capítulo anterior, mipag8.html, vamos a añadirle las dos imágenes transparentes que se han comentado en el capítulo. Capturamos primero ambas imágenes (bluerib.gif y 3mulder.gif) y las guardamos en el mismo directorio que el documento HTML que vamos a crear.
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
