Multimedia & Embedding

<picture> Element vs <img srcset>

<picture> allows multiple sources with media queries for art direction:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description">
</picture>

Use <picture> when you need different crops or formats per breakpoint. Use srcset + sizes on <img> for simple resolution switching.

<track> Element for Video Subtitles

<video controls width="640" height="480">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English" default>
</video>

Track kind Values

Value	Purpose
subtitles	Translation of dialogue
captions	Dialogue + sound effects (for deaf/hard of hearing)
descriptions	Audio descriptions of visual content
chapters	Navigation chapters
metadata	Machine-readable data (not displayed)

srcset + sizes for Responsive Images

<img
  srcset="image-480w.jpg 480w, image-800w.jpg 800w, image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
  src="image-800w.jpg"
  alt="Description"
/>

The browser picks the best image based on viewport width and pixel density.