HTML media

The modern stack: srcset, sizes, picture, video, audio, captions, and the accessibility attributes that make it all work.

~ 104 min·7 lessons·updated apr 2026

What you'll learn

alt text decisions, width and height to prevent layout shift
Lazy loading, decoding, and fetchpriority — what each does
srcset and sizes — resolution switching that respects the device
picture and source — art direction and format fallbacks
Modern image formats: AVIF, WebP, JPEG XL — when each wins
video and audio — controls, autoplay rules, posters, multiple sources
Captions and subtitles via the track element and WebVTT
Inline SVG vs img — when each is right, and the accessibility attributes for SVG

Lessons

Read in order. Each lesson stands on its own, but the order is deliberate.

7 lessons · ~104 min total

01
The img deep dive
alt decisions, width and height to prevent CLS, loading, decoding, fetchpriority — every attribute that matters.
15 min
02
Responsive images: srcset and sizes
Resolution switching, w-descriptors, the sizes puzzle — how the browser picks the right file.
17 min
03
picture and art direction
source with media and type, switching crop or format per breakpoint.
14 min
04
Modern image formats
AVIF, WebP, JPEG XL — fallback chains and when each format earns its place.
13 min
05
video and audio
controls, autoplay rules, muted and playsinline, posters, multiple sources.
16 min
06
Captions and subtitles
track, WebVTT, kind=captions vs subtitles vs descriptions, default tracks.
15 min
07
SVG inline vs img
When to inline, the SVG accessibility attributes (role, aria-label, title, desc), styling inline SVG with CSS.
14 min