23
HTML media

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


Lessons

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

7 lessons · ~104 min total

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

Prerequisites

  • · Comfortable writing basic HTML
  • · Familiar with the img tag from html-basics

After this, try