Una vez conocidos los tipos de imágenes disponibles para incrustar en una página web y la manera de optimizarlas, el paso siguiente es incrustarlas en nuestros proyectos.
Etiqueta HTML <figure></figure>
La etiqueta figure es contenedora de la etiqueta imagen y su función simplemente es indicarle al navegador que el contenido que está dentro de ella se trata de una imagen.
Por lo tanto, la etiqueta figure es semántica y es muy buena práctica utilizarla, pues le gusta tanto a navegadores como a los motores de búsqueda.
Etiqueta HTML <figcaption></figcaption>
Dentro de la etiqueta figure puede ir otra etiqueta que se escribe de la siguiente manera: <figcaption>Texto</figcaption>
Esta etiqueta permite agregarle a la imagen un texto en el pie de la imagen, este texto puede ser una atribución de derechos de autor o el texto que necesite ser mostrado en el pie.
Ejemplo de aplicación de una etiqueta figure
<figure><figcaption>Imagen de escuelawow</figcaption></figure>Etiqueta HTML <img>
La etiqueta img se escribe de la siguiente manera: <img>.
Como puedes notar, la etiqueta HTML de imagen no tiene etiqueta de cierre.
Atributos de la etiqueta HTML <img>
Esta etiqueta posee dos atributos que son fundamentales para poder incrustar en el documento HTML correctamente la imagen.
Atributo src. Este atributo es obligatorio porque indica la ubicación donde el navegador debe encontrar la imagen para poderla incrustar. Las imágenes se pueden cargar a nivel interno, dentro de los archivos de nuestro proyecto o a través de una url externa.
Atributo alt. Este atributo HTML es opcional, sin embargo la considero obligatoria, por las siguientes razones:
- Cuando la imagen no carga en el navegador por alguna razón, se muestra un ícono como de documento roto pero muestra el texto que se ha insertado en el atributo alt. (Normalmente el error está entre la silla y el equipo de cómputo).
- Internet también lo usan personas con dificultades visuales, entonces, al tener texto en este atributo les informamos a través de texto una breve descripción de la imagen. Personas completamente ciegas navegan por internte con la ayuda de un asistente de voz que les informa el contenido que está mostrándose en pantalla.
- El atributo alt es muy bueno para el posicionamiento SEO, muchas personas pueden encontrar nuestro proyecto en internet a través de las imágenes; entonces, si proporcionamos la descripción de las imágenes tenemos otra posible fuente de tráfico.
Ejemplo de inserción de la etiqueta img en una página web
<img src=”gatitos.jpg” alt="En la imagen hay dos gatitos jugando en un patio. Uno café y otro gris.">Ejemplo completo de aplicación de las etiquetas HTML img y figure
<figure>
<img src="./gatitos.jpg" alt="En la imagen hay dos gatitos jugando en un patio. Uno café y otro gris.">
</figure>En resumen
Incrustar adecuadamente imágenes en nuestros proyectos proporciona muchos beneficios para la carga y visualización de nuestro proyecto, además los navegadores interpretarán mucho mejor el contenido de nuestras etiquetas HTML.
La etiqueta figure al ser contenedora, es semántica. Esto es bueno para la interpretación de la página web y para el SEO.
En GitHub he subido una carpeta con los archivos de esta guía definitiva para incrustar imágenes en archivos HTML.