12. Imágenes

12.1. Imágenes inline

Una de las funcionalidades más llamativas en HTML es la posibilidad de incluir imágenes dentro de un documento. Algunos formatos gráficos tienen soporte en modo nativo (son visualizados directamente por el browser), mientras que otros requieren del concurso de programas externos.

No todos los ficheros que contienen gráficos siguen la misma convención de almacenamiento. Existen varios formatos que permiten, entre otras cosas, comprimir en distinto grado la información. Los formatos más extendidos son: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group bitmap) y sus variantes (JPG,BMP,XMP,XBM), TIFF (Tagged Image File Format), EPS ( Encapsulated PostScript), o PCX (de Paintbrush).

Solo el formato GIF es soportado directamente por todos los visualizadores, mientras que el JPEG lo es por bastantes. Ante esta situación, ¿Cual de los dos debemos utilizar?

El formato GIF se basa en el sistema de compresión LZW, un algoritmo muy simple y que, por ello, no alcanza unas altas cotas de reducción. Este formato trabaja con un máximo de 256 colores (8 bits); para simular colores fuera de la paleta utiliza la técnica de dithering (aproximación del color por los vecinos más próximos).

El formato JPEG utiliza un algoritmo de compresión muchos más complicado que el utilizado por el GIF: los ficheros resultantes son más pequeños, pero necesitan más tiempo para su descompresión. A diferencia del anterior formato, JPEG trabaja con 16.7 millones de colores (24 bits).

Como norma general, diremos que se utilizará el formato GIF para iconos e imágenes pequeñas y JPEG para imágenes grandes o de calidad.

Para insertar una imagen en un documento HTML se utilizará la directiva simple <IMG>
<IMG src="/icons/network.gif">

El usuario lo verá:

12.2. Alineado de texto e imagen

La directiva IMG dispone de un atributo cuyo cometido es permitir la alineación vertical de la imagen y el texto que la sucede. El atributo es align y tiene tres valores posibles:

TOP: El texto coincide con la parte superior de la imagen.
MIDDLE: El texto aparece centrado en la imagen.
BOTTOM: El texto coincide con la parte inferior de la imagen.

<IMG src="/icons/network.gif" align=TOP>Alineado TOP

<IMG src="/icons/network.gif" align=MIDDLE>Alineado MIDDLE

<IMG src="/icons/network.gif" align=BOTTOM>Alineado BOTTOM

El usuario verá:

Alineado TOP

Alineado MIDDLE

Alineado BOTTOM

Con los valores mostrados, la alineación se restringe a una linea de texto, pues si se rebasa, la linea siguiente aparecerá debajo de la imagen. Para solucionarlo, se introducen dos nuevos valores como son LEFT (izquierda) y RIGHT (derecha).
La imagen anterior se ha especificado con <IMG src="/icons/network.gif" align=RIGHT>

Indice
Tablas
Enlaces. Documentos hipertexto