Image Loading and Optimization on Android
Article Summary
Arlind Hajredinaj from SoundCloud reveals how a beautiful UI redesign accidentally tanked their image loading performance. The fix? A deep dive into Android optimization that every mobile team should read.
SoundCloud's Android team shipped a major visual overhaul with rounded corners, stacked playlist artwork, and color-extracted backgrounds. It looked stunning, but images loaded noticeably slower and flickered during scrolling. This post documents their systematic debugging process and the specific solutions they implemented.
Key Takeaways
- Using Bitmap objects as LruCache keys caused major slowdowns vs String URLs
- Scaling bitmaps from 500x500 to 15x15 before palette generation dramatically improved speed
- Preloading 3 upcoming RecyclerView items reduced perceived loading time
- Skipping animations for cached images (MEMORY/DISK) eliminated unnecessary flickering
- Reducing fade-in duration from 200ms to 60ms made the UI feel 3x more responsive
Five targeted optimizations transformed sluggish image loading back to smooth performance without sacrificing the new design's visual appeal.
About This Article
SoundCloud's palette generation was slow because it processed every pixel in 500×500 bitmaps to find dominant colors. This created a bottleneck when images were loading.
The team scaled bitmaps down to 15×15 pixels using resizeBitmapArea(225) and cut the color extraction from 16 colors down to 6 with maximumColorCount(6). They gave up a bit of accuracy to get much faster results.
Palette generation got faster and the color accuracy stayed acceptable. Reds still looked right even with the smaller bitmap and fewer colors available.