Responsible Responsive Images
summary
Claims that responsive images reduce wasted bandwidth with real wins: images make up ~64% of page weight, average pages exceed 1MB, one Oakley landing page hits ~55MB and Newsweek clocks 2.2MB. Implements discussed include srcset resolution switching, the picture element plus a Picturefill polyfill, server resizing (Adaptive Images), and SVG icons delivered via data URIs and a grunt-driven pipeline that emits PNG fallbacks. Practical problems include aggressive browser prefetching that breaks cookie hacks, incomplete browser support, and memory costs for some retina tricks.
AI-written summary · about
chapters (14)
- 0:00Start
- 0:12Matt Marquis
- 4:05Average Image Weight
- 6:18Legend of Zelda a Link to the Past
- 13:43A Markup Pattern for Delivering Context Appropriate Images
- 14:08Responsive Images Community
- 23:47Svg
- 27:03Sprite Sheets
- 31:07Svg Icons
- 33:22Responsive Image Use Cases
- 35:49Icon Fonts
- 40:54Art Direction Use Case
- 42:23The Compressive Images Solution
- 43:50Retina Images
