Uso de imágenes en HTML

Las imágenes son herramientas visuales poderosas en los sitios web. HTML nos permite mostrarlas con una sintaxis muy simple, pero es importante entender cómo funcionan todos los atributos relacionados.

Uso de la etiqueta <img>

Para insertar imágenes usamos el elemento <img>. Es una etiqueta auto-cerrada que debe incluir al menos los atributos src y alt.

<img src="https://via.placeholder.com/150" alt="Example image">

El papel del atributo alt

El atributo alt (texto alternativo) describe la imagen en caso de que no se cargue o cuando el usuario usa un lector de pantalla. Siempre proporciona una descripción significativa y concisa.

Insertar imágenes locales

Puedes usar imágenes almacenadas dentro de tu proyecto, no solo externas. Por ejemplo, si tienes una carpeta llamada 'images', puedes acceder a ellas así:

<img src="images/logo.png" alt="Company logo">

Definir ancho y alto

Los atributos width y height controlan el tamaño de la imagen. Puedes usar píxeles o porcentajes. Es importante mantener la relación de aspecto.

<img src="photo.jpg" alt="Photo" width="300" height="200">

Atributo title

El atributo title es útil para mostrar un mensaje emergente (tooltip) cuando el cursor pasa por encima de la imagen.

<img src="image.jpg" alt="Description" title="This is an image">

Redimensionar imágenes con hojas de estilo

CSS facilita el redimensionamiento de imágenes. Para ajustar una imagen al ancho de su contenedor padre, puedes usar la siguiente configuración:

<img src="photo.jpg" alt="Resized image" style="width: 100%; height: auto;">

Formatos de imagen (JPG, PNG, GIF, WebP)

Existen varios formatos de imagen para distintos casos de uso. JPG es bueno para fotos, PNG admite transparencia, GIF permite animaciones y WebP es un formato moderno, comprimido y de carga rápida.

Accesibilidad e imágenes

Asegúrate siempre de que las imágenes no sean solo decorativas, sino que aporten contenido. Usar el atributo alt es crucial para la experiencia del usuario y la accesibilidad.