Lesson 15 / 25
Video optimization
Optimize video delivery through compression, format selection, and lazy loading strategies.
Video compression and codecs
Use AV1 or VP9 where supported, with H.264 as the universal fallback. Compress with FFmpeg: ffmpeg -i video.mp4 -c:v libx264 -crf 23 output.mp4. Target bitrate is about 5Mbps for 1080p and 1.5Mbps for 480p.
Adaptive streaming and delivery
Use DASH or HLS for adaptive bitrate streaming. Serve multiple quality versions. Replace video with static image on slow connections. Add preload=none by default to avoid downloading video metadata.
Video as background alternative
Consider static image with video enhancement on load. Use small preview image while video loads. Disable autoplay on mobile. Animated GIF alternative uses 5-10x more data than optimized video.
Quick check
Quick check: Which preload value avoids downloading video data until the user plays?
- Always preload=auto
- preload="metadata", which still fetches some data
- preload=auto on every video
- preload="none"
Answer
preload="none" — preload=none avoids downloading video data until the user chooses to play.