Imágenes HTML

Las imágenes pueden mejorar el diseño y la apariencia de una página web.

Ejm

<img src="pic_trulli.jpg" alt="Italian Trulli">

Sintaxis para imágenes HTML

En HTML, las imágenes son definidas mediante la etiqueta <img>. La etiqueta <img> está vacía, y contiene atributos únicamente, y no tiene una etiqueta de cierre. El atributo src especifica la URL (dirección web) de la imagen.

Sintaxis

<img src=”url>

El atributo alt

El atributo alt provee un texto alternativo para la imagen, si el usuario, por el motivo que sea no puede ver dicha imagen, verá el valor del atributo alt, que debe describir la imagen.

Ejm

<img src="img_chania.jpg" alt="Flowers in Chania">

Si un navegador no puede encontrar una imagen, mostrará el valor del atributo alt.

Nota: Se requiere el atributo alt. Una página web no se validará correctamente sin ella.

Tamaño de la imagen, width y height

Puedes usar el atributo style para especificar el ancho y alto de una imagen.

Ejm

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternativamente, puedes usar los atributos width y height para especificar el ancho y alto de una imagen.

Ejm

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Los atributos width y height siempre definen el ancho y alto de la imagen en pixeles.

Nota: Especifica siempre el ancho y el alto de una imagen. Si no se especifican el ancho y el alto, la página puede parpadear mientras se carga la imagen.

width y heigh o style?

Los atributos width, height y style son válidos en HTML, sin embargo, sugerimos utilizar el atributo style, evita que las hojas de estilo cambien el tamaño de las imágenes.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
img { 
  width: 100%; 
}
</style>
</head>
<body>

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

</body>
</html>

Imágenes en otra carpeta

Si no se especifica, el navegador espera encontrar la imagen en la misma carpeta que la página web. Sin embargo, es común almacenar imágenes en una subcarpeta. Luego debes incluir el nombre de la carpeta en el atributo src.

Ejm

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

Imágenes en otro servidor

Algunos sitios web almacenan sus imágenes en servidores de imágenes. Actualmente puedes acceder a imágenes desde cualquier web del mundo.

Ejm

<img src="https://websarrolladores.com/images/websarrolladores.jpg" alt="Websarrolladores">

Imágenes animadas

HTML permite imágenes animadas.

Ejm

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Imágenes como un link

Para usar una imagen como link, pon la etiqueta <img> dentro de la etiqueta <a>, como en el siguiente ejm.

Ejm

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Imagen flotante

Usa la propiedad CSS float para dejar que la imagen flote a la derecha o a la izquierda de un texto.

Ejm

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Lectores de pantalla HTML

Un lector de pantalla es un programa de software que lee el código HTML, convierte el texto y permite al usuario “escuchar” el contenido. Los lectores de pantalla son útiles para personas con discapacidad visual o discapacidades de aprendizaje.

Resumen

  • Usamos la etiqueta <img> para definir una imagen.
  • Usamos el atributo HTML src para definir la URL o ruta de la imagen.
  • Usamos el atributo alt para definir un texto alternativo para una imagen, si ésta no puede ser mostrada.
  • Usamos los atributos width y height para definir el tamaño de una imagen.
  • Usamos las propiedades CSS width y height para definir el tamaño de una imagen, se recomienda este método antes que el anterior de utilizar los atributos directamente.
  • Usamos la propiedad float para mostrar la imagen en modo flotante.

Cargar imágenes lleva tiempo. Las imágenes grandes pueden ralentizar su página. Usa las imágenes con cuidado.

Etiquetas HTML de imágenes

Etiqueta Descripción
<img> Define una imagen
<map> Define un mapa de imagen
<area> Define un área en la que se puede hacer clic dentro de un mapa de imagen
<picture> Define un contenedor para múltiples recursos de imagen

Ejm con <map> y <area>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Ejm con <picture>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1>The picture element</h1>

<p>Resize the browser window to load different images.</p>

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>