Progressive image rendering

on YouTube ↗25m

" summary

Images account for about two thirds of transferred bytes and changing how and when they load cuts real cost: Spotify overhauls a high‑traffic page and saves bandwidth by dropping useless art, using dominant colours as placeholders, serving tiny blurred thumbnails drawn to canvas and then swapping full images, lazy loading via the IntersectionObserver API instead of scroll listeners, and favoring WebP thumbnails that turn out roughly 25% the size of JPEGs while noting only 7% of web JPEGs are progressive.

AI-written summary · about

" chapters (7)

1. 0:00Introduction
2. 1:10Should we use images
3. 4:37Image optimization
4. 7:15Lazy loading
5. 8:35Scrolling
6. 20:56Edge detection
7. 23:05Conclusion

" related talks

• 25mProgressive Image RenderingJosé M. Pérez · Render Conference 2017
• 47mImage OptimizationKornel Lesiński · performance.now() 2018
• 01h 00mResponsive ImagesPeter Miller, Yov Weiss · Edge Conference 2013 New York
• 25mDelivering Fast and Beautiful Images and VideoDoug Sillars · WebCamp Zagreb 2018
• 48mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · Mobile Era 2018
• 56mBoosting Web Performance in 2022Vitaly Friedman · Nordic.js 2022
• 37mImage Formats, Performance and Cognitive LoadTobias Baldauf · DevDays Europe 2019
• 36mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · Øredev 2019