La introducción de imágenes en nuestra página web hace de ella más atractiva a la vez que nos ayuda a explicar con mayor facilidad la información. Debemos tener mucho cuidado con ellas porque el abuso de imágenes en la página produce una sobrecarga, distrae a nuestros visitantes, tardara mucho mas en ser cargada la página web por el navegador y en el caso de una mala conexión, el visitante se cansa y no visitara nuestra página.
Generalmente las imágenes son guardadas en archivos del tipo GIF para dibujos y JPG para las fotos. En este tema nos limitaremos a explicar como insertar y alinear en nuestra página una imagen determinada.
La etiqueta que emplearemos para insertar una imagen en la página web es <img> (image). Esta etiqueta no tiene cierre y tenemos que especificar donde se encuentra la imagen que queremos colocar en la página, gracias al atributo src (source). Sería algo así:
<img src=”ruta de la imagen”>
Para especificar la ruta de la imagen haremos lo mismo que hicimos para los enlaces.
Otros atributos de la etiqueta <img> son:
El atributo alt muestra durante la carga de la imagen un descripción de esta, con lo que el navegante se puede hacer una idea de lo que vera en ese lugar. Este atributo no es indispensable pero si es muy útil para imágenes que tarden en cargarse. Incluso en aquellos navegadores que tienen desactivado el mostrar imágenes como por ejemplo los que usan los invidentes que leerán el texto del atributo alt.
Los atributos height y width son los que definen la altura y anchura de la imagen en píxeles. Es conveniente especificar las dimensiones de las imágenes porque de este modo el navegador le reserva un espacio en la página y nos deja ir leyendo el texto tranquilamente mientras se cargan las imágenes.
Para saber cuales son las dimensiones de las imágenes pinchamos en ellas con el botón derecho, entonces se despliega un menú y elegimos propiedades. De esta forma se abre una ventana en la que nos especifica cual es el alto y ancho de la imagen.
Una cuestión importante es no redimensionar la imagen reduciendo el valor de estos atributos, partiendo de una imagen muy grande, porque lo único que conseguiremos es aumentar el tiempo de carga, para ello es mejor emplear programas específicos de diseño gráfico.
El atributo border nos mide el tamaño en píxel del cuadro que rodea la imagen, de esta forma podemos recuadrar la imagen si lo deseamos. Este atributo es principalmente útil cuando queremos eliminar el borde que aparece cuando la imagen sirve de enlace. En este caso, debemos especificar border=” 0”.
Los atributos vspace y hspace sirven para indicar el espacio libre, en píxeles, que hay entre la imagen y otros elementos que la rodean, como por ejemplo el texto, otras imágenes, etc.
El atributo lowsrc este atributo le indica al navegador que primero tiene que cargar una imagen de baja resolución, con lo que se cargara más rápidamente. Y luego cargara la imagen real con mucha más calidad, de esta forma el navegante siempre vera la imagen. Este atributo esta en desuso, porque tenemos que incluir en la página dos imágenes iguales una con menos y otra con más resolución.
Por ejemplo, el código fuente de una imagen que tiene unas dimensiones de 28 de ancho y 21 de alto y un borde de 3 píxeles sería:
<img src=”img1.gif” width=”28 height=” 21” alt=”Tamaño original” border=”3”>
Como podemos adivinar una imagen, al igual que ya vimos con el texto, sirve como enlace. Un ejemplo del código que tendríamos que emplear sería:
<a href=”archivo.html”><img src=”imagen.gif”></a>