Delivering Fast and Beautiful Images and Video
summary
Half of a page weight is images and a quarter is video so optimizing them gives the biggest wins: use WebPageTest and Lighthouse to measure four concrete levers—quality (Google recommends 85% quality), format (switch to WebP to save ~600 KB median), sizing (responsive images cut MBs and CPU work) and lazy loading (median ~3.5s and 530 KB saved). For video, aim for <2s start time, prefer small initial bitrates or smart manifests, and avoid unnecessary third‑party blocking of playback.
AI-written summary · about
chapters (12)
- 0:00Start
- 2:204 Simple Image Optimizations
- 6:29Automate Quality vs. File Size
- 8:31Scalable Vector Graphics (SVG)
- 9:44File Format: WebP
- 11:08Image Format Use In The Wild
- 11:59Image Sizing
- 14:18Responsive Breakpoint Generation
- 18:32Preview Images
- 18:57Animated GIFs
- 23:35Video Startup Delay
- 24:183rd Party Interference
related talks
46mFast and Beautiful Modern Image Delivery Techniques
48mFast 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
35mRevitalising the Web - The Importance of Web Performance
56mQuick Wins for Backend Developers