0:00 / 7:31
Chapter 1 · Why the browser needs help
Chapters
Keyboard
- Space Play or pause
- ← → Back or ahead 5 seconds
- [ ] Previous or next chapter
- C Captions · M Mute · F Full screen
Transcript
Notes for class
- Watch beside Images in HTML and Fluid and Responsive Images. Every file on screen is one of the section's own, and every byte count is that file's real size.
- Try it yourself: the Which source? demo reports the viewport, the device pixel ratio, the slot, the pixels needed and the file your browser chose.
- The choices assume the browser takes the smallest candidate that covers the pixels needed, which is what Chrome does in practice. The HTML standard leaves the final choice to the browser.
- Photographs: “Lake Mountain Landscape”, Bonnie Moreland, and “A tuxedo cat looking at the window”, Punkressph, both CC0, from Wikimedia Commons.
- The narration is a synthetic voice (ElevenLabs). Timing follows the narration track, so a recorded voice-over can replace it cue for cue using the transcript.
- With Reduce Motion turned on in the operating system, the film keeps its fades and drops the sliding motion.
- Set in Atkinson Hyperlegible Next and Mono, typefaces the Braille Institute designed for readers with low vision.
Take it with you
- Video (MP4, 1080p, 7:31, 13 MB), with English captions built in
- Captions: WebVTT or SRT, for Canvas or YouTube
- Narration script (plain text) with chapter timecodes, for recording your own voice-over