How to quickly download a low resolution version of a thumbnail image? Or simply, what is the best way to create a thumbnail?

Question

Many applications, such as Tweetbot, display thumbnails in their table view controllers for higher resolution images.

For example, a thumbnail is displayed on this image, which when clicked shows a larger image:

I am very confused how these images load. My thinking was that the original image is loaded and then reduced to the size of the sketch and displayed. However, I find it hard to believe, since the image takes enough time to upload / download in full resolution, so doing this for each individual image would just take a decent amount of time to simply compress it. But they seem to load very fast.

I am also skeptical that when you then click on the image, it takes a second to load until the full resolution image is shown, which leads me to think that if they download full resolution before it is just temporary cached and loaded instantly when the user deletes it.

So, I'm curious how exactly you can achieve such a miniature system, as in this application. If you have a link to an image, such as the image shown in the figure above, how would I very quickly take an image from a URL and present it as a thumbnail?

Answer 1

Usually there are 2 images created by the server , not the client, and the server provides 2 URLs for receiving images, one for thumbnails and one for the full res image ((this is what happens in 90% of applications), so your UIImageView ((or who no matter who was responsible)) must download a thumbnail, then upload a full-resolution image and cache the latter so that when it is clicked it opens quickly. Now there are many cases:

• The server really flashes quickly and you are connected to fast Wi-Fi, so the application can quickly download an image.
• The image size is actually small, so downloading a full resolution image does not take time, you end up showing it on the phone.

If you want to achieve what you mentioned, this library can help you a lot.

Answer 2

If you need to make a reduction on the device (i.e. the server does not provide a smaller version), you probably want to avoid loading and bloating a full-sized image in memory in the first place. (Most other answers offer this right now.)

Instead, you can use the CGImageSourceCreateThumbnailAtIndex method to create a sketch directly from the source (compressed) data without first extending it (by transferring it to CGImageSource). You can see a complete example of this in the Apple Image I / O Programming Guide, Creating a Thumbnail from an Image Source .

For small images with source code, this probably does not have much impact, but for large images it can help a lot, especially when using memory.

Answer 3

Probably for each application this may be different.

In the case of Tweetbot, they almost certainly retrieve thumbnails from Twitter servers and retrieve full res only by clicking on the thumbnail. So, in that sense, its just another url and twitter making a thumbnail.

Applications can do this locally as well. The Apple Photos app and Camera Roll create thumbnails as soon as you take a photo and cache them locally to display as a collection to save memory. Its only when you click on it that it loads a full resolution image from memory. There is even evidence and a precedent that they don’t even load the full resolution image right away, only loading the image needed for the screen size until you click to zoom in and then replacing it with another image.

Basically, there are many simple methods that Google quickly displays to actually render the image in code. But each application method will be specific to its unique stream of users.

Answer 4

Most likely, these are separate images (thumbnails) that were created by resizing the original image in full resolution, and then saved separately from the full resolution image - the reason why the thumbnails look very fast to load. I wrote an application that does something similar (although it saves both a thumbnail and a full res image). This is the code -

 -(void)setThumbnailDataFromImage:(UIImage *)image//image is full res image that you want a thumbnail of { CGSize origImageSize = [image size]; CGRect newRect = CGRectMake(0, 0, 50, 50); float ratio = MAX(newRect.size.width/origImageSize.width, newRect.size.height/origImageSize.height); UIGraphicsBeginImageContextWithOptions(newRect.size, NO, 0.0); //the following two lines round the edges of the thumbnail UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:newRect cornerRadius:5.0]; [path addClip]; CGRect projectRect; projectRect.size.width = ratio * origImageSize.width; projectRect.size.height = ratio * origImageSize.height; projectRect.origin.x =(newRect.size.width - projectRect.size.width)/2.0; projectRect.origin.y =(newRect.size.height-projectRect.size.height)/2.0; [image drawInRect:projectRect]; UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext(); if (thumbnailDataArray==nil) { thumbnailDataArray = [[NSMutableArray alloc]init]; } NSData *data = UIImagePNGRepresentation(smallImage); if (thumbnail == nil) { [self setThumbnail:smallImage]; [self setThumbnailData:data]; } NSData *otherObject = UIImagePNGRepresentation(smallImage); [thumbnailDataArray addObject:otherObject]; UIGraphicsEndImageContext(); } 

then upload thumbnail

 -(UIImage *)thumbnail { if (!thumbnailData) { return nil; } if (!thumbnail) { thumbnail = [UIImage imageWithData:thumbnailData]; } return thumbnail; } 

then when the sketch is listened to, a full resolution image will be loaded

Answer 5

So, I'm curious how exactly you can achieve a similar sketch like in this application. Given a link to an image, for example, shown in the image above, how would I very quickly take an image from a URL and present it as a thumbnail?

I would suggest using FilePicker in your application.

https://www.inkfilepicker.com/

So say, for example, a full-sized image is saved in

 https://www.filepicker.io/api/file/JhJKMtnRDW9uLYcnkRKW 

You can call the cropped version using the URL

 https://www.filepicker.io/api/file/JhJKMtnRDW9uLYcnkRKW/convert?crop=100,135,220,220 

This way you simply create this URL dynamically in your code to satisfy all you need.

Here is an example of this with thumbnails from the Filepicker site. Link here: https://www.inkfilepicker.com/products/javascript_v1/

Answer 6

Logically, you must have a low-resolution version on the server, and you can download it to create a sketch using the following code. An even better option is to have thumbnails on the server.

You can use the following code to create a sketch that matches the size.

 -(UIImage*)scaleImage:(UIImage *)orgImage toSize:(CGSize)size { UIGraphicsBeginImageContext(size); [orgImage drawInRect:CGRectMake(0, 0, size.width, size.height)]; UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return scaledImage; } - (UIImage *)fitImage:(UIImage *)orgImage toSize:(CGSize)size { CGSize imageSize = orgImage.size; float widthRatio = (size.width/imageSize.width); float heightRatio = (size.height/imageSize.height); float factor = widthRatio < heightRatio ? widthRatio : heightRatio; if (factor > 1.0) { factor = 1.0; } CGSize newSize = CGSizeMake(imageSize.width * factor, imageSize.height * factor); UIImage *img = [self scaleImage:orgImage toSize:newSize]; return img; } 

Call fitImage: with the desired sketch size you want to create.

Answer 7

1, some of the applications use 2 versions of image 1, the second with low resolution. The thumbnail loaded initially when the user clicks on the thumbnail, stretches the low-resolution image to a large size and starts loading the high-resolution image in the background .. as soon as the high-resolution image finishes loading, the lower-resolution thumbnail is replaced by a high-resolution image in image view.

Another solution is to download thumbnails first, and download high-resolution images in the background, so most of the time when a user clicks on a thumbnail, he may be able to retrieve a saved high-resolution image from memory.

Answer 8

This way you can easily make a smaller version of a large image and cache it. There are several ways to do this. Note that CGContextDrawImage(CGContextRef c, CGRect rect, CGImageRef image) will scale as needed. You do not want to do this live scaling every time, most likely, so you will need to insert a CGBitmapContext and then cache.

On these lines, you may find that Path has done most of the hard work for you in the recently released library: https://github.com/path/FastImageCache

It looks potentially from the documentation (although I haven't looked at the code yet). It looks like he will call your block draw an image in cache. Thus, a simple draw with the specified size will reduce it and store it in the cache.

Answer 9

Use FastImageCache.

https://github.com/path/FastImageCache

This is woo-hoo! fast.

(When displaying thumbnails after caching for silky smooth scrolling, note that this is not particularly magical in order to get an initial thumbnail that will display faster. If you view low-screen condoms somewhere as other people have indicated, this is your only help. )