Imágenes

La etiqueta de imagen <img>, es recomendable especificar el ancho y alto de cada imagen. También especificar un titulo alternativo para mayor accesibilidad.

<img src="example.jpg" width="400" height="300" alt="texto alt"/>

Carga diferida #

Puedes diferir la carga de las imágenes utilizando el atributo loading, de esta manera, las imágenes solo cargaran cuando estén próximas a ser vistas. No utilices la carga diferida si la imagen está muy arriba en el contenido.

<img loading="lazy" src="example.jpg"/>

Imagen con descripcion #

Puedes especificar una descripcion a las imágenes utilizando las etiquetas <figure> y <figcaption> como se muestra a continuación:

<figure>
  <img src="example.jpg"/>
  <figcaption>Name or text of the photo</figcaption>
</figure>

Alinear imágenes #

Puedes alinear imagines hacia la derecha, izquierda o centro utilizando las clases alignleft, alignright y aligncenter como se muestra a continuación:

<img class="alignleft" src="example.jpg"/>

<img class="alignright" src="example.jpg"/>

<img class="aligncenter" src="example.jpg"/>

<figure class="aligncenter">
  <img src="example.jpg"/>
  <figcaption>Name or text of the photo</figcaption>
</figure>

Imágenes de ancho completo #

Puedes forzar el tamaño a la imagen a ocupar todo el ancho disponible utilizando la clase alignfull como se muestra a continuación:

<img class="alignfull" src="example.jpg"/>

Imágenes estilo cover #

Puedes convertir una imagen con descripcion en un fondo con texto, para ello se emplea la clase has-cover como se muestra a continuación:

<figure class="has-cover">
  <img src="example.jpg"/>
  <figcaption>Name or text of the photo</figcaption>
</figure>