Responsive Media, Modern Image Compression, Audio, and Video
Deliver high-fidelity responsive media: resolution switching with srcset and sizes, art direction with <picture>, AVIF/WebP next-gen compression, and accessible video subtitles.
HTML layout fundamentals.
Deliver bandwidth-optimized responsive media using <picture>, srcset/sizes, next-gen AVIF/WebP compression, and WebVTT captions.
Read in order, or jump to what you need.
Every lesson builds on the one before it. Open any lesson to read the explanation, run the examples, and try the practice challenges.
- 05.01Responsive Images: Resolution Switching (srcset/sizes) and Art Direction (<picture>)4 min
Master responsive images: resolution switching across varying device pixel ratios via srcset and sizes, and art direction cropping strategies using the <picture> element.
- 05.02Next-Gen Image Formats: AVIF, WebP, and Progressive Fallbacks4 min
Optimize image delivery pipelines: AVIF (AV1 Still Image File Format), WebP, multi-format progressive enhancement with <picture type="...">, and compression trade-offs.
- 05.03Native Audio, Video, and Accessible WebVTT Subtitles4 min
Embed native multimedia: <video> and <audio> elements, codec source negotiation (MP4/H.264, WebM/VP9), responsive poster frames, and accessible <track> WebVTT captions.
- 05.04Performance Optimization: loading='lazy', decoding='async', and fetchpriority4 min
Fine-tune browser asset scheduling: native lazy loading (loading='lazy'), asynchronous rasterization (decoding='async'), and resource prioritization (fetchpriority='high').
Ready to move on?
Deploy a responsive hero banner with multi-format fallbacks and zero layout shift.
Open the module self-check