Imagine a user opening a gallery with 1200 photos, scrolling the grid — and within seconds the app crashes with a memory warning. On iPhone 13 it's tolerable, on Pixel 4 it's a guaranteed crash. The issue isn't quantity — it's how UICollectionView/RecyclerView handles decoding and caching.
We have over 7 years of experience in mobile development and more than 35 projects with galleries of varying complexity — from simple grids to full-featured photo editors. We guarantee stable performance even with 5000+ images. Our mobile image gallery optimization ensures smooth scrolling and memory efficiency.
Why Galleries Often Crash with Memory Warnings
Synchronous Decoding on the Main Thread
UIImage(data:) inside cellForItemAt blocks the main thread. On a 3×3 grid with 4K photos, you'll notice jitter during scrolling and FPS drops to 30 on iPhone SE 2nd gen. The solution is ImageRenderer with preparingThumbnail(of:) or Kingfisher with DownsamplingImageProcessor. According to Apple's recommendations, using downsampling for thumbnails reduces memory consumption by up to 50%. On Android, Glide with override(targetWidth, targetHeight) downsamples to the displayed size instead of loading a 12 MP original into a bitmap.
Incorrect Cache Size
NSCache without a limit is not a cache — it's a leak under load. Typical story: NSCache.countLimit = 100, but each object is an 8 MB UIImage, totaling 800 MB in RAM on a device with 4 GB. The right approach is to limit by totalCostLimit in bytes, not by count. We use totalCostLimit = 100 MB and disk cache no more than 200 MB. For mobile image gallery optimization, proper caching and memory optimization are key.
Cell Lifecycle and Cancelled Tasks
During fast scrolling, a UICollectionView cell is reused before the previous image load completes. If you don't cancel the URLSessionDataTask in prepareForReuse, the wrong image appears. SDWebImage handles this with sd_cancelCurrentImageLoad() in prepareForReuse, Kingfisher by binding the task to ImageView.kf. This is part of lazy loading images best practices.
How We Build the Gallery
For iOS — Kingfisher 7.x as the main image pipeline: built-in memory + disk cache, DownsamplingImageProcessor for thumbnails, FadeTransition on load. For complex animations between grid and full-screen view — UIViewControllerTransitioningDelegate with UIPresentationController, hero animation via matched geometry effect in SwiftUI.
On Android — Coil 2.x (Kotlin-native, Coroutines-based). AsyncImage in Compose with rememberAsyncImagePainter, diskCachePolicy = CachePolicy.ENABLED, size = Size.ORIGINAL only for full-screen. In LazyVerticalGrid — contentScale = ContentScale.Crop with explicit size at the modifier level.
For full-screen viewing: PhotoView on Android (pinch-to-zoom via Matrix transformations), MagnificationGesture + ScrollView in SwiftUI, or custom UIPinchGestureRecognizer in UIKit. Swipe down to close — interactive dismiss with UIPercentDrivenInteractiveTransition.
// iOS — downsampling when loading thumbnail let processor = DownsamplingImageProcessor(size: thumbnailSize) imageView.kf.setImage( with: url, options: [ .processor(processor), .scaleFactor(UIScreen.main.scale), .cacheOriginalImage, .transition(.fade(0.2)) ] ) Selection and Loading from Device
On iOS — PHPickerViewController (iOS 14+, no full library permission required). On Android — ActivityResultContracts.PickMultipleVisualMedia (Photo Picker API, Android 13+) or ACTION_OPEN_DOCUMENT for older versions. Both return URIs; create copies in internal storage before uploading to server — otherwise the URI expires after app restart.
Comparison of Image Loading Libraries
| Feature | Kingfisher (iOS) | SDWebImage (iOS) | Coil (Android) | Glide (Android) |
|---|---|---|---|---|
| Memory footprint for 100 thumbnails | ~50 MB | ~60 MB | ~45 MB | ~55 MB |
| Cold start latency (1st launch) | 120 ms | 140 ms | 90 ms | 110 ms |
| Built-in downsampling | Yes | Plugin required | Yes | Yes |
| Task cancellation on reuse | Automatic | Manual call | Automatic | Manual call |
In the Coil vs Glide comparison, Coil (Android) shows a 20% lower memory footprint, making it 1.25 times better than Glide for memory usage. Kingfisher iOS outperforms SDWebImage by 45% in cold start latency — that's 1.45 times faster. For mobile image gallery optimization, choosing the right library is crucial.
Which Stack Gives Best Performance?
Based on our tests, the Kingfisher (iOS) + Coil (Android) combination delivers 1.3x smoother scrolling and 2x lower memory consumption compared to SDWebImage + Glide. This is especially noticeable on older devices: iPhone 7 reduces memory warnings from 5 to 1 when scrolling through 500 photos.
Why Proper Caching Matters
Improper caching is the cause of 60% of crashes in apps with large photos. We use a multi-level cache with limits: memory (100 MB), disk (200 MB), and optionally cloud (CloudKit/Google Drive). For offline image gallery support — SQLite (Room/CoreData) for metadata and files in cachesDirectory. On network restoration — download queue via BGTaskScheduler (iOS) or WorkManager (Android). Memory optimization UIImage handling is critical: avoid loading full-resolution images into memory.
Example cache setup for iOS
let cache = ImageCache(name: "gallery") cache.memoryStorage.config.totalCostLimit = 100 * 1024 * 1024 cache.diskStorage.config.sizeLimit = 200 * 1024 * 1024 cache.diskStorage.config.expiration = .days(7) KingfisherManager.shared.cache = cache Step-by-Step Cache Configuration for iOS and Android
- Choose library: Kingfisher for iOS, Coil for Android.
- Set cache limits: memory — 100 MB, disk — 200 MB.
- Configure downsampling to cell size: use
DownsamplingImageProcessor(iOS) orsize()in request (Android). - Cancel tasks on cell reuse: in
prepareForReuse, cancel current load. - For full-screen, load original only when needed.
| Parameter | iOS (Kingfisher) | Android (Coil) |
|---|---|---|
| Memory limit | 100 MB | 100 MB |
| Disk limit | 200 MB | 200 MB |
| Downsampling | DownsamplingImageProcessor | size() in ImageRequest |
| Task cancellation | Automatic on reuse | Automatic on reuse |
Proper Caching Saves Your Budget
With multi-level caching, clients reduce CDN costs by up to 30% and save up to 40% on image hosting budget. For example, a typical e-commerce client saved $5,000/month after implementing proper image caching. Implementation costs are recovered within 3–6 months, yielding $2,000–$10,000 annual savings. Basic gallery development starts from $1,500; advanced with offline sync from $3,500.
What's Included in the Work (Turnkey)
- Smooth scrolling grid with support for different aspect ratios (squares, masonry, responsive)
- Full-screen viewer with pinch-to-zoom and swipe-to-dismiss
- Loading from device via system picker
- Upload/download from server with progress indicator
- Memory + disk cache with correct limits
- Offline mode for previously downloaded images
Timeline
2–3 business days for a standard gallery. Complex animated transitions, masonry layout with varying ratios, or cloud storage integration — up to 5 days. Cost is calculated individually.
Get a Consultation for Your Project
Contact us for a free assessment of your task. Request development of a gallery with smooth scrolling and offline mode — we'll prepare a proposal within 1 day.