Fast and Beautiful Modern Image Delivery Techniques
summary
Shows concrete wins and tools: run Lighthouse and WebPageTest against the HTTP Archive, save JPEGs at 85% quality or use SSIM auto to shave hundreds of KB, convert heavy JPEGs to webP saves ~400 KB for the Riga image, generate responsive breakpoints to avoid decoding 12+ million wasted pixels (desktop decode 78 ms Motorola G4 200 ms Alcatel 820 ms), convert animated GIFs to MP4 (gif 22 s download vs mp4 4.5 s), and enable lazy loading saves ~530 KB to cut seconds off mobile load.
AI-written summary · about
chapters (12)
- 0:00Start
- 3:024 Simple Image Optimizations
- 7:33Scalable Vector Graphics (SVG)
- 13:54Image Processing
- 14:52Image Sizing
- 15:32Responsive Breakpoint Generation
- 17:48Lazy Loading: Experiments
- 17:58Lazy Loading: Chrome Experiments
- 22:26Addendum: Save-Data
- 23:33Addendum 2: Network Info
- 24:38Conclusion Images
- 25:24Summary Tooling
related talks
46mFast and Beautiful Modern Image Delivery Techniques
30mFast and Beautiful: Modern Image Delivery Techniques
48mFast 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
46mSpeed Matters: Client Side Performance Improvement Tips & Tricks