Content and media · Lesson 9 of 16
Responsive images and media
picture, audio, video and text alternatives.
8 minutes1 games
picture selects an image source using media conditions, with img providing fallback and alternative text. Audio and video need controls, and spoken video needs captions and an appropriate transcript. srcset and sizes help the browser choose an image resolution for its displayed size.
HTML
<picture> <source media="(min-width: 700px)" srcset="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='150'%3E%3Crect width='600' height='150' fill='teal'/%3E%3C/svg%3E"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150'%3E%3Crect width='240' height='150' fill='coral'/%3E%3C/svg%3E" alt="" width="240" height="150"> </picture> <p>Resize the preview to switch the decorative image.</p>
| Tool | Use |
|---|---|
| Playback controls |
| Captions for speech and sound |
| Defer offscreen images |
Exercise
Create a video with controls, a lesson.mp4 source and an English captions track.
HTML
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.