Imagenes

  • En HTML podemos utilizar la etiqueta img como contenedor de una imagen
  • Dado que no tiene contenido es un tipo de etiqueta que tiene apertura y cierre en una sola etiqueta
  • Para establecer el contenido del contenedor utilizamos el atributo src que significa source o fuente
  • Esta etiqueta es un elemento en linea es decir que podemos poner uno al lado del otro
  • Por defecto el contenedor va a tomar el tamaño original de la imagen
  • Al trabajar en web siempre tratamos de optimizar las imagenes para que pesen lo menos posible
  • Encontramos diferentes tipos de imagenes: jpg, png y gif entre otras
  • Optimización de la imagen - Developers Google
<img src="mifoto.jpg" />
  • En el atributo src acepta tanto rutas absolutas como relativas
Imagenes con rutas relativas:
<img src="imagenes/mifoto.jpg" />
Salgo de una carpeta, entro a la carpeta imágenes y busco el archivo mifoto.jpg
<img src="../imagenes/mifoto.jpg" />
Imagen con ruta absoluta:
<img src="http://images6.fanpop.com/image/photos/39500000/il-570xN-917420114-2kdu-rick-and-morty-39567961-300-370.jpg" />
  • Utilizando los atributos height para la altura y width para el ancho podemos establecer el tamaño que queremos que tenga el contenedor.
  • Si no utilizamos bien las proporciones podemos hacer que la imagen se vea mal
  • Podemos establecer un número como valor de estos atributos y la unidad de medida es en pixel
<img src="mifoto.jpg" height="300" width="300" />
  • El atributo alt nos permite establecer un texto que describa la imagen.
  • Este atributo lo utilizan los lectores de pantalla o es el mensaje que vemos cuando no se puede cargar la imagen
  • Es una buena práctica describir nuestras imagenes con este atributo
<img src="programando.jpg" alt="En esta foto estoy programando" />
  • También existe un atributo llamado title que nos permite agregar más información sobre la imagen
  • Algunos browsers muestran un cartelito o tooltip al pasar el mouse sobre la imagen
<img src="programando.jpg" title="¡Programando en JS!"  />

Foto con detalle

  • Muchas veces necesitamos mostrar una imagen con un detalle, para esto HTML5 incorpora los elementos figure y figcaption
  • Como contenido de figure podemos poner una imagen o más imagenes
  • Utilizamos figcaption para establecer el detalle de la/s imagen/es
  • Con varios de estos elementos podemos crear una especie de galería de imagenes
  • Los browsers más viejos no saben renderizar estos elementos y simplemente muestran el contenido
  • Para saber el nivel de soporte de HTML5 de nuestro browser podemos utilizar el siguiente sitio
<figure>
  <img src="programando.png">
  <figcaption>¡Programando sin parar!</figcaption>
</figure>
Edit this page