Las imágenes en HTML se insertan utilizando la etiqueta <img>. Esta etiqueta es auto-cerrada y no tiene una etiqueta de cierre. Las imágenes se utilizan para mejorar el contenido visual de una página web, proporcionar información visual y enriquecer la experiencia del usuario.
Sintaxis Básica
<img src="URL-de-la-imagen" alt="Texto alternativo" />src: Atributo obligatorio que especifica la URL de la imagen. Puede ser una ruta relativa (dentro del mismo sitio) o una URL absoluta (fuera del sitio)
alt: Atributo obligatorio que proporciona un texto alternativo para describir la imagen. Este texto es importante para la accesibilidad y se muestra en caso de que la imagen no se cargue.
Ejemplos de Imágenes
Imagen desde una URL externa:
<img src="https://www.example.com/imagen.jpg" alt="Descripción de la imagen" />Imagen desde una ruta local:
<img src="imagenes/ejemplo.jpg" alt="Descripción de la imagen" />Imagen con dimensiones específicas: Puedes especificar el ancho y alto utilizando los atributos width y height, aunque es recomendable hacerlo a través de CSS para una mayor flexibilidad.
<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200" />Imagen con atributos CSS en línea:
<img src="imagen.jpg" alt="Descripción de la imagen" style="width: 300px; height: 200px;" />Imagen como enlace:
Puedes usar una imagen dentro de un enlace para que, al hacer clic en la imagen, el usuario sea redirigido a otra página.
<a href="https://www.example.com">
<img src="imagen.jpg" alt="Descripción de la imagen" />
</a>Atributos Adicionales
title: Proporciona información adicional sobre la imagen, que aparece como un tooltip cuando el usuario pasa el cursor sobre ella.
<img src="imagen.jpg" alt="Descripción de la imagen" title="Texto del tooltip" />loading: Atributo que especifica el comportamiento de carga diferida de la imagen. Los valores comunes son:
lazy: Retrasa la carga de la imagen hasta que esté cerca de entrar en el viewport del usuario, lo que puede mejorar el rendimiento.
<img src="imagen.jpg" alt="Descripción de la imagen" loading="lazy" />