- 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
Ejemplo
<img src="mifoto.jpg" />- En el atributo src acepta tanto rutas absolutas como relativas
Ejemplo
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
Ejemplo:
<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
Ejemplo:
<img src="programando.jpg" title="¡Programando en JS!" />- 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
Ejemplo:
<figure>
<img src="programando.png">
<figcaption>¡Programando sin parar!</figcaption>
</figure>