Imágenes y multimedia

Las imágenes y los medios son contenido reemplazado en HTML: el navegador los trae de una fuente externa (una URL) y los inserta en el flujo del documento, pero su tamaño y proporciones los determina el recurso mismo, no el HTML que lo referencia. Esto los distingue de los elementos de texto, cuyos límites los fija el layout del documento.

HTML tiene cinco elementos centrales para contenido multimedia: <img> para imágenes simples, <figure> con <figcaption> para imágenes con descripción semántica, <picture> para imágenes responsivas que cambian de fuente según el viewport o la resolución, y <audio> y <video> para medios continuos. Cada uno resuelve un caso de uso diferente, y elegir el equivocado puede generar problemas de accesibilidad, rendimiento o layout shift.

El atributo alt en <img> merece especial atención: no es opcional en la práctica. Si falta, los lectores de pantalla anuncian la URL de la imagen, lo cual es inútil para el usuario. Un alt vacío (alt="") es semánticamente correcto para imágenes decorativas, y le dice al lector de pantalla que las ignore. Un alt descriptivo transforma la imagen en contenido accesible.

Cómo funciona

El triángulo img / figure / picture

<img> es el elemento base. Sus atributos más importantes son src (la URL de la imagen), alt (texto alternativo), y width/height (dimensiones en píxeles). Especificar width y height en el HTML — aunque los tamaños finales se controlen con CSS — permite al navegador reservar el espacio antes de que la imagen cargue, eliminando el layout shift (salto visual cuando la imagen aparece y empuja el contenido).

<figure> envuelve contenido autónomo con su <figcaption>: una imagen con su pie de foto, un diagrama con su descripción, un fragmento de código con su explicación. La relación entre el contenido y su descripción es semántica — no solo visual.

<picture> permite al navegador elegir entre múltiples fuentes de imagen según condiciones — tipo de formato soportado (srcset con WebP vs. JPEG), tamaño del viewport (media), o densidad de pantalla. El <img> que va dentro de <picture> es el fallback obligatorio para navegadores que no soportan <picture>.

Audio y video

<audio> y <video> siguen el mismo patrón: aceptan un atributo src directo, o elementos <source> hijos para listar múltiples formatos. El navegador reproduce el primero que soporta.

Los atributos comunes a ambos son controls (muestra los controles del navegador), autoplay (reproduce automáticamente — los navegadores modernos lo bloquean sin muted), loop y muted. Para <video>, los atributos width/height y poster (imagen previa antes de reproducir) son especialmente útiles.

Cuándo usar qué

Accesibilidad, ratio y layout shift

Tres principios que marcan la diferencia en producción:

1. Alt siempre. Si la imagen tiene información, describila. Si es decorativa, alt="". Si falta el atributo, es un error de accesibilidad.
2. Width y height en el HTML. El navegador calcula el ratio (height / width) y reserva el espacio antes de cargar la imagen. Sin estos atributos, hay layout shift — la página salta cuando la imagen aparece.
3. loading="lazy" en imágenes fuera del viewport inicial. Difiere la carga hasta que el usuario se acerca a ellas, mejorando el tiempo de carga inicial sin afectar la experiencia.

<!-- Imagen responsiva -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Vista aérea de la ciudad al atardecer"
       width="1200" height="675" loading="lazy">
</picture>

<!-- Imagen con pie de foto semántico -->
<figure>
  <img src="diagrama-flexbox.png"
       alt="Diagrama de los ejes principal y cruzado de Flexbox"
       width="600" height="300">
  <figcaption>
    El eje principal lo define flex-direction; el cruzado es perpendicular a él.
  </figcaption>
</figure>