Podemos incluir imágenes en un documento HTML utilizando el elemento ‘img‘ y su atributo ‘src‘ para indicar la ruta del fichero de imagen.
Observad que el elemento ‘img‘ es un elemento vacío, por lo que se utilizará siempre sin etiqueta de cierre.
El atributo src
Con el atributo ‘src‘ (de source, fuente) se puede indicar la ruta de la imagen de forma relativa (indicando una ruta relativa al documento HTML en cuestión) o de forma absoluta (indicando la ruta completa, incluido el famoso http://). El atributo ‘src‘ es un atributo obligatorio del elemento ‘img‘.
<img src="rutaRelativa/imagen.jpg" /> <img src="http://www.rutaAbsoluta.com/imagen.gif" />
El atributo alt
Otro atributo requerido del elemento ‘img‘ es el atributo ‘alt‘ (de alternate text). La función de este atributo es la de especificar una breve descripción en texto de la imagen que se muestra.
Esta descripción es realmente útil cuando el navegador del cliente se ha configurado para no mostrar imágenes o simplemente no las soporta, ya que ese texto será el que se muestre en su lugar. Incluso si el navegador muestra las imágenes, el atributo ‘alt‘ suele ser mostrado, por ejemplo, cuando se pasa el puntero del ratón por encima de la imagen.
<img src="imagen.jpg" alt="Descripción breve de la imagen" />
Ancho y alto
Con los atributos ‘width‘ y ‘height‘ (ancho y alto) se indica el espacio que el navegador debe reservar en la página para mostrar la imagen. Aunque no son necesarios, conviene incluir dichos atributos ya que, de no existir, el navegador esperará a descargar completamente la imagen antes de seguir presentando el resto del documento.
La anchura y/o altura indicados por medio de estos atributos no tienen por qué coincidir con las de la imagen original ya que el navegador se encargará de redimensionar la imagen escalándola.
Supongamos que, como en el ejemplo que vemos a continuación, nuestra imagen mide 369×69 píxeles (ancho x alto). La imagen que utilizaremos será la del logo de la web.
- Si incluimos el atributo ‘width‘ con valor 200 y el atributo ‘height‘ con valor 100, el navegador escalará la imagen (tanto el alto como el ancho) para conseguir una imagen con esas medidas. Como estas medidas no siguen una escala proporcional a la de la imagen, esta se verá deformada por pantalla.
<img src="miImagen.gif" alt="Ejemplo 1" width="200" height="100" />
- En cambio, si incluimos únicamente el atributo ‘width‘ (o el atributo ‘height‘) con valor 200, el navegador escalará proporcionalmente la imagen para que se ajuste a ese ancho y no se deforme.
<img src="miImagen.gif" alt="Ejemplo 2" width="200" />
Alineación
Podemos indicar la alineación de una imagen con respecto al texto con el atributo ‘align‘ que puede tomar los siguientes valores: left, right y center (izquierda, derecha y centro). Aunque coloquemos la imagen en medio de un párrafo, si le añadimos un atributo ‘align‘ con valor right (por ejemplo) la imagen flotará a la derecha del texto.
<img src="imagen.jpg" alt="Mi imagen" align="right" />
Espaciado
Con el atributo ‘hspace‘ del elemento ‘img‘ podemos indicar la cantidad de espacio en blanco (o margen) que se introducirá a izquierda y derecha de la imagen. Con el atributo ‘vspace‘ podemos conseguir el mismo efecto pero para las partes superior e inferior de la imagen.
<img src="imagen.jpg" alt="Mi imagen" hspace="10" vspace="5" />
Imágenes como enlaces
Podemos convertir imágenes en hiperenlaces combinando las etiquetas ‘img‘ con etiquetas ‘a‘, es decir, incluyendo un elemento ‘img‘ dentro de otro elemento ‘a‘.
<a href="miPagina.htm"> <img src="imagen.jpg" alt="Mi imagen" border="0" /> </a>
Al hacer esto, la mayoría de los navegadores rodearán la imagen con un borde del mismo color que el resto de los enlaces de la página HTML. Para evitar esto último, introduciremos el atributo ‘border‘ con valor ‘0’, tal y como se ve en el ejemplo anterior.
