Insertar Imágenes en la página Web <IMG>
La etiqueta que
utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no
posee su cierre correspondiente y en ella hemos de especificar obligatoriamente
el paradero de nuestro archivo gráfico mediante el atributo src (source).
La sintaxis queda entonces
de la siguiente forma:
<img
src="camino hacia el archivo">
Para expresar el
camino, lo haremos de la misma forma que vimos para los enlaces. Las reglas
siguen siendo las mismas, lo único que cambia es que, en lugar de una página
destino, el destino es un archivo gráfico.
Aparte de este
atributo, indispensable obviamente para la visualización de la imagen, la
etiqueta <img> nos propone otra serie de atributos de mayor o menor
utilidad, que listamos a continuación:
Atributo alt
Dentro de las comillas
de este atributo colocaremos una brevísima descripción de la imagen. Esta
etiqueta no es indispensable pero presenta varias utilidades.
Primeramente,
durante el proceso de carga de la página, cuando la imagen no ha sido todavía
cargada, el navegador mostrara esta descripción, con lo que el navegante se
puede hacer una idea de lo que va en ese lugar.
Esto no es tan
trivial si tenemos en cuenta que algunos usuarios navegan por la red con una
opción del navegador que desactiva el muestreo de imágenes, con lo que tales
personas podrán siempre saber de qué se trata el gráfico y eventualmente
cambiar a modo con imágenes para visualizarla.
Además,
determinadas aplicaciones para discapacitados o teléfonos vocales que no
muestran imágenes ofrecen la posibilidad de leerlas por lo que nunca esta de
más pensar en estos colectivos.
En general podemos
considerar como aconsejable el uso de este atributo salvo para imágenes de poca
importancia y absolutamente indispensable si la imagen en cuestión sirve de
enlace.
Atributos height y width
Definen la altura y
anchura respectivamente de la imagen en píxeles.
Todos los archivos
gráficos poseen unas dimensiones de ancho y alto. Estas dimensiones pueden
obtenerse a partir del propio diseñador gráfico o bien haciendo clic con el
botón derecho sobre la imagen vista por el navegador para luego elegir
propiedades sobre el menú que se despliega.
El hecho de explicitar
en nuestro código las dimensiones de nuestras imágenes ayuda al navegador a
confeccionar la página de la forma que nosotros deseamos antes incluso de que
las imágenes hayan sido descargadas.
Así, si las
dimensiones de las imágenes han sido proporcionadas, durante el proceso de
carga, el navegador reservara el espacio correspondiente a cada imagen creando
una maquetación correcta. El usuario podrá comenzar a leer tranquilamente el
texto sin que este se mueva de un lado a otro cada vez que una imagen se
cargue.
Además de esta
utilidad, el alterar los valores de estos dos atributos, es una forma inmediata
de redimensionar nuestra imagen. Este tipo de utilidad no es aconsejable dado
que, si lo que pretendemos es aumentar el tamaño, la perdida de calidad de la
imagen será muy sensible. Inversamente, si deseamos disminuir su tamaño,
estaremos usando un archivo más grande de lo necesario para la imagen que
estamos mostrando con lo que aumentamos el tiempo de descarga de nuestro
documento innecesariamente.
Es importante hacer
hincapié en este punto ya que muchos debutantes tienen esa mala costumbre de
crear gráficos pequeños redimensionando la imagen por medio de estos atributos
a partir de archivos de tamaño descomunal. Hay que pensar que el tamaño de una
imagen con unas dimensiones de la mitad no se reduce a la mitad, sino que
resulta ser aproximadamente 4 veces inferior.
Atributo border
Definen el tamaño
en píxeles del cuadro que rodea la imagen.
De esta forma
podemos recuadrar nuestra imagen si lo deseamos. Es particularmente útil cuando
deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. En
dicho caso tendremos que especificar border="0".
Atributos vspace y hspace
Sirven para indicar
el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los
otros elementos que la rodean, como texto, otras imágenes, etc.
Atributo lowsrc
Con este atributo
podemos indicar un archivo de la imagen de baja resolución. Cuando el navegador
detecta que la imagen tiene este atributo primero descarga y muestra la imagen
de baja resolución (que ocupa muy poco y que se transfiere muy rápido). Posteriormente
descarga y muestra la imagen de resolución adecuada (señalada con el atributo
src, que se supone que ocupará más y será más lenta de transferir).
Este atributo está
en desuso, aunque supone una ventaja considerable para que la descarga inicial
de la web se realice más rápido y que un visitante pueda ver una muestra de la
imagen mientras se descarga la imagen real.
Truco: Utilizar
imagenes como enlaces
Ni que decir tiene
que una imagen, lo mismo que un texto, puede servir de enlace. Vista la estructura
de los enlaces podemos muy fácilmente adivinar el tipo de código necesario:
<a
href="archivo.html"><img
src="imagen.gif"></a>
