Cuarta clase: Imágenes

Etiqueta <img>

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.
Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a través del atributo src.

Por ejemplo, para insertar la siguiente imagen:

Se escribe:

<img src="imagenes/logo_animales.gif">

Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento).
Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imágenes, o una carpeta destinada a almacenar archivos de audio, otra para los archivos javascript, otro para los estilos (css), etc.

Los formatos de imágenes recomendados para la web son JPG en el caso de fotos o imágenes con distintos colores, el PNG cuando son imágenes con grandes superficies del mismo color, por ejemplo logos. El formato PNG está sustituyendo al fomato GIF. El formato GIF usa un sistema de compresión patentado y por lo tanto fue dejándose de lado por posibles problemas legales.

Evitar usar imágenes en formato BMP. Este formato tiene muy poca o ninguna compresión y genera archivos muy grandes. Eso demora la carga del sitio web. Las imágenes deben ser cuidadosamente calculadas para que el navegar por ellas no haga que el usuario abandone el sitio.

La imagen empeora a medida que aumenta la compresión. Los programas que se utilizan para la manipulación de imágenes permiten exportar en formatos adecuados para la web. En particular Photoshop.
Este software nos dice además que tamaño tendrá la imagen luego de su transformación.

Mediante atributos es posible decirle a la imagen qué tamaño ocupará dentro de la web. Es importante que ese tamaño no difiera mucho del tamaño real de la imagen, de otro modo puede desperdiciarse espacio en disco y ancho de banda en una imagen que se ve pequeña o distorsionar.

Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que se desee, gracias al atributo alt.
Por ejemplo, queremos mostrar una imagen gatito.gif, con el texto alternativo "Imagen gato". Esto se obtiene con este código HTML

<img src="gatito.gif" alt="Imagen gato" >

Esto sirve con el doble propósito de mostrar un texto en lugar de la imagen cuando se usa un navegador que no muestra imágenes (por ejemplo lynx) o cuando la imagen no está disponible por alguna razón, en ambos casos se mostrará "Imagen gato". Si se deja el cursor sobre la imagen, aparece el texto arternativo, esto es útil para los invidentes y por lo tanto mejora la accesibilidad del sitio.

Ejercicio:

Hacer que se muestre esta imagen:

Y que tenga el atributo "alt" 

Utilizar una carpeta "imagenes" (sin acento) para guardarla.

Otros atributos de la etiqueta <img>

Se le puede asignar un borde con el atributo "border", el valor de este atributo es el ancho en pixels, por ejemplo:

<img src="imagenes/logo_animales.gif" border="4" >

Tamaño de una imagen


Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original, pero por diversos motivos puede interesarnos modificar dicho tamaño.
A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen en el navegador.
El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de % cuando se desee que sea en porcentaje con respecto a la página.
Por ejemplo, para insertar la siguiente imagen (cuyo tamaño original era de 122 píxeles de anchura y 71 píxeles de altura) con 200 píxeles de anchura y 80 píxeles de altura:

<img src="imagenes/logo_animales.gif" width="200" height="80">


Enlace con imagen

<a href="http://www.cursodesarrolloweb-ifee.blogspot.com" target ="_blank" ><img src="imagenes/logo_animales.gif" border="4" ></a>

Genera una imagen con un enlace.
¿Cómo hacer que la imagen no tenga borde?

Alineación de una imagen

La alineación de las imágenes se establece a través del atributo align. Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.
Los valores del atributo align son los siguientes:

Valor	Significado	Ejemplo
absbottom	inferior absoluta	Imagencon texto
absmiddle	medio absoluta	Imagencon texto
baseline	línea de base	Imagencon texto
bottom	inferior	Imagencon texto
left	izquierda	Imagencon texto
middle	medio	Imagencon texto
right	derecha	Imagencon texto
texttop	texto superior	Imagencon texto
top	superior	Imagencon texto