Imágenes en HTML (II)
por Luciano Moreno, del departamento de diseño web de BJS Software.

La etiqueta <IMG>.-

El lenguaje HTML 4.0 posee una etiqueta específica para la introducción de una imagen dentro del documento de una página web, la etiqueta <IMG>. Con ella deberemos insertar todas las imágenes que deseemos que tenga nuestra página, y es una etiqueta que carace de pareja de cierre, es decir, no se debe poner nunca </IMG>.

La sintaxis general de esta etiqueta es:

<IMG atributo="valor" atributo= "valor".......>;

En esta sintaxis vemos que la etiqueta IMG posee una serie de atributos que permiten definir adecuádamente cómo se debe situar y comporta la imagen dentro de la página.

Los principales atributos de la etiqueta IMG son:

* SRC="ruta_imagen": que establece la localización de la imagen que queremos insertar mediante la etiqueta IMG, y en donde la ruta puede ser relativa a la estructura de carpetas del sitio web o absoluta, en cuyo caso se debe dar la URI completa del fichero gráfico. Ejemplos:

<IMG SRC="images/bandera.jpg"> (ruta relativa)

<IMG SRC="http://www.mi_dominio.com/images/bandera.jpg"> (ruta absoluta)

y con cualquiera de ellas tendremos ya la imagen incluida dentro de nuestra página, como véis a continuación:

¿Dónde se deben guardar las imágenes en un sitio web?. Lo más usual es hacerlo en una carpeta propia, que cuelga del directorio raiz, y que en las mayoría de los sitios web recibe el nombra de "images".

¿Qué ruta es mejor usar, la relativa o la absoluta?. Bueno, depende. Lo normal es establecer rutas relativas cuando las páginas forman parte de un sitio web propio, que va a permanecer siempre en su lugar actual, por lo que la ruta relativa siempre será correcta. Pero si pensamos cambiar la carpeta de las páginas dentro del esquema de nuestro sitio, o si queremos tener un conjunto de páginas destinado a poder ser seccionado del total (como por ejemplo, este manual de imágenes, si quiero crear con él un zip para que podáis descargarlo independientemente), lo mejor entonces en establecer rutas absolutas, ya que así siempre estaréis seguros de que las imágenes van a estar disponibles.

También existe otra posibilidad de ruta para las imágenes. Si nuestra página va a tener contenido dinámico, porque por ejemplo vaya a ser una página JSP (con código Java), y va a estar situada en un servidor dinámico, lo correcto es establecer las rutas a partir de la raiz de la aplicación, por lo que su sintaxis en este caso sería, por ejemplo:

<IMG SRC="/carpeta_padre/carpeta_hijo/images/bandera.jpg">

ya que esta es la forma correcta de establecer rutas en este caso, no sólo para imágenes, también para archivos CSS o js. Lo que ocurre entonces es que muchas veces no verenos bien las páginas si no lo hacemos a través de un servidor web, es decir, puede que en este caso no se vean las páginas en local.

* WIDTH- HEIGHT="valor": que van a establecer la anchura y la altura de la imagen. Son estos unos atributos muy importantes, que hay que usar siempre. El parámetro valor es un número que representa la medida del atributo en pixels.

Cuando el navegador recibe una página web del servidor empieza a leer el código HTML de esta, empezando por arriba, y cuando llega al contenido del BODY empieza a pintarlo en pantalla. Si se encuentra una etiqueta IMG, lo que hace el navegador es realizar una nueva petición HTTP al servidor, para que le envíe la imagen correspondiente, pero no se queda parado esperando la imagen, si no que sigue leyendo el contenido del BODY y presentándolo en pantalla. Se produce con ello un desfase entre la presentación de la imagen, que todavía no le ha llegado (sobre todo si es una imagen pesada, de muchos Ks) y el resto del contenido de la página.

Si hemos establecido las medidas de la imagen con los atributos WIDTH y HEIGHT, el navegador reserva este espacio para ella, y cuando la imagen se acabe de cargar se visualiza en pantalla, sin sufrir el diseño de la página. Pero si no hemos establecido las medidas, el navegador no sábe el tamaño físico de la imagen, con lo que no reserva el espacio adecuado en pantalla, por lo que cuando llega esta y aparece, se produce un salto de todo el contenido de la página, para dejar el espacio que necesita la imagen. Este efecto es muy feo y se debe evitar. En la siguiente ventana vemos un ejemplo de este efecto indeseado, un poco exagerado para que lo veáis bien.

Además, hay que usar para WIDTH y HEIGHT exactamente los tamaños que tenga en realidad la imagen, ya que si no es así, ésta se deforma. Esta deformación se notará poco si la imagen es plana y de pocos colores, pero si contiene texto o si es una imagen de muchos colores o que representa un objeto conocido, la deformación arruinará totalmente la apariencia de la misma. En el siguiente ejemplo podéis ver la misma imagen, con las medidas bien y mal definidas.

Para saber el tamaño exacto de una imagen podéis abrirla con cualquier programa gráfico y en él ver sus propiedades, o también abrirla con Internet Explorer, por ejemplo, y pulsaldo sobre ella con el botón derecho seleccionar "propiedades", con lo que tendréis sus dimensiones y su tamaño en Ks.

También es posible expresar el tamaño de una imagen mediante porcentajes. En un método no recomendado por los estándares, y que sólo es útil en el caso de tener una imagen con la que queramos hacer una línea horizontal o usarla para construir un menú gráfico, pero en este caso, si usamos celdas de tabla, es mejor asignar la imagen como fondo de la celda

Un ejemplo de imagen definida en tantos por ciento es el siguiente:

<IMG SRC="bg.gif" WIDTH="70%" HEIGHT="10">

* BORDER="valor": que establece el borde lateral que va a tener la imagen, y donde valor es un número en pixels. Si la imagen no está establecida como enlace, el tamaño del borde es nulo por defecto, pero si esta está dentro de un enlace aparecerá un borde azul alrededor de ella si no indicamos nada. Si deseamos que este borde desaparezca deberemos establecer un borde cero con este atributo. Ejemplos:

Imagen sin enlace ni atributo BORDER:

<IMG SRC="boton.jpg" WIDTH="137" HEIGHT="33">

Imagen sin enlace con borde asignado:

<IMG SRC="boton.jpg" WIDTH="137" HEIGHT="33" BORDER="3">

Imagen con enlace pero sin atributo BORDER:

<A HREF="loquesea.html"><IMG SRC="boton.jpg" WIDTH="137" HEIGHT="33"></A>

Imagen con enlace y BORDER puesto a cero:

<A HREF="loquesea.html"><IMG SRC="boton.jpg" WIDTH="137" HEIGHT="33" BORDER="0"></A>