Sección para Encontrar Imágenes

Cuidado con las imágenes

Las imágenes pueden dar colorido a nuestras páginas y hacerlas más atractivas. Las imágenes pueden convertir nuestra página en una maravilla, pero también puede convertirla en una pesadilla (toma pareado). Las imágenes tienen unas cuantas pegas:

1. Hacen muy lenta la carga de las páginas. Por muy artística que nos quede la página poca gente esperará a que se cargue un gráfico grande. Si la gente espera mucho se aburre mucho y se va a otro sitio.
2. Pueden recargar la página y distraer al usuario del verdadero contenido.
3. Si están mal elegidas pueden complicar la lectura o hacerla imposible.
4. No debemos basar nuestra página en las imágenes; hay gente que tiene navegador de texto (sin imágenes) o el navegador configurado para no ver imágenes (así se cargan las páginas más rápido).

Una pista: una página con muchos gráficos es muy probable que sea pobre de contenidos (a no ser que la página sea una galería de imágenes).

Al principio a todos nos gusta tener una página con muchos gráficos y colores para hacerla más vistosa, pero hay que contenerse. Piensa en los sufridos internautas que tienen una conexión lenta.

NOTA: Cuando un navegador carga una imagen la guarda en la caché (en el disco para entendernos), de tal forma que si pasamos a otra página en nuestro sitio que use la misma imagen no necesita cargarla de nuevo.

Una Imagen como fondo

Un primer efecto bastante bueno lo podemos conseguir poniendo una imagen como fondo. Es muy fácil, basta añadir un par de cosas a la etiqueta body:

Lo que hace el navegador es ir colocando la imagen indicada hasta llenar el fondo.

Veamos un ejemplo de cómo usar correctamente los fondos: ejemplo7.html

Sin embargo tienes que tener cuidado con el fondo, no escojas una imagen muy grande. Ten cuidado que contraste bien con el texto para que se pueda leer con comodidad.

Por ejemplo mira esta imagen:

"es un precioso muro con esos colores, esa definición, mmm, me gusta, voy a ponerla como fondo" puede pensar alguien. Pues vamos a ponerla como fondo: ejemplo8.html

Y ahora le metemos texto, a ver si eres capaz de leerlo: ejemplo9.html (se lee mal y eso que está puesto con letra grande, con letra pequeña es imposible).

Mostrar imágenes

Para insertar una imagen en nuestra página debemos hacer:

src es la abreviatura de SouRCe. La etiqueta img no tiene pareja, no existe una etiqueta <img>.

Esta etiqueta tiene varias opciones:

• ALT = "descripción"
• ALIGN = left / right / top / middle / bottom
• HEIGHT / WIDTH
• BORDER
• HSPACE / VSPACE

ALT

La descripción que se mete en alt es la que se muestra en caso que de la imagen no se pueda cargar por el motivo que sea. Esto es conveniente para que la gente que tiene un navegador de texto o las imágenes desactivadas no se pierda en nuestra página.

Esta descripción también se muestra si ponemos el ratón sobre la imagen y lo dejamos quieto unos segundos. El siguiente ejemplo muestra una imagen y al poner el ratón encima muestra el mensaje "Gráfico que representa un muro":

ALIGN

Con esta etiqueta podemos alinear el texto con respecto a la imagen. Con unos ejemplos es como mejor se explica:

<img img="fondo-piedra.gif" align=top> Este texto va arriba

Este texto va arriba

<img src="fondo-piedra.gif" align=middle> Este texto va en medio

Este texto va en medio

<img src="fondo-piedra.gif" align=bottom> Este texto va abajo

Este texto va abajo

Existen otras dos posibilidades (left y right):

<IMG SRC="fondo-piedra.gif" align=right width="96" height="96" ALT="Gráfico que representa un muro"> Bla, bla, bla, ...

Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.

<IMG SRC="fondo-piedra.gif" align=left width="96" height="96" ALT="Gráfico que representa un muro"> Bla, bla, bla, ...

Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.

HEIGHT / WIDTH

Estas opciones definen el tamaño (heigth=altura, width=anchura) con el que se mostrará la imagen. Si no especificamos nada la imagen se muestra con su tamaño real.

La imagen que venimos usando (el muro) tiene unas dimensiones de 96x96. Si cambiamos estas dimensiones, por ejemplo a 96x48 la imagen quedaría así:

<IMG SRC="fondo-piedra.gif" width="96" height="48" ALT="Imagen reducida">

Pero también podemos agrandarla (196x98):

<IMG SRC="fondo-piedra.gif" width="192" height="96" ALT="Imagen reducida">

NOTA: Es importante poner las dimensiones siempre, aunque sean las originales, para facilitar al navegador la representación de la imagen.

BORDER

Con esta opción podemos poner un borde a la imagen.

<IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada" border=0>

<IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada" border=6>

HSPACE / VSPACE

Con estas opciones podemos especificar cuántos pixels queremos de separación entre la imagen y el resto del documento. Comprueba en esta tabla la diferencia entre usar vspace=20 y no usarlo. Si lo usamos el texto queda separado por arriba y por abajo 20 pixels:

Usar imágenes como enlaces

Vimos en el capítulo de capítulo 9 cómo poner enlaces de texto en nuestra página. Ahora vamos a ver cómo se usan las imágenes para que sirvan como enlaces gráficos.

Para poner una imagen como enlace debemos meterla dentro de una etiqueta <a href>: Usamos la imagen de Tux el pingüino de Linux:

Y ponemos un enlace a www.linux.org (página con un montón de información sobre el sistema operativo GNU/Linux:

<A HREF="http://www.linux.org/"><IMG SRC="linux-logo.gif" width="92" height="39" ALT="Tux, el pingüino de Linux"></A>

y ya tenemos nuestro enlace gráfico.

Fíjate que aparece un borde alrededor de la imagen. Este borde indica que se trata de un enlace, pero si quieres quitarlo basta con usar la opción border=0.