Building Carousel Part III: Drawing Images on Screen
Article Summary
Tina Wen from Dropbox tackles a deceptively hard problem: how do you render tens of thousands of photos at 60fps without turning your app into a slideshow of gray squares?
When building Carousel, Dropbox's photo app, the team hit a wall with image rendering. Decoding three 256px thumbnails took 30ms, but smooth scrolling requires each frame to render in just 16ms. The naive approach would drop frames constantly. Here's how they solved it.
Key Takeaways
- Decoding 256px thumbnails took 10ms each, making 60fps impossible with naive approach
- Dual thumbnail strategy: 75px for fast scrolling, 256px for quality when stopped
- Smart queue management: only decode high-res images when scrolling slows down
- Bitmap caching prevents re-rendering same images as users scroll back and forth
Critical Insight
By combining low-res thumbnails on the main thread with background queuing of high-res images based on scroll velocity, Dropbox achieved smooth 60fps scrolling while maintaining image quality.
