How does one quickly load a lower-resolution version of an image for a thumbnail? Or simply, how does one best create a thumbnail image?

Question

Many apps such as Tweetbot show thumbnails in their table view controllers for a much higher resolution image.

For example, this image shows a thumbnail that when tapped reveals the larger image:

I'm very confused how these images are loaded, however. My thinking would be that the original image is loaded and then shrunken down to the thumbnail size and displayed. However, I find this hard to believe as the image takes a decent amount of time to load/download at full resolution, so doing that for every single image just to shrink it would seem like it would take a decent amount of time. But these seem to load very quickly.

I'm also skeptical given that when you then tap the image it then takes a second to load before the full resolution image is shown, leading me to think that if they downloaded the full resolution before it would just be cached temporarily and loaded up instantly when the user taps it.

So I'm curious how exactly one would achieve a similar thumbnail system as in this app. Given a link to an image, such as the one shown in the image above, how would I very quickly take the image at the URL and present it as a thumbnail?

Answer 1

Usually there are 2 images that are created by the server not the client, and the server provides 2 URLs for retrieving the images, one for thumbnail and one for the full res image ((this is what happens in 90% of the applications)), so your UIImageView (( or whoever is responsible )) is supposed to load the thumbnail, then load the full resolution image, and cache the latter, so that when you click on it it opens quickly. Now there are many cases:

• The server is really blazing fast, and you're connected to a fast wifi, so the application can load the image relly quickly
• The image size is not really big, so loading the full res image doesn't take time anyway, you're displaying on a phone eventually.

If you want to achieve what you mentioned, this library can help you very much.