Imagenes HTML

<!doctype html>
<html>
<body>
<h2>Logotipo</h2>
<img src="/logotipo.jpg" alt="Logotipo"
style="width:304px; height: 228px;">
</body>

Nota: Siempre especifica el ancho y algo de una imagen. Si no se especifican estas la imagen parpadeara mientras se carga la imagen.

Sintaxis de imágenes en HTML

En HTML, las imágenes son definidas con la etiqueta <img>. La etiqueta <img> es una etiqueta vacía, que puede contener atributos pero no tiene etiqueta de cierre.

El atributo src especifica la URL (dirección web) de la imagen:

<img src="/url" alt="algun_texto">

El atributo alt

El atributo alt especifica texto alternativo a una imagen, si la imagen no es mostrada. El atributo alt provee información adicional a una imagen para el usuario si por alguna razón no es mostrada la imagen. Algunas razones por las que no se muestra una imagen podrían ser: por una conexión baja, un error en el atributo src o si los usuarios usan un lector de pantallas.

<img src="/logo-html5.png" alt="Icono HTML5" style="width:128px;height:128px;">

El atributo alt es requerido. Una página web no se validará correctamente si esté.

Lectores de pantalla en HTML

Un lector de pantalla es un programa de software que puede leer lo que es mostrado en pantalla. Los lectores de pantalla son útiles para personas ciegas o con un grado de discapacidad visual o de aprendizaje.

Los lectores de pantalla pueden leer el atributo alt.

Tamaño de la Imagen - Ancho y Alto

Se puede utilizar el atributo style para especificar el ancho y alto de una imagen.

El valor es especificado en pixeles (use px después del valor):

<img src="/html5.gif" alt="Icono HTML5" style="width:128px; height:128px;">

Alternativamente se pueden usar los atributos width y height. Aquí los valores son especificados en pixeles por defecto.

<img src="/html5.gif" alt="Icono HTML5" width="128" height="128">

¿Width y Height ó Style?

Tanto width, height y style son validos en la última versión del estándar HTML5.

Sugerimos utilizar el atributo style. Esto evita que las hojas de estilos cambien el tamaño original de las imágenes.

Ejemplo:

<!doctype html>
<html>
<head>
<style>
img{
width:100%;
}
</style>
</head>
<body>
<img src="/html5.gif" alt="Icono HTML5" style="width:128px; height:128px;">
<img src="/html5.gif" alt="Icono HTML5" width="128" height="128">
</body>
</html>

Imágenes en otras carpetas

Si no es especificado, el navegador web busca la imagen en la misma carpeta en que se encuentra la página web. Sin embargo, es común almacenar las imágenes en una subcarpeta. Así entonces, se debe incluir el nombre de la carpeta en atributo src como a continuación se muestra:

<img src="/imagenes/html5.gif" alt="Icono HTML5" style="width:128px;height:128px;">

Imágenes en otros servidores

Algunos sitios web almacenan sus imágenes en servidores para imágenes. Actualmente, se puede accesar a imágenes desde cualquier dirección en el mundo.

<img src="http://www.exasolociones.com" alt="Imágenes Exa Soluciones">

Imágenes Animadas

El estándar GIF permite imágenes animadas:

<img src="/programas.gif" alt="Programas" style="width:48px; height:48px;">

Nota: La sintaxis para insertar imágenes animadas no es diferente a las otras imágenes.

Usando una imagen como liga

Para usar una imagen como una liga, simplemente anida una etiqueta <img> dentro de otra etiqueta <a>:

<a href="/index.php">
<img src="/sonrisa.gif" alt="Tutorial HTML5" style="width:42px;heidtht:42px;border:0;">
</a>

Nota: Agregar "border: 0;" para prevenir que navegadores como IE9 (y anteriores) muestren un borde alrededor de la imagen.

Imagen Flotante

Utilizamos la propiedad float del CSS para darle una flotación a las imágenes.

La imagen puede flotar a la derecha o a la izquierda del texto.

<p>
<img src="/sonrisa.gif" alt="Cara Feliz" style="float:right;width:42px;heidth:42px;">
La imagen flota a la derecha del texto.
</p>
<p>
<img src="/sonrisa.gif" alt="Cara Feliz" style="float:left;width:42px;heidth:42px;">
La imagen flota a la izquierda del texto.
</p>

Mapas de Imágenes

Usamos la etiqueta <map> para definir un mapa de imagen. Un "Mapa de Imagen" es una imagen con un área cliqueable.

El atributo name de la etiqueta <map> es relacionada con el atributo usemap de la etiqueta <img> creando la relación entre la imagen y el mapa.

La etiqueta <map> contiene varias etiquetas <area>, que definen las áreas cliqueables de un "Mapa de Imagen":

<img src="/planetas.gif" alt="Planetas" usemap="#mapaplanetas" style="width:145px;height:126px;">

<map name="mapaplaneta">
<area shape="rect" coors="0,0,82,126" alt="Sol" href="/sol.html">
<area shape="circle" coors="90,58,3" alt="Mercurio" href="/mercurio.html">
<area shape="circle" coors="124,58,8" alt="Venos" href="/venus.html">
</map>

Resumen del Capitulo

  • Use el elemento <img> del HTML para definir una imagen.
  • Use el atributo src del HTML para establecer la URL de una imagen.
  • Use el atributo alt del HTML para definir un texto alternativo para una imagen, si ésta no es mostrada.
  • Use los atributos weidth y height del HTML para definir el tamaño de las imágenes.
  • Use los atributos weidth y height del CSS para definir el tamaño de las imágenes (alternativamente).
  • Use la propiedad float del CSS para especificar una imagen flotante.
  • Use el elemento <map> del HTML para definir un "Mapa de Imagen".
  • Use el elemento <area> del HTML para definir las áreas cliqueables en el "Mapa de Imagen".
  • Use el atributo usemap del elemento <img> del HTML para apuntar a un "Mapa de Imagen".

Nota: La carga de imágenes toma tiempo y grandes imágenes puede lentalizar la página web. Use imágenes con esta consideraciones.