Fast and Beautiful: Modern Image Delivery Techniques

on YouTube ↗36m

" summary

Average mobile pages are ~50% images so concrete fixes matter: use 85% JPEG -> half the filesize or run a structural‑similarity auto quality step (example saved 400 KB); switch to WebP (~400 KB smaller, ~2.5s faster) when supported with JPEG fallback; serve multiple sizes so a sample cathedral image goes from 7s to 2s and 1.6 MB to 121 KB; add lazy loading (now ~56% adoption) and prefer looped MP4 over animated GIFs; avoid base64 for large images.

AI-written summary · about

" chapters (18)

1. 0:00Introduction
2. 1:05Image performance matters
3. 3:34Four Lighthouse optimizations
4. 5:20Optimizing image quality
5. 7:47Finding compression sweet spot
6. 8:50Right image format
7. 11:00Avoid PNGs use JPEG
8. 12:26WebP future of delivery
9. 14:35Responsive images
10. 17:23Implement breakpoints
11. 19:10Lazy loading images
12. 22:19GIFs terrible for performance
13. 24:13Convert GIFs to MP4
14. 26:01Serve images by saver
15. 27:06Adapt for slow networks
16. 28:10Base64 anti-pattern
17. 30:15Summary
18. 31:19Q&A

" related talks

• 30mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · DevDays Europe 2019
• 46mFast and Beautiful Modern Image Delivery TechniquesDoug Sillars · DevFest Nantes 2018
• 48mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · Mobile Era 2018
• 26mFast and Beautiful Modern Image Delivery TechniquesDoug Sillars · You Gotta Love Frontend 2019
• 25mDelivering Fast and Beautiful Images and VideoDoug Sillars · WebCamp Zagreb 2018
• 29mSpeed Essentials: Key Techniques for Fast WebsitesKatie Hempenius, Houssein Djirdeh · Chrome Dev Summit 2018
• 31mDelivering Fast and Beautiful Images and VideoDoug Sillars · FrontCon 2018
• 03mDelivering fast and beautiful images and videoDoug Sillars · Render Conference 2018