Images, timed media, frames, and their resource costs.
Images and alternatives
Choose useful image text, responsive sources, and intentional load timing.
- HTML image alt text: describe function or information, not pixels alone
- HTML srcset and sizes: let the browser choose an appropriately sized image
- HTML picture: switch image composition while keeping one fallback img
- HTML image loading: distinguish a key image from below-fold media
- HTML image decoding: choose a paint hint without promising speed
- HTML image maps: keep image hotspots accessible and stable
Audio and video
Keep spoken and visual information available beyond playback.
- HTML video tracks: expose controls and a caption file
- HTML audio: give recorded guidance native controls and a transcript
- HTML video sources: declare formats and a real text alternative
- HTML video poster and preload: control the first-screen transfer
- HTML track languages: label subtitles and captions honestly
- HTML video transcript: retain information beyond timed captions
- HTML audio transcript: make a recording readable without playback
- HTML video playsinline: request inline playback without forcing autoplay
Embedded resources
Name frames, constrain capabilities, and provide alternate paths.
- HTML iframe sandbox: isolate an embedded preview and name its purpose
- HTML iframe srcdoc: isolate a small preview deliberately
- HTML iframe allow: grant an embedded page only needed capabilities
- HTML lazy iframe: delay an optional embedded view
- HTML object fallback: offer an alternate route to embedded files
- HTML MathML: keep mathematical meaning in the document
- HTML iframe referrerpolicy: limit parent-page details sent to an embed
Script delivery
Load enhancement code without making content depend on it.
Common Mistakes
Each lesson explains a browser contract. An illustrative asset or endpoint is not a deployed service until its owner supplies and verifies it.