TSM - iOS image caching. Libraries benchmark

Bogdan Poplauschi - Senior iOS Developer

In the past years, iOS apps have become more and more visually appealing. Displaying images is a key part of that, that"s why most of them use images that need to be downloaded and rendered. Most developers have faced the need to populate table views or collection views with images. Downloading the images is resource consuming (cellular data, battery, CPU etc.); so, in order to minimize this, the caching model was developed.

To achieve a great user experience, it"s important to understand what is going on under the iOS hood when we cache and load images.

Also, the benchmarks on the most used image caching open source libraries can be of great help when choosing your solution.

2. Classical approach

// assuming we have an NSURL *imageUrl and UIImageView *imageView, we need to load the image from the URL and display it in the imageView 
if ([self hasImageDataForURL:imageUrl] {
   
	NSData *data = [self imageDataForUrl:imageUrl];
  
	UIImage *image = [UIImage imageWithData:imageData];
   
	dispatch_async(dispatch_get_main_queue(), ^{
     imageView.image = image;
   });
	
} else {
	
   [self downloadImageFromURL:imageUrl withCompletion:^(NSData *imageData, …) 
	{
     [self storeImageData:imageData …];
     
	UIImage *image = [UIImage imageWithData:imageData];
     
	dispatch_async(dispatch_get_main_queue(), ^{
       
	imageView.image = image;
     
	});
   
	}];
}

FPS simple math

3. Downsides of the classical variant

4. A strong iOS image cache component must:

Advanced imaging on iOS

To find out more about imaging on iOS, how the SDK frameworks work (CoreGraphics, Image IO, CoreAnimation, CoreImage), CPU vs GPU and more, go through this great article by @rsebbe.

Is Core Data a good candidate?

Here is a benchmark of image caching using Core Data versus File System. The results are recommending the File System (as we are already accustomed to).

5. Benchmarks

Just looking at the concepts listed above makes it clear that writing such a component on your own is hard, time consuming and painful. That"s why we turn to open source image caching solutions. Most of you have heard of SDWebImage or the new FastImageCache. In order to decide which one fits you best, I"ve benchmarked them and analyzed how they match our list of requirements.

Libraries tested:

Note: AFNetworking was added to the comparison since starting with iOS7, due to NSURLCache, AFNetworking benefits of flash drive caching.

Scenario

For each library, I made a clean install of the benchmark app, then started the app, scroll easily while all images are loaded, then scroll back and forth with different intensities (from slow to fast). I closed the app to force loading from flash drive cache (where available), then ran the same scrolling scenario.

Benchmark app - project

Fastest vs slowest device results

Complete benchmark results can be found on the Github project. Since those tables are big, I decided to create charts using the fastest (iPhone 5s) and the slowest device data (iPhone 4).

iPhone 5s results

Note: disk ~ flash drive (device storage unit)

iPhone 4 results

Legend

6. Conclusions

Useful links

https://github.com/rs/SDWebImage

https://github.com/path/FastImageCache

https://github.com/AFNetworking/AFNetworking

https://github.com/tumblr/TMCache

https://github.com/hpique/Haneke

http://bpoplauschi.wordpress.com/2014/03/21/ios-image-caching-sdwebimage-vs-fastimage/

https://github.com/bpoplauschi/ImageCachingBenchmark