4. Cómo cambiar la apariencia de las imágenes

4.1. Borde de las imágenes

El lenguaje HTML permite recuadrar a las imágenes que incluyamos en nuestras páginas con un borde de grosor variable. En general este borde es invisible, a nos ser que especifiquemos lo contrario. Sin embargo cuando vimos las imágenes enlace observamos que alrededor de estas imágenes aparecía un borde azul indicando que se podía pulsar sobre ellas. Como enseguida veremos que es posible conseguir que las imágenes normales SI tengan ese borde y que las imágenes enlace no lo tengan o que sea de otro grosor distinto al que aparece por defecto.

La manera de controlar el borde es usar un nuevo atributo, BORDER, que debe ser usado dentro de la etiqueta IMG. Este atributo toma como valor el número de pixeles que debe tener el borde. Si nuestro objetivo no es añadir un borde sino quitarlo, o asegurarnos que no lo tendrá debemos usar BORDER=0. De esta forma podremos conseguir que desaparezca el borde en las imágenes enlace. En la figura 5.20 podemos ver tres ejemplos de imágenes enlace:

En el primero de ellos no hemos usado el atributo BORDER:

	<A HREF="otra.htm">
	  <IMG SRC="izda.gif">
	</A>

      

En el segundo lo hemos usado dándole el valor cero para eliminar el borde:

	<A HREF="otra.htm">
	<IMG SRC="izda.gif" BORDER=0>
	</A>

      

Y en el tercero le hemos dado el valor 10:

	<A HREF="otra.htm">
	<IMG SRC="izda.gif" BORDER=10>
	</A>

      

El uso de BORDER=0 es especialmente útil en los llamados iconos de navegación. Estos iconos son imágenes enlace que incluimos en las páginas y que suelen tener la apariencia de botones, flechas y similares y cuya función es ayudar al visitante a navegar por nuestra página. En la figura 5.21 podemos ver varios de estos iconos. En todos estos casos la aparición de un borde alrededor de la imagen perjudicaría su apariencia.

Sin embargo no debe parecer que el atributo BORDER sólo tiene utilidad en las imágenes enlace, ya que podemos usarlo con todo tipo de imágenes y en ocasiones nos ayuda a crear interesantes efectos. En la figura 5.22 podemos ver ejemplos de imágenes normales sin borde o con borde de distinto grosor.

En estos ejemplos observamos que si las imágenes no son links el borde es negro en vez de azul. No existe por ahora ningún medio de elegir el color del borde.

Pero además de poder añadir un borde a las imágenes, el HTMLnos permite realizar alguna otra modificación en la apariencia de las imágenes más importante aún, como puede ser modificar su tamaño. De esta forma podremos usar una misma imagen varias veces y con diferentes tamaños en una página Web sin tener crear un archivo GIF o JPG diferente para cada una.

4.2. Modificando el tamaño de las imágenes

Tanto las imágenes GIF como las JPEG son imágenes rectangulares, esto es, su tamaño está determinado únicamente por dos propiedades: su anchura y su altura. Tanto una como otra suelen tener valores dados en pixeles o puntos de pantalla.

El lenguaje HTML nos permitirá modificar estas propiedades de las imágenes a incluir en una página de manera que podamos adaptarlas al tamaño que necesitemos. La forma de hacer realidad esta transformación es usar dos nuevos atributos de la etiqueta IMG: WIDTH y HEIGHT, que significan en inglés anchura y altura respectivamente. A cada uno de estos atributos deberemos darle un tamaño en pixeles que suele oscilar entre 20 y 600 en los casos habituales.

Existen dos formas de usar estos atributos. La primera de ellas consiste en dar valores tanto a WIDTH como a HEIGHT con lo cual estaremos determinando por completo el tamaño con el que el navegador debe mostrar la página. El otro método consiste en usar sólo uno de ellos, o bien WIDTH o bien HEIGHT. Al hacer esto la dimensión que no usemos se adaptará para mantener la proporción de la imagen. Por ejemplo, si tenemos una imagen de 500x250, es decir de anchura 500 y de altura 250, pero al insertarla en la página usamos el siguiente código:

	<IMG SRC="imagen.gif" WIDTH=250>

      

La imagen será mostrada por el navegador con una tamaño de 250x125. Como vemos la relación entre la anchura y la altura sigue siendo la misma, y por tanto la imagen no aparecerá deformada. Si lo que queríamos era conseguir un tamaño de 250x250 debíamos haber escrito el siguiente código:

	
	  <IMG SRC="imagen.gif" WIDTH=250 HEIGHT=250>
	

      

En la figura 5.23 hemos usado una imagen de tamaño original 290x192 y la hemos aplicado diferentes transformaciones.

En la primera de ellas hemos fijado una anchura mitad de la original usando WIDTH=145, pero sin incluir el atributo HEIGHT. En este caso la altura se ajusta automáticamente a 96 pixels (la mitad del original) para que se mantengan las proporciones. En la siguiente imagen hemos usando los dos atributos, tanto HEIGHT como WIDTH con lo cual obtenemos una imagen con las dimensiones deseadas, pero deformada, ya que no se mantienen las proporciones originales.

En general no se usan los atributos WIDTH y HEIGHT para obtener imágenes de mayor tamaño que el original, ya que el resultado obtenido tendría muy poca calidad. El lector puede hacer la prueba.

El método que usan la mayoría de los navegadores para reducir el tamaño de las imágenes consiste en eliminar filas y columnas completas de pixeles elegidas aleatoriamente. Para aumentar el tamaño se duplican filas y columnas elegidas de manera igualmente aleatoria. Este método es usado por su rapidez, pero en ocasiones la calidad ofrecida no es la deseable, especialmente si en la imagen hay texto. Por esta razón si es importante una buena visualización de la imagen conviene usar un programa de retoque fotográfico para modificar el tamaño de la imagen en vez de usar los atributos WIDTH y HEIGHT.

Vamos a terminar esta sección dedicada a cambiar la apariencia de las imágenes de una página Web con un interesante truco. Gracias a él conseguiremos una visualización más rápida de nuestras páginas. La idea es simple, y consiste en incluir SIEMPRE el tamaño de las imágenes con los atributos WIDTH y HEIGHT (es necesario incluir los dos) al insertar una imagen en la página. Este truquillo que parece inocente en un principio tiene dos importantes ventajas:

1. Los navegadores cuando les llega una imagen calculan sus dimensiones para saber como deben mostrarlas, al dárselas directamente con el código ganaremos el tiempo que el navegador perdería realizando este cálculo.

2. La segunda, y quizá más importante ventaja, consiste en que el navegador podrá colocar todos los elementos de la página desde un principio sin esperar a que lleguen las imágenes. Para entender porque ocurre esto es necesario aprender un poco más sobre el funcionamiento del protocolo HTTP. Sin adentrarnos en detalles muy técnicos diremos que los navegadores, cuando se les pide una página, cargan (o bajan) del WWW el archivo HTML con el código. Tras leerlo y mostrar el texto empiezan a cargar los archivos con las imágenes. Cuando llega una imagen el navegador la coloca en su sitio, pero como no sabía cuanto iba a ocupar de antemano probablemente le había dejado un espacio demasiado pequeño, con lo cual es necesario recolocar todos los elementos de la página, ¡y esto ocurre con cada imagen! Al incluir los tamaños de las imágenes en el código el navegador reserva el espacio adecuado y evita tener que recolocar todo sucesivas veces con el consiguiente ahorro de tiempo. En la figura 5.24 podemos ver la página de la práctica 2 antes tras leerse el código, pero antes de mostrar las imágenes. Como vemos, el navegador (Explorer en este caso) ya ha reservado el tamaño para las imágenes que quedan por llegar.

   Figura 5.24. Si incluimos junto con la imagen la información de sus dimensiones el navegador podrá reservar espacio para ellas con sólo leer el código.

   

En ocasiones este ahorro de tiempo es considerable, por lo que nuestra recomendación es que, sin duda, merece la pena usar este truco. Para averiguar el tamaño de las imágenes podemos recurrir a programas de retoque o visualización de imágenes como Paint Shop Pro (Shareware) o IrfanView(Freeware), aunque los más modernos editores de HTML como FrontPageo HomeSite realizan esta labor por nosotros.