Fast and Beautiful Modern Image Delivery Techniques
summary
Web pages average 50% images and 25% video so real wins come from specifics: run Lighthouse and webpagetest against the site, use the HTTP archive to benchmark, save JPEGs at ~85% (43% of sites already do; 33% score zero) and gain ~2.8–4.1 seconds and 400–600 KB on 3G, switch to WebP where possible, generate responsive image sets (≈2.7s / 400 KB savings), lazy-load offscreen images (~3.5s / 500 KB), convert GIFs to short muted video (≈93% smaller), and tune stream manifests to avoid stalls.
AI-written summary · about
chapters (18)
- 0:00Start
- 5:40Image Quality
- 6:03Image Magic
- 7:58Structural Similarity
- 8:23Web Page Test
- 9:17Vector Graphics
- 12:46Image Format
- 15:13Responsive Images
- 18:09Responsive Image on a Motorola G4
- 19:21Lazy Loading
- 23:33Animated Gifs
- 27:01Top Video Metrics
- 32:06Waterfall Chart
- 36:42Third-Parties
- 38:40Video Tracks
- 40:36The Goldilocks Approach
- 41:06Web Page Tests
- 44:53Conclusion
related talks
48mFast and Beautiful: Modern Image Delivery Techniques
30mFast and Beautiful: Modern Image Delivery Techniques
26mFast and Beautiful Modern Image Delivery Techniques
36mFast and Beautiful: Modern Image Delivery Techniques
25mDelivering Fast and Beautiful Images and Video
31mDelivering Fast and Beautiful Images and Video
29mSpeed Essentials: Key Techniques for Fast Websites
41mMaking The Mobile Website Faster