Imagenes

Inclusión de imágenes

Los clientes Web, que inicialmente sólo disponían de capacidad para mostrar texto, evolucionaron rápidamente, aprovechando las capacidades de los sofisticados sistemas operativos gráficos. La mayoría de los browsers actuales pueden manejar y representar directamente imágenes en formatos GIF (extensión .gif) y JPEG (extensiones .jpg o .jpeg), los más comunes. Cuando se recibe una imagen de tipo desconocido (bitmap, tiff, etc.), que el propio browser no entiende, se utiliza su descripción MIME para localizar una aplicación capaz de mostrarla.

La forma más básica de incluir imágenes es hacer que un enlace apunte a un fichero gráfico. De esta forma, al activarlo, se mostrará en una pantalla vacía la imagen deseada:

Pulsa <A HREF="/fotos/casa.jpg">aquí</A> para ver la foto de la casa. Además, HTML permite insertar imágenes (inlined images) dentro de un documento, con la etiqueta <IMG>. Con ella, se pueden situar imágenes junto al texto, controlando la forma en que se distribuirán ambos, consiguiéndose la mayoría de los efectos de presentación que permite un buen procesador de texto.

Cuando una imagen se inserta directamente en un documento, ésta va unida al párrafo de texto en que se localiza, por lo que se pueden emplear los modificadores de <IMG> para especificar en qué forma se distribuirán ambos.

Los browsers tratan las imágenes dentro de un párrafo como a un carácter más; por eso, se pueden insertar en cualquier punto del mismo. Además, las líneas que la rodean no fluyen a lo largo de la imagen, sino que saltan al espacio inmediatamente posterior a la misma, salvo que se utilicen algunos atributos especiales.

<IMG> es una de las etiquetas a la que más funcionalidades se han añadido con la evolución del HTML, para sofisticar la presentación e integración de imágenes junto al texto de un documento. En la siguiente tabla se recogen las más importantes.

<IMG>	Inserta una imagen dentro de un documento HTML, enlazada al párrafo en que se encuentra la etiqueta.
	SRC=" "	Contiene la URL de la imagen a incluir. Este atributo es obligatorio. Como siempre, puede ser relativa al documento actual o absoluta.
	ALT=" "	Asigna un texto descriptivo, relacionado con la imagen. Sirve para que los usuarios que emplean clientes Web en modo texto tengan una idea aproximada del contenido de la imagen. Además, se utiliza en los clientes gráficos mientras estos no disponen todavía de la propia imagen. Se debería incluir siempre.
	ALIGN=	Controla la alineación de la imagen con respecto al párrafo en que está insertada. El atributo es opcional, y toma el valor por defecto bottom. Puede tomar los valores top, middle, bottom, texttop, baseline, absmiddle, absbottom.
	ALIGN=	Control adicional de la alineación de la imagen, introducido por Netscape y Microsoft. Forma parte del HTML 3. Puede tomar los valores *left, right*. Permite hacer que un párrafo fluya sobre el borde de una imagen, bloqueando ésta a la izquierda o derecha del margen. No pueden utilizarse al mismo tiempo las dos instrucciones ALIGN
	HEIGHT= WIDTH=	Informan al cliente Web del tamaño de la imagen a insertar. Cuando un browser lee un fichero HTML, no dispone todavía de las imágenes insertadas. Al recogerlas, conoce su tamaño y puede reservar un espacio adecuado. Si incluyen estos atributos en IMG, se puede acelerar el proceso de presentación del documento, ya que se conoce antes el tamaño a reservar para la imagen. Hay que tener en cuenta que no tienen porque corresponder con el tamaño real de la imagen. El browser escalará la imagen al tamaño indicado en la etiqueta IMG. Muchos editores HTML realizan automáticamente esta asignación.
	ISMAP	Informa al browser de que esta imagen es un mapa activo. Los mapas se tratarán en una sección posterior.
	BORDER=	Fija la anchura del borde que rodeará a la imagen. Con un 0 se desactiva. Si la imagen es un enlace, el borde se muestra con el color asociado la los mismos.
	HSPACE= VSPACE=	Fija márgenes, en pixels, para la imagen. A diferencia de BORDER, se puede actuar independientemente sobre los márgenes izquierdo y derecho. Además, el borde no se muestra, incluso cuando la imagen es activa.

Como valor de SRC se puede utilizar cualquier tipo de URL, por lo que es posible insertar imágenes que residen en un servidor diferente del que contiene el documento.

Control de la posición de la imagen

Para facilitar la integración entre imágenes y texto, el atributo ALIGN permite controlar la posición de la imagen con respecto a la línea en que se inserta. El primer grupo de valores de ALIGN permiten controlar la alineación del extremo superior, inferior y centro con diferentes puntos de referencia de la línea en que está la imagen:

top

Alinea el borde superior de la imagen con el elemento más alto de la línea (puede ser, por ejemplo, otra imagen insertada).

texttop Alinea el borde superior de la imagen con el elemento de texto más alto de la línea en que está la imagen.

middle Alinea el centro de la imagen con la línea base del texto (sobre la que se escriben los caracteres).

absmiddle Alinea el centro de la imagen con el centro de la línea actual.

bottom Alinea el centro de la imagen con la línea base del texto (sobre la que se escriben los caracteres). Es el valor por defecto.

absbottom Alinea la parte de abajo de la imagen con la parte más baja de la línea actual.

Imágenes flotantes

En algunos casos, resulta útil fijar las imágenes en uno de los márgenes del documento, dejando que el resto de los elementos fluyan a lo largo de un borde de la imagen. Para ello, se utilizan los valores left y right de ALIGN. El uso de estos valores es incompatible con la alineación con respecto a la línea base, vista en el apartado anterior.

Los nuevos márgenes introducidos por la imagen son válidos hasta que se llega al borde inferior de la imagen, o hasta que explícitamente se solicita la presencia de un nuevo margen, como se muestra en el siguiente apartado.

<IMG SRC="tigre.gif" BORDER=0 ALIGN=right>Aquí se utiliza alineación RIGHT, y al escribir mucho texto, este se distribuye como muestra esta presentación preliminar.
 Aquí se ve lo que pasa si hago un salto de línea.
<IMG SRC="tigre.gif" BORDER=0 ALIGN=left>Aquí se utiliza alineación LEFT, y al escribir mucho texto, este se distribuye como muestra esta presentación preliminar.
Aquí se ve lo que pasa si hago un salto de párrafo.

Control adicional de saltos de línea

La introducción de las imágenes flotantes hizo necesario ampliar la etiqueta , para manejar los nuevos márgenes creados al anclar una imagen en los márgenes izquierdo o derecho. Para ello, se ha creado el nuevo atributo CLEAR, que puede tomar los valores:

CLEAR=LEFT

inserta un salto de línea que se desplaza verticalmente hacia abajo, hasta encontrar el margen izquierdo libre, sin márgenes interiores.

CLEAR=RIGHT inserta un salto de línea que se desplaza verticalmente hacia abajo, hasta encontrar el margen derecho libre, sin márgenes interiores.

CLEAR=ALL inserta un salto de línea que se desplaza verticalmente hacia abajo, hasta encontrar ambos márgenes libres, sin márgenes interiores.

<IMG SRC="tigre.GIF" WIDTH=61 HEIGHT=82 BORDER=0 ALIGN=left>Al utilizar imágenes flotantes, los párrafos fluyen a lo largo del margen de la imagen. Con BR puedo controlar mejor los saltos de línea.

<IMG SRC="tigre.GIF" WIDTH=61 HEIGHT=82 BORDER=0 ALIGN=left>Este párrafo tiene dos imágenes, para probar como funciona un <BR CLEAR=all><IMG SRC="tigre.GIF" WIDTH=61 HEIGHT=82 BORDER=0 ALIGN=right>

 Este salto de línea pasa a un margen por debajo de las imágenes flotantes.

Otros ejemplos

El caso más sencillo sería:

Para alinear el párrafo con el centro de la imagen:

<IMG SRC="foto.gif" ALIGN=middle>Este soy yo.

Una imagen fijando el tamaño a reservar:

Una imagen que activa un enlace al ser pinchada.

Un ejemplo de alineación de párrafos a la derecha:

<IMG SRC="mapa_can.gif" ALT="Cantabria" ALIGN=left>Cantabria está situada en el centro de la zona norte de España.

Este párrafo se sitúa por debajo de la imagen.

Un ejemplo más completo:

Visita nuestra sección de novedades <A HREF="novedades.html"><IMG SRC="/iconos/new.gif" ALIGN=middle BORDER=0></A>.

Siempre que se trabaje con imágenes, se deberá ser muy cuidadoso con el tamaño de las mismas; el lector de las páginas puede desistir en su intento de acceso si pasa demasiado tiempo esperando a cargar una imagen que no aporta demasiado al contenido de la página. Para solucionarlo, se pueden crear versiones reducidas de las imágenes, haciendo que estas sean enlaces a versiones de mayor calidad y tamaño, que serán cargadas sólo en caso necesario. También es una buena práctica informar al usuario del tamaño y resolución de las mismas.
Para acelerar la carga de una página con imágenes insertadas, es importante incluir los atributos WIDTH y HEIGHT de las mismas, de forma que el browser pueda reservar un recuadro apropiado para presentar la imagen.
Un correcto uso de las imágenes insertadas implica conocer detalles adicionales sobre la forma en que se codifican y almacenan, y los efectos de presentación que se pueden conseguir con ellos.