Imagenes, video, audio y contenido multimedia

Imagenes en HTML

Las imagenes son fundamentales en cualquier página web. El elemento <img> permite insertar imagenes y es un elemento vacio (no tiene etiqueta de cierre).

Atributos esenciales

Toda imagen necesita al menos dos atributos:

<img src="ruta-de-la-imagen.jpg" alt="Descripcion de la imagen">

• src — La ruta o URL de la imagen
• alt — Texto alternativo que describe la imagen

El atributo alt es crucial por tres razones:

1. Accesibilidad: Los lectores de pantalla leen este texto a usuarios con discapacidad visual
2. SEO: Los motores de busqueda usan el texto alternativo para indexar imagenes
3. Fallback: Se muestra cuando la imagen no puede cargarse

Dimensiones de imagen

Siempre específica width y height en las imagenes para evitar el layout shift (salto de contenido mientras la página carga):

<img
  src="foto.jpg"
  alt="Paisaje montanoso"
  width="800"
  height="600"
>

Estos valores definen el aspect ratio que el navegador reserva antes de descargar la imagen. El CSS puede luego redimensionar la imagen, pero el espacio ya esta reservado.

Formatos de imagen

Elegir el formato correcto impacta directamente en el rendimiento:

Imagenes responsive con picture

El elemento <picture> permite servir diferentes imagenes segun el dispositivo o formato soportado:

<picture>
  <source srcset="imagen.avif" type="image/avif">
  <source srcset="imagen.webp" type="image/webp">
  <img src="imagen.jpg" alt="Descripcion" width="800" height="600">
</picture>

El navegador usa la primera fuente que soporte. El <img> final actua como fallback universal.

Carga diferida (Lazy Loading)

El atributo loading controla cuando se descarga una imagen:

<!-- Se carga inmediatamente (por defecto) -->
<img src="hero.jpg" alt="Banner principal" loading="eager">

<!-- Se carga cuando esta cerca del viewport -->
<img src="sección-3.jpg" alt="Contenido secundario" loading="lazy">

Usa loading="lazy" en imagenes que no son visibles al cargar la página. Las imagenes del hero o encabezado deben mantener loading="eager" (o no poner el atributo).

Figuras con caption

El elemento <figure> agrupa una imagen con su leyenda (<figcaption>):

<figure>
  <img src="grafico-ventas.png" alt="Grafico de barras mostrando ventas trimestrales" width="600" height="400">
  <figcaption>Ventas por trimestre en 2025. Fuente: departamento comercial.</figcaption>
</figure>

Esto es semanticamente correcto y ayuda a los motores de busqueda a asociar la leyenda con la imagen.

Video en HTML

El elemento <video> permite incrustar video directamente sin necesidad de plugins:

<video controls width="640" height="360" poster="miniatura.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>Tu navegador no soporta video HTML5.</p>
</video>

Atributos importantes de <video>:

• controls — Muestra los controles de reproduccion
• poster — Imagen de miniatura antes de reproducir
• preload — none, metadata, o auto
• autoplay — Reproduce automaticamente (requiere muted)
• muted — Silenciado por defecto
• loop — Reproduce en bucle

Audio en HTML

El elemento <audio> funciona de forma similar a <video>:

<audio controls preload="metadata">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Contenido incrustado con iframe

El elemento <iframe> permite incrustar contenido externo como videos de YouTube o mapas:

<iframe
  src="https://www.youtube.com/embed/abc123"
  width="560"
  height="315"
  title="Tutorial de HTML básico"
  allow="accelerometer; autoplay; clipboard-write"
  allowfullscreen
  loading="lazy"
></iframe>

Siempre agrega el atributo title a los iframes para la accesibilidad.

Práctica

1. Inserta imagenes con buenas prácticas: Agrega 3 imagenes a una página: una informativa con alt descriptivo, una decorativa con alt="", y una dentro de un <figure> con <figcaption>. Incluye width y height en todas.
2. Usa el elemento picture: Crea un <picture> que sirva una imagen WebP como fuente principal y un JPG como fallback, adaptandose a distintos tamanos de pantalla con media.
3. Anade un video con fallback: Inserta un <video> con controls, poster, dos formatos de <source> (webm y mp4) y un mensaje de texto para navegadores que no soporten video.

En la siguiente leccion aprenderemos a organizar datos en tablas HTML.