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
Figure: Fotos con pie y título
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 e-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.
No es un bloque exclusivo para imágenes, es utilizable para videos, bloques div, tablas.. Y facilita poner un texto al pie.
Picture: adaptar las imágenes
- 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.