Las imágenes pueden se pueden considerar el segundo medio más importante en la Web. HTML incluye los siguientes elementos para introducir imágenes en nuestros documentos.
<img>—Este elemento inserta una imagen en el documento. El elemento requiere del atributo src para especificar la URL del archivo con la imagen que queremos incorporar.
<picture>—Este elemento inserta una imagen en el documento. Trabaja junto con el elemento <source> para ofrecer múltiples imágenes en diferentes resoluciones. Es útil para crear sitios web adaptables, como veremos en el Capítulo 5.
<figure>—Este elemento representa contenido asociado con el contenido principal, pero que se puede eliminar sin que se vea afectado, como fotos, vídeos, etc.
<figcaption>—Este elemento introduce un título para el elemento <figure>.
Para incluir una imagen en el documento, solo necesitamos declarar el elemento <img> y asignar la URL del archivo al atributo src.
El código del Listado carga la imagen del archivo miimagen.jpg y la muestra en pantalla en su tamaño original.
La imagen se representa en su tamaño original, pero podemos definir un tamaño personalizado y algunos parámetros de configuración usando el resto de los atributos disponibles para el elemento <img>.
width—Este atributo declara el ancho de la imagen.
height—Este atributo declara la altura de la imagen.
alt—Este atributo especifica el texto que se muestra cuando la imagen no se puede cargar.
srcset—Este atributo nos permite especificar una lista de imágenes de diferentes resoluciones que el navegador puede cargar para el mismo elemento.
sizes—Este atributo especifica una lista de media queries (consulta de medios) junto con distintos tamaños de imágenes para que el navegador decida qué mostrar según la resolución de la pantalla. Estudiaremos media queries y diseño web adaptable en el Capítulo 5.
crossorigin—Este atributo establece las credenciales para imágenes de origen cruzado (múltiples orígenes). Los valores posible son anonymous (sin credenciales) y use- credentials (requiere credenciales).
Los atributos width y height determinan las dimensiones de la imagen, pero no tienen en cuenta la relación. Si declaramos ambos valores sin considerar la proporción original de la imagen, el navegador deberá estirar o achatar la imagen para adaptarla a las dimensiones definidas. Para reducir la imagen sin cambiar la proporción original, podemos especificar uno solo de los atributos y dejar que el navegador calcule el otro.
El código en el Listado agrega el atributo width con el valor 150 al elemento <img> introducido en el ejemplo anterior. Esto reduce el ancho de la imagen a 150 píxeles, pero como el atributo height no se ha declarado, la altura de la imagen se calcula automáticamente considerando las proporciones originales de la imagen.
Algunas imágenes, como los iconos, son importantes porque otorgan un significado al resto del contenido, pero otras, como la imagen de estos ejemplos, actúan como complemento y se pueden eliminar sin que afecten al flujo de información. Cuando esta clase de información se encuentra presente, se puede utilizar el elemento <figure> para identificarla. Este elemento se suele implementar junto con el elemento <figcaption> para incluir texto descriptivo. En el siguiente ejemplo usamos estos dos elementos para identificar nuestra imagen y mostrar su título al usuario.
Por defecto, los navegadores asignan márgenes laterales al elemento <figure>.
