How do you optimize image loading and caching in Flutter?
TL;DR: Use cached_network_image for automatic disk+memory caching. Always set cacheWidth/cacheHeight to decode at display size (not full resolution). Use precacheImage() for critical images. Use WebP/AVIF format for 30-50% smaller files. Enable ResizeImage for memory optimization.
Full Answer
Images are the #1 memory consumer in most Flutter apps. A 4K image decoded at full resolution uses 32MB of RAM — even if displayed at 100x100dp.
Decoding at display size
cacheWidth/cacheHeight tell Flutter to decode the image at a specific pixel size, not the full resolution. A 3000x2000 photo displayed in a 200x133 thumbnail should be decoded at 200x133 (scaled for device DPR).
ResizeImage wraps any ImageProvider and adds size constraints at the codec level. Use it with NetworkImage, AssetImage, and FileImage — not just CachedNetworkImage.
Code Examples
// Full 3000x2000 image: 3000 × 2000 × 4 bytes = 24MB RAM // ResizeImage(200, 200): 200 × 200 × 4 = 160KB RAM // 99.3% memory reduction for a thumbnail!
Common Mistakes
- ✗Not setting cacheWidth/cacheHeight on thumbnails — entire image decoded at original resolution
- ✗Using Image.network without caching — re-downloads on every build
Interview Tip
The cacheWidth/cacheHeight parameter is one of the highest-impact single-line performance improvements in Flutter. Many developers don't know it exists. Mentioning it shows real-world performance experience.