#Media
Images, audio, video and embedded content.
10 notes tagged
Favicons and App Icons
The small icon in a tab, and the larger ones a device uses when a site is saved to a home screen. A short modern set replaces the twenty file mess of...
SVG in HTML
Vector graphics that scale perfectly, weigh almost nothing and can be styled with CSS. Learn inline SVG, SVG as an image, and how to make one accessib...
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.
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...
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...
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...
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...
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...
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.