Imágenes, Medios e Incrustaciones - Tutorial HTML

Imágenes Bien Hechas

Siempre incluye texto alt, define dimensiones para evitar cambios de layout y usa carga diferida cuando sea apropiado.

<img
  src="/hero.jpg"
  alt="Estudiante aprendiendo HTML en una laptop"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
/>

Imágenes Responsivas

Sirve el tamaño correcto para cada pantalla:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Paisaje de montaña"
/>

Video y Audio

Video

<video controls width="600" poster="/thumb.jpg">
  <source src="intro.mp4" type="video/mp4" />
  <track kind="captions" src="captions.vtt" srclang="es" />
</video>

Audio

<audio controls>
  <source src="theme.mp3" type="audio/mpeg" />
</audio>

Incrustaciones con <iframe>

Proporciona un título descriptivo y usa carga diferida cuando sea posible:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Video de conceptos básicos de HTML"
  loading="lazy"
  allow="accelerometer; autoplay; encrypted-media; picture-in-picture"
  allowfullscreen
></iframe>

⚠️ Mejores Prácticas de Medios

✓ Siempre incluye texto alt para imágenes significativas.
✓ Evita la reproducción automática de audio o video sin control del usuario.
✓ Comprime medios y usa formatos modernos cuando sea posible.
✓ Usa subtítulos para video para mejorar la accesibilidad.