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 500×250, es decir de anchura 500 y de altura 250, pero al insertarla en la página usamos el siguiente código:

La imagen será mostrada por el navegador con una tamaño de 250×125. 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 250×250 debíamos haber escrito el siguiente código:

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

Figura 5.23. Usando los atributos WIDTH y HEIGHT podemos variar el tamaño de las imágenes. Si sólo usamos uno la otra dimensión se ajusta para mantener las proporciones.

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 FrontPageoHomeSite realizan esta labor por nosotros.

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1