📌

Imágenes
🎴 Añadir una imagen
🎴 Imágenes distintas según el dispositivo
🎴 Imágenes y su descripción
🎴 Mapa de imagen
🎴 Añadir una imagen
La etiqueta <img src= "[url]" alt= "[description]" /> incrusta una imagen en el documento
HTML. Esta cuenta con dos atributos obligatorios: la ruta de la imagen y un texto descriptivo
que se mostrará cuando la imagen no se pueda cargar, el cual además es usado por el
motor de búsqueda.

Aunque se pueden utilizar los atributos width y height para definir el ancho y alto de la
imagen en pixeles, se prefiere hacer esto dentro de las hojas de estilo.

<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">

Los formato de imagen más utilizados son .jpg , .png , .webp , .svg y .gif .

🎴 Imágenes distintas según el dispositivo

La etiqueta <picture> permite disponer de varias imágenes que se ajusten al ancho de la
ventana según sea el caso. Este elemento debe contener una o más etiquetas <source> y
una única etiqueta <img> .
El elemento <source media= "[media-query]" srcset= "[url]" > establece una imagen para un
tamaño de ventana específico, de esta manera, el navegador buscará el primer elemento
que se ajuste al ancho de ventana actual.

El elemento <img src= "[url]" alt= "[description]" > se ubica al final y sirve de alternativa
en caso de que ninguna etiqueta <source> coincida.

Imágenes 1
 <picture>
<source media="(min-width:650px)" srcset="pink_flower.jpg">
<source media="(min-width:465px)" srcset="white_flower.jpg">
<img src="orange_flowers.jpg" alt="Flowers">
</picture>

🎴 Imágenes y su descripción
La etiqueta <figure> define cualquier unidad de contenido autónomo e independiente del
flujo principal del documento, por ejemplo, imágenes, videos, citas, fragmentos de código,
etc.

Estas unidades de contenido autónomo pueden contener un elemento <figcaption> que

añade un título descriptivo.

<figure>
<img src="bogota_city.jpg" alt="Bogotá">
<figcaption>Fig.1. Ciudad de Bogotá, Colombia.</figcaption>
</figure>

🎴 Mapa de imagen
La etiqueta <map name= "[mapname]" > establece un mapa de imagen, que consiste en una
imagen con distintos enlaces distribuidos en diferentes áreas de la imagen. El único atributo
obligatorio es name que se asocia con el elemento usemap= "[#mapname]" de una imagen para
crear una relación con el mapa.

El mapa contiene varios elementos <area> que definene las zonas en las que se puede
hacer clic dentro de la imagen asociada. Sus atributos indican la forma del área, sus
coordenadas y la dirección a la que apuntan.

Las coordenadas del área varían según su forma, ya sea un rectángulo ( x1,y1,x2,y2 ), un
círculo ( x,y,radius ) o un polígono ( x1,y1,x2,y2,..,xn,yn ).

<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.html" target="_blank">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html" target="_blank">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.html" target="_blank">
</map>

Imágenes 2