Multimedia: imágenes responsive, audio y vídeo

El problema de las imágenes en pantallas distintas

La misma foto tiene que verse bien en un móvil de 360 px y en un monitor de 2560 px. Si sirves siempre la versión gigante, el móvil descarga megas de más por una pantalla diminuta; si sirves la pequeña, en el monitor se ve borrosa como un recuerdo. Quieres lo mejor de ambos mundos, y eso son las imágenes responsive.

srcset y sizes: el navegador elige el archivo

Con srcset ofreces varias versiones de la misma imagen a distintas resoluciones, y el navegador escoge la más adecuada según la pantalla y el ancho disponible.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Atardecer sobre el mar"
/>

• srcset: lista de archivo anchoReal w. El 400w significa "este archivo mide 400 píxeles de ancho".
• sizes: le dice al navegador qué ancho ocupará la imagen en el diseño según el viewport. Aquí: a pantalla estrecha ocupa el 100 % del ancho; si no, el 50 %.
• src: queda como respaldo para navegadores antiguos.

Con ambos datos (anchos disponibles + ancho de presentación), el navegador hace la cuenta y descarga el archivo justo. Tú das las opciones; él elige por ti.

<picture>: cambiar la imagen, no solo su tamaño

srcset sirve cuando es la misma imagen a distintas escalas. Cuando quieres servir imágenes diferentes (recortes distintos, otro formato, modo oscuro) usas <picture> con varias <source>:

<picture>
  <source srcset="banner.avif" type="image/avif" />
  <source srcset="banner.webp" type="image/webp" />
  <img src="banner.jpg" alt="Banner de la campaña" />
</picture>

El navegador evalúa las <source> en orden y se queda con la primera que soporte. La <img> final no es opcional: es obligatoria, es el respaldo y es la que lleva el alt. Si la olvidas, te quedas sin red de seguridad.

Recuerda: <source> también acepta media (media="(min-width: 800px)") para elegir según el tamaño de pantalla, ideal para art direction (un recorte apaisado en escritorio y otro cuadrado en móvil).

Audio

<audio> reproduce sonido. El atributo controls muestra los botones de reproducción. Dentro puedes ofrecer varios formatos con <source>:

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg" />
  <source src="podcast.ogg" type="audio/ogg" />
  Tu navegador no soporta audio.
</audio>

El texto suelto del final se muestra solo si el navegador no entiende <audio>.

Vídeo

<video> funciona igual. Atributos útiles: controls (barra de control), width/height, poster (imagen previa) y muted/autoplay/loop.

<video controls width="640" poster="portada.jpg">
  <source src="clip.mp4" type="video/mp4" />
  <source src="clip.webm" type="video/webm" />
  Tu navegador no soporta vídeo.
</video>

Buena práctica: usa autoplay solo junto con muted (los navegadores bloquean el autoplay con sonido, y con razón) y ofrece siempre controls para que la persona pueda pausar.

⚠️ Trampa clásica: olvidar el alt en las imágenes. Sin alt, quien usa lector de pantalla solo oye "imagen" y se queda sin saber qué muestra. El alt no es decoración: es la imagen contada con palabras.