PerformanceMedium30 XP4 min read
How does Flutter handle image caching and how can you optimize it?
TL;DR: Flutter's ImageCache holds decoded bitmaps in memory (default: 100MB or 1000 images). For network images, use cached_network_image to add disk caching. Use cacheWidth/cacheHeight to decode at display size, not full resolution.
Full Answer
Image decoding is one of the most expensive operations in Flutter. A 4K image takes ~50MB of memory when decoded to RGBA, even if displayed at 50x50.
Key Optimizations
- ▸cacheWidth/cacheHeight: Downsamples image to display resolution during decode — saves 90%+ memory
- ▸cached_network_image: Disk cache prevents re-downloading on every screen visit
- ▸Increase ImageCache size for image-heavy apps: imageCache.maximumSizeBytes = 200 * 1024 * 1024
- ▸Use WEBP format — 30% smaller than PNG with no quality loss
🎯
Always provide cacheWidth: and cacheHeight: for network images in lists. A thumbnail in a list doesn't need to be decoded at full 4K resolution.
Code Examples
dartOptimized network image in a list
Output
// cacheWidth/Height: 4K image uses ~90KB instead of ~48MB in memory
Common Mistakes
- ✗Loading full-resolution images in a ListView of thumbnails
- ✗Not providing errorWidget — broken images leave empty whitespace with no feedback
Interview Tip
💡
The cacheWidth parameter is one of the most impactful single-line performance wins in Flutter. Show that you know the difference between display size and decode size.
#image-cache#cached-network-image#memory#decode