Load low resolution image and progressive load of high resolution

Question

How do I display a low resolution image on a page and then after a second delay load a high resolution version? Is this done with layers? Threads?

Answer 1

In general this feature is achieved with image files saved in some interlaced/progessive mode. This allows the displaying application (i.e. browser) to display the image successively starting in a low quality as the first chunks of data arrive. The more of the data is available, the higher the quality of the image gets.

This feature is independent of the web server. Only the client application is responsible of supporting this mode

This site shows some examples.

Answer 2

It sounds like you a describing something like the TTPhotoViewController from Three20 (used in the Facebook iPhone app). When you first start looking at an image it's simply a thumbnail that has been stretched out. The "high res" version is being downloaded in the background, and when that download is complete it replaces the existing stretched image.

Answer 3

There are several options:

1) Save the images on the server in a format that supports progressive download (progressive JPEG, interlaced PNG). I think you’d have to come up with a special support on the client, ie. write the image decoding part from PNG/JPEG to UIImage yourself, presumably using some library.

2) Save a small thumbnail along each image on the server. When you want to download an image, you’d first download the thumbnail, do a simple scaling to stretch it to the full image size and in the meantime download the full version. There can be multiple thumbnails in various sizes if you really want to get fancy. You’ll have more data on the server, but the client code should be fairly straightforward.

3) Maybe you already have the thumbnails on the client? In that case you can stretch the thumbnail to the full image size to create a low-resolution version while you load the rest.

And if you are asking about how to exactly code the second or third solution… You don’t really need explicit threads and I’m not sure what does “layer” mean in this context. Loading an UIImage from network is pretty easy, a bit like this:

 NSURL *url = [NSURL URLWithString:@"http://somewhere/foo.png"];
 NSURLRequest *request = [NSURLRequest requestWithURL:url];
 NSData *data = [NSURLConnection sendSynchronousRequest:request
    returningResponse:NULL error:NULL];
 UIImage *image = [UIImage imageWithData:data];

You can turn this code into a function, load and display the thumbnail and then load and display the full image. All this could be done in background so that you can do something while the data is loading.