Adaptive Images for Responsive Web Design
summary
Claims measurable checks: use Navigator.connection and a 50k probe to infer bandwidth, read device pixel ratio to decide 1x/2x assets, and swap sources via mod_rewrite, adaptiveimages (PHP+GD) or a JavaScript polyfill. A server-side rewrite solution works but is server‑intensive; picture/srcset polyfills depend on JavaScript; the HSource library performs layered tests (pixel ratio, native speed, forced 50k). A surprising practical trick is the compressed JPEG trick — oversized jpgs compressed at 100% often scale sharper on retina without huge payloads.
AI-written summary · about
chapters (9)
- 0:00Introduction and context
- 2:00Multi-device design challenges
- 5:05Feature testing techniques
- 9:43Addressing performance and speed
- 12:11Responsive image solutions
- 16:57High source and implementation
- 23:51Alternative design workarounds
- 30:26Compressed JPEG trick
- 33:35The future of image formats
related talks
01h 00mResponsive Images
45mResponsible Responsive Images
23mA quest for responsive imagery
26mFast and Beautiful Modern Image Delivery Techniques
30mFast and Beautiful: Modern Image Delivery Techniques
45mThe image problem of the web and how to solve it…
58mNew Adventures in Responsive Web Design
46mFast and Beautiful Modern Image Delivery Techniques