Imágenes

Puede que nuestro contenido necesite imágenes para llegar al usuario o puede que queramos aligerar la ágina o hacerla más atractiva con el uso de alguna fotografía o dibujo. En el estándrad HTML 5 la inclusión de imágnes sigue siendo muy simple, basta con usar la etiqueta <img> con los atributos adecuados para mostrar correctamente una imagen en la página.

Los atributos específicos de este elemento son pocos (apare de los globales como class y style)

Atributo	Valor	Uso
alt	text	Texto alternativo a la imagen. Indispensable
aspect-ratio	width/height	Controla la relación ancho:alto (w/h) de la imagen
crossorigin	código	Se usa para imágenes de otro sitio utilizable en el canvas
height	pixels	Alto de la imagen
ismap	ismap	Para imágnes usadas en mapas con soporte servidor
longdesc	URL	Un URL donde se da un descripción detalaldo de la imagen
sizes	pixels	Tamaños adaptaos al medio de visaulización
src	URL	URL de la imagen. Indispensable
srcset	URL	Imágenes alternativas
title	texto	Es un atributo global. Permite que al situar el ratón sobre la imagen se muestre un texto.
usemap	#mapname	Hace que la imagen se usa en un mapa de lado cliente
width	pixels	Ancho de la imagen

Como ves HTML 5 enriquece este elemento y elimina algunos atributos, como las alineaciones y espacios alrededor, que ahora se han sustituido por reglas de estilos CSS.

Los atributos iimprescindibles con src y alt. Si no indicas alto y ancho, el navegador usa el tamaño original de la imagen.

Si como tamaño de la imagen usas un porcentaje respeto contenedor donde se encuentra verás que puedes hacer que la imagen nunca se salga de la pantlla aunque la veas en un móvil. Pruébalo son este código

<img src="/imgs/arboles.webp" alt="Logo de HTML5" style="width:100%">



Si pruebas este código verás que al cambiar el tamaño de la ventana (moviendo la barra central) la imagen se adapta al nuevo tamaño. Si no quieres que supere su tamaño original y pierda calidad, puedes usar además el estilo max-width. Le pones el ancho real de la imagen y su tamaño no pasará de ese valor. El atributo height (la altura) no está puesto, por defecto es auto, es decir se adapta al ancho.

Para señalar el ancho y alto dipones también de la relación de aspecto (aspect-ratio) que te permite poner la relación entre ancho y alto de la imagen, asçi al colocar el ancho automáticametne se calcula el alto. La forma de escribirlo es bien fácil aspect-ratio: 16/9

<img src="/imgs/layout.jpg" alt="Logo de HTML5" style="width:200px; aspect-ratio: 133/83">



En este ejemplo puedes comprobar que al cambiar el ancho o el alto la proporción se mantiene

 

Aunque no es exclusivo para imágenes, el elemento figure se adapta muy bien a mostrar imágenes con un texto al pie sin complicar el diseño con combinaciones de bloques.

Este elemento es un contenedor compuesto o sea que contiene otros elementos: usamos uno para una imagen y un espacio para el comentario de la imagen (el pie de foto). Puede contener elementos de HTML anidados. No deja de ser un bloque.

<figure>
<img src="/imgs/arboles.webp" alt="Logo de HTML5" style="width:100%">
<figcaption style="text-align:center">
Usa un book, salva un árbol </figcaption>
</figure>


No es exlcusivo de imágenes, en lugar de img podemos poner lo que queramos: un bloque div, una tabla, un texto, un video. El apartado figcaption es el que podemos usar para colocar un texto referente en este caso a nuestra imagen. Este elemento ùede aparecer también araiba de la imagen si lo ponemos inmeddiatematen despues de la etiqueta <figure>. Incluso se pueden colocar dos uno arriba y otro abajo, amodo de título y pie.

<figure style="width:200px">
<figcaption style="text-align:center">Los árboles: la vida</figcaption>
<img src="/imgs/arbolespeq.webp" alt="Logo de HTML5">
</figure>

Prueba con los ejemplos a poner un título y un pie de foto en el mismo cuadro figure.

Como te digo más arriba figure puede contner cualquier elemento de HTML, es aconsejable para esquemas, códigos, notas tipo postit o en general cualqueir elemento al que pueda hacerse referencia desde otro lugar como una índice o table de contenido. Además su estructura de bloque hace que pueda cambiarse posición sin alterar el flujo de la página. Los ejemplos de código de este tutor son elementos figure.

Uno de los usos del elemento picture es seleccionar la imagen según el formato aceptado por el navegador. Este elemento es un contendor con elementos hijos

• source: imagenes optativas en función del formato y/o el tamaño de visor disponible
• type: tipo mime para esta imagen. Vale para tipos de imágenes.
• media, srcset : imágenes según comdición de medios (lo vemos en imágenes responsive)
• img: imagen por defecto si no existe una imagen adecuada entre los elementos source

Básicamente se trata de indicar imágnes alternativas para diferentes formatos. Por ejemplo

​<picture>
<source srcset="/imgs/user.svg" type="image/svg+xml">
<img src="/imgs/logo.png" alt="milogo" style="width:200px">
</picture>


En este ejemplo el navegador mostrará la imagen user.svg si soporta el formato SVG de imágenes. Si no lo soporta mostrará la imagen por defecto indicada en el elemento <img>. Como ves se trata de declarar un tipo MIME y la imagen correspondiente. Para comprobasr como funciona, en la ventana de prueba cambia el type por cualquier tipo o texto (type="image/algo") y verás como muestra el logo.