Imágenes

IMÁGENES

Las imágenes son la salsa de los documentos ya que mejoran mucho el aspecto final de un sitio web. La etiqueta <IMG> (image) lleva siempre, al menos, el atributo SRC (source) que indica el nombre y la situación del gráfico a incluir.

Que se ve:

Podemos poner el tamaño y deberíamos hacerlo para que al cargarse la página, el navegador deje ese espacio a la imagen (que ya conoce porque se lo hemos puesto) mientras carga el texto. Si no se pone tarda más en cargar el texto y después, además, tiene que ajustarlo al tamaño real de la imagen, que el navegador desconoce. El tamaño podemos saberlo si disponemos de un programa de dibujo, o si la hemos hecho nosotros.

Los atributos son WIDTH que es ancho y HEIGHT que es alto; con valores en píxeles o en porcentaje de pantalla (es aconsejable usar píxeles ya que el porcentaje depende de la resolución de la pantalla y, por tanto, cambiará de un usuario a otro).

Lógicamente, con una imagen pequeña podemos hacer una más grande, o más chica, o deformarla en anchura y altura, pero siempre pierde calidad. Lo aconsejable es poner los datos reales de mi gráfico. Si lo que quiero es una imagen más grande o pequeña, la modifico, o la creo, con un programa de dibujo, que para eso están.

Un error corriente es usar una imagen grande, en un documento, como una más pequeña, reduciendo los atributos de anchura y altura. Sólo conseguiremos tener una imagen pequeña, pero que ocupa como lo que es, una imagen grande. Solución: redúcela con un programa y ahorrarás espacio.

Esta imagen de de 68 × 57 píxeles.

Observa como queda ampliada: Y normal:

Otra cosa importante es la situación del gráfico. Tal como lo hemos puesto arriba tiene que estar en el mismo lugar que el documento HTM o HTML que lo llama.

Si tenemos el documento en un directorio (no importa cual) y el gráfico en un subdirectorio de él llamado IMAGENES (sí importa cual), tendríamos que poner:

para que al encontrarse la etiqueta vaya a buscar la imagen al subdirectorio IMAGENES.

Lo normal es tenerlas en el mismo sitio (primer caso) o en un sub (2º caso). Ahora bien, hay gente que pude tenerlas en un directorio superior al que contiene el documento. En este caso será:

que indica que primero salga del directorio donde está el documento y ahí fuera encontrará el archivo.

También podemos usar la ruta completa del lugar donde está subida mi imagen, por ejemplo:

o podemos usar una imagen de otro sitio web (ojo al copyright) que tendría esta forma:

Las cosas se pueden complicar más pero no merece la pena.

Observa las líneas que he puesto de separación en mi página. No son líneas HR azules sino un punto, hecho con un programa de dibujo, estirado. Aquí no se pierde calidad y da mucho juego. Además, es la única manera de poner líneas de colores con Natscape (eso ya lo vimos en el capítulo de líneas).

Los formatos posibles (por ahora) son 3:

JPG: también se llama JPEG. Es el ideal para fotos ya que puede tener los 16 millones y medio de colores.

GIF: solo usa 256 colores, es ideal para lo que no son fotos (gráficas, dibujos,...). Ocupa menos espacio y tiene la peculiaridad de que podemos elegir, con un programa de dibujo, un color (eso sí, uniforme) para que se vea transparente (no se vea) en la página. Esto hace que podamos ver imágenes como las que vienen ahora:

Sin fondo transparente Y con el fondo transparente:

Otro color transparente: E incluso letras:

Están los GIF animados, que son unas cuantas imágenes juntas en un archivo GIF, de modo que al pasar de una a otra nos da sensación de movimiento. Se descargan de la red o se hacen con programas especiales.

Y estan los Gif entrelazados. Ya no se usan mucho debido a que han mejorado las velocidades de transmisión de datos pero consisten en imágenes que, en vez de aparecer de arriba a abajo (como una persiana) cuando son grandes y tardan en bajar, aparecen en líneas de 4 en 4, de modo que primero vemos una imagen poco definida, que se va definiendo. Primero aparecen las líneas 1,5,9,..., después 2,6,10 y así.

PNG: es nuevo y vale para fotos de muchos colores y para dibujo de pocos. En el primer caso el tamaño es muy superior al que ofrece JPG por lo que no merece la pena. En el segundo caso es diferente, ofrece la calidad del GIF pero con tamaños menores. No ofrece, en cambio, la posibilidad de crear animaciones ni transparencias.

Otro atributo de la etiqueta <IMG> es ALT (alternative) que lleva como valor el nombre descriptivo que queramos para el caso en que el usuario no descarga imágenes (se puede hacer que el navegador no las baje para que vaya más rápido) y esto funciona con los dos navegadores. Además muestra una etiquetilla con el texto que hayamos puesto cuando situamos el cursor encima, sin pulsar (pero esto sólo en Explorer, en Netscape hay que poner TITLE, que funciona con ambos).

Quedaría:

Que se vería:

Imagen

Recordemos el atributo TITLE.

Imagen

Lo mejor es poner los dos y asunto zanjado.

Cuando ponemos texto junto a las imágenes (cosa que sucede casi siempre) nos encontramos con varias posibilidades, todas referentes al atributo ALIGN.

Si lo que queremos es poner una línea solamente al lado de la imagen tendremos los valores top (parte alta de la imagen), middle (media) y bottom (parte baja, el predeterminado).

<BODY>
<IMG SRC="util.gif" WIDTH=57 HEIGHT=68 ALIGN=top ALT="Imagen" TITLE="Imagen">
Este texto acompaña a la imagen por arriba (una línea)
</BODY>

Imagen Este texto acompaña a la imagen por arriba (una línea)

Cambiando y poniendo middle y bottom (no haría falta, es el predeterminado) quedarán:

Imagen Este texto acompaña a la imagen por el medio

Imagen Este texto acompaña a la imagen por abajo

Cuando queremos poner más de una línea sucede esto:

Imagen Este texto acompaña a la imagen por el medio y, como es más de una línea, salta al encuentro del primer espacio vacio.

Lo cual queda bastante feo, lo ideal sería que rodeara a la imagen con las líneas que fueran. Esto se consigue con el valor left y right. Veamos:

<BODY>
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57 ALIGN=left TITLE="Imagen"> Este texto acompaña a la imagen y no salta a ningún sitio, sino que va rodeando al gráfico como pasa en los libros. Queda como tiene que quedar.
</BODY>

Imagen Este texto acompaña a la imagen y no salta a ningún sitio, sino que va rodeando al gráfico como pasa en los libros.
Queda como tiene que quedar.

Y a la derecha:

Imagen Este texto acompaña a la imagen y no salta a ningún sitio, sino que va rodeando al gráfico como pasa en los libros.
Queda como tiene que quedar.

En el caso de que queramos las dos cosas, es decir, que un texto rodee a la imagen, pero si la imagen es grande, que en un momento dado salte a buscar el primer espacio vacío (sin imagen) tendremos que usar la etiqueta   con valores left (busca el espacio a la izquierda), right (derecha) y all (a ambos lados).

Vemos un ejemplo.

<BODY>
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57 ALIGN=left TITLE="Imagen"> Este texto acompaña a la imagen y no salta a ningún sitio, sino que va rodeando al gráfico, pero como vemos más adelante   salta hasta encontrar un márgen libre.
</BODY>

Imagen Este texto acompaña a la imagen y no salta a ningún sitio,sino que va rodeando al gráfico, pero como vemos más adelante
salta hasta encontrar un márgen libre.

Otros valores de ALIGN son absbottom que coloca el borde inferior de la imagen a nivel del elemento más bajo de la línea de texto (piensa en la letra "p" que baja más que la "m", de modo que si la hay se ajusta a ella si es la más baja).

absmiddle que ajusta la imagen al medio absoluto de la línea.

texttop en la parte de arriba de la letra más alta del texto (la "l" más alta que la "m").

baseline sobre la línea base del texto (sin tener en cuenta las altura y bajuras).

Mira que bonito queda esto, es simplemente una imagen delante de una frase.

A que queda chachi.

También podemos usar la imagen 1 × 1 de las líneas haciéndola cuadrada y más grande.

A que queda chachi.

Un truco interesante es crear una imagen de un solo color y hacer, con un programa, que ese color sea transparente; así tendremos un gráfico (gif) transparente para poner donde queramos. Por ejemplo, para espaciar la primera línea de un párrafo lo que queramos, cosa que es imposible sin usar estilos (ya lo veremos).

Un truco interesante es crear una imagen de un solo color y hacer, con un programa, que ese color sea transparente; así tendremos un gráfico (gif) transparente para poner donde queramos.

Esto se ha hecho según el código siguiente:

<BODY>
 <IMG SRC="image1.gif" WIDTH=60 HEIGHT=5"> Un truco interesante es crear una imagen de un solo color y hacer, con un programa, que ese color sea transparente; así tendremos un gráfico (gif) transparente para poner donde queramos.
</BODY>

Otro atributo interesante es HSPACE (horizontal space) que deja un espacio horizontal entre el texto y la imagen; y VSPACE (vertical space) que deja un espacio vertical. Compáralo con los que ya hemos visto.

El horizontal:

<BODY>
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57 ALIGN=MIDDLE HSPACE=30> Este texto acompaña a la imagen a una distancia horizontal de 30 píxeles.
</BODY>

Este texto está a una distancia horizontal de 30 píxeles.

El vertical:

<BODY>
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57 VSPACE=30> Este texto acompaña a la imagen a una distancia vertical de 30 píxeles.
</BODY>

Este texto está a una distancia vertical de 30 píxeles.

Un recurso que se hace a veces en la Red es el de poner una imagen de baja calidad para que se vea mientras si carga la buena. Esto no es apreciable con buenas conexiones, pero ahí está, por si a alguien le vale.