Fast and Beautiful: Modern Image Delivery Techniques
summary
Images make ~50% of page weight and videos ~25% (HTTP Archive). Saving JPEGs at 85% quality yields a median ~2.8s speedup and ~420KB savings on 3G; structural‑similarity auto‑sizing cuts files further (21s → 9.5s for a full image test). Converting to WebP saves ~400KB and trims seconds, responsive sizing gives ~2.7s/400KB, lazy loading can save ~3.5s/500KB. Video: ~14% of plays fail to start and switching animated GIF→MP4 3.8MB to 250KB fixes load and autoplay issues. Tools: Lighthouse, WebPageTest, HTTP Archive, WebP.
AI-written summary · about
chapters (15)
- 0:00Introduction and setup
- 2:36Impact of slow loading
- 3:41Image size in web traffic
- 5:05Lighthouse image optimizations
- 6:32Image quality optimization
- 10:27Image formats and SVG
- 12:32WebP format benefits
- 14:38Responsive image sizing
- 20:03Lazy loading images
- 24:46Optimizing animated GIFs
- 27:16Video delivery challenges
- 36:37Third-party video impact
- 37:40Video streaming bitrate
- 45:45Video quality vs stalls
- 46:05Summary and conclusion
related talks
46mFast and Beautiful Modern Image Delivery Techniques
25mDelivering Fast and Beautiful Images and Video
30mFast and Beautiful: Modern Image Delivery Techniques
26mFast and Beautiful Modern Image Delivery Techniques
36mFast and Beautiful: Modern Image Delivery Techniques
31mDelivering Fast and Beautiful Images and Video
29mSpeed Essentials: Key Techniques for Fast Websites
48mDecrease your conversions – common ways to lock people out