foundation

HTML media

Images, responsive images, video, audio, captions, loading behavior, and accessible alternatives.

Media markup affects accessibility, layout stability, and performance. Images need meaningful alt text and responsive sources; video and audio need controls, captions, and deliberate preload choices.

Subtopics: responsive images with `srcset`/`sizes`/`picture`; video and audio controls, captions, transcripts, and autoplay policy.

On interviews: connect alt text, CLS, lazy loading, and LCP image strategy.

Common pitfalls: decorative images with noisy alt; lazy-loading the LCP hero; autoplay with sound.

Checklist:

Alt text matches image role.
Reserve dimensions to reduce CLS.
Responsive images for bandwidth.
Captions and controls for time-based media.