Images, Media, and Embeds - HTML Tutorial

Images Done Right

Always include alt text, define dimensions to avoid layout shift, and use lazy loading when appropriate.

<img
  src="/hero.jpg"
  alt="Student learning HTML on a laptop"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
/>

Responsive Images

Serve the right size for each screen:

<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="Mountain landscape"
/>

Video and Audio

Video

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

Audio

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

Embeds with <iframe>

Provide a descriptive title and lazy-load when possible:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="HTML basics video"
  loading="lazy"
  allow="accelerometer; autoplay; encrypted-media; picture-in-picture"
  allowfullscreen
></iframe>

⚠️ Media Best Practices

✓ Always include alt text for meaningful images.
✓ Avoid auto-playing audio or video without user control.
✓ Compress media and use modern formats when possible.
✓ Use captions for video to improve accessibility.