Imágenes en HTML

Antes de comenzar con el código para incrustar imágenes en tu web debes conocer cuales son los formatos que muestran los principales navegadores y cual es el apto para tu web. A continuación te dejo una lista con los 3 principales formatos de imagen que se utilizan en la red:

• JPG = Son imágenes digitales comprimidas con pérdida de información, pero permiten tener imágenes digitales que ocupen poco espacio.
• GIF = Formato para imágenes de mapas de bits las cuales soportan 8 bits por pixel. El formato GIF soporta imágenes animadas.
• PNG = Formato de imagen en mapa de bits que emplea compresión de datos sin pérdida de información. No requieren de licencia de patente. Es un formato creado para utilizar imágenes en Internet con un tamaño adecuado y además permiten transparencia.

Ejemplos de tipos de imágenes:

JPG	GIF	PNG

¿Cómo agregar imágenes a tu web utilizando HTML?

La etiqueta que se utiliza para este propósito es <img/> a la cual se le agrega el atributo por defecto src que es donde se agrega la url de tu imagen en cualquiera de los formatos anteriormente mencionados. A continuación te dejo el código completo (este html deja la imagen en su tamaño original por defecto).

<img src="url"/>

Para obtener la url de tus imágenes las puedes subir a tu hosting o existen muchos sitios donde las puedes alojar, aunque recuerda que en algún momento se perderán, por esto siempre es mejor un hosting de paga.

Atributos de la etiqueta img

Al HTML anterior podemos agregar atributos para mejorar la visualización y seo de la imágenes que agreguemos a cada página, a continuación te detallo las más relevantes:

• width = Permite definir un ancho especifico en pixeles o porcentaje para la imagen. Recomiendo utilizar 100% para que se adapte a cualquier dispositivo.
• height = Define un alto especifico en pixeles y porcentaje para la imagen.
• alt = es una descripción textual de la imagen que se muestra solo cuando hay problemas para cargar la imagen. Este atributo ayuda a posicionar tu web.
• title = Permite mostrar un texto en la imagen cuando se pone el cursor sobre esta.
• loading = “lazy” permite la carga diferida de tus imágenes para mejorar velocidad de carga en tu web.

Tus imágenes no siempre deben contener estos atributos, si son solo decorativas y no aportan al contenido que se este mostrando en la página, puedes omitir las incrustación de cualquiera de los anteriores atributos. A continuación te presento un ejemplo en código y el resultado de la imagen con todos los atributos anteriores:

<img loading="lazy" src="url" width="300" height="300" title="Titulo de demostración" alt="Texto que se muestra si la imagen no carga" />

Resultado con carga de imagen funcionando:



Resultado sin carga de imagen:

Agregar un pie a las imágenes

Para agregar una descripción bajo la imagen o pie de la misma debes utilizar el elemento <figure> que también se puede utilizar en audios, vídeos, iframe o cualquier código HTML donde necesites una descripción. Luego debemos escribir el pie de página dentro de la etiqueta <figcaption> , a continuación te presento un ejemplo con el debido código a insertar:

<figure>
<img alt="Texto que se muestra si la imagen no carga" height="300" loading="lazy" src="url" title="Titulo de demostración" width="300" />
  <figcaption>Aquí se escribe el texto para el pie de la imagen</figcaption>
</figure>

Ejemplo:

Aquí se escribe el texto para el pie de la imagen

Puedes agregar otros atributos a tu imágenes, pero más adelante te lo explicare con CSS así que aquí termina el capitulo de las imágenes en HTML.

Más del Curso de HTML:

1. Introducción
2. Enlaces
3. Tablas
4. Listas
5. Imágenes (estás aquí)
6. Formularios (solo la arquitectura con HTML)
7. Layout
8. Extra: Atributo HTML LazyLoading Nativo