Images and Media Notes

The img Element: Putting Pictures on a Page

src, alt, width and height. Four attributes, and three of them are doing more work than most people realise.

Writing Alt Text That Actually Helps

Alt text is not a caption, not a keyword list and not a file name. Learn the decision tree that tells you what to write, and when to write nothing at...

HTML

figure and figcaption: Images With Captions

A figure is self contained content referred to from the main text. figcaption attaches a visible caption that stays associated with it in the accessib...

HTML

Audio and Video in HTML

Native media playback with no plugin. Learn the controls, the source fallback pattern, autoplay rules that will catch you out, and why captions are no...

HTML

Responsive Images: srcset, sizes and picture

Stop sending a 2000 pixel photograph to a phone. Learn width descriptors, the sizes attribute the browser cannot work out for itself, and when picture...

HTML

Embedding External Content with iframe

An iframe puts another page inside yours. Learn the YouTube and maps patterns, the title attribute screen readers need, and the sandbox and loading at...

HTML

Lazy Loading and Image Performance

Images are usually the heaviest thing on a page. loading, decoding, fetchpriority and preload are four attributes that decide how fast it feels.