How to show preview image before downloading in iOS?

Question

how to display preview image before downloading actual image.? WhatsApp is doing similar thing, before downloading its shows preview image. My question is how to display preview image?

Preview Image before downloading...

After downloading...

Above images are from WhatsApp app, for better understanding my question..

Answer 1

• On the server generate a second, very low resolution version of the image, sometimes called thumbnail.
• Download that thumbnail
• Present the thumbnail, optionally with blur to cover the effect of pixelation

Answer 2

Here is a better solution using thumbnailURL or thumbnailData, since you have a cached images throw whetever alamofire, SDWebImage ...

it's simple and perfect performance wise

For thumbnailURL it accept only local paths:

1. get the file path for the cached image
2. create a URL object from the file path prefix with "file://"

"file://". to indicate it's local path

    if let path = SDImageCache.shared().defaultCachePath(forKey: item.url_thumbnail), let url = URL(string: "file://\(path)") {
         attributeSet.thumbnailURL = url
    }

For Thumbnail Data

3. just assign the local url path

    attributeSet.thumbnailData = try? Data(contentsOf: url)
   

4. to debug and getting know what is going on simply just

   do {
       attributeSet.thumbnailData = try Data(contentsOf: url)
   } catch (let error as NSError) {
       print(error)
   }
   

Answer 3

One approach is to let the server send a very low resolution thumbnail of the full image directly to the client using an open socket connection (that is usually used for chat apps).

This way the client doesn't need to trigger an async download operation to download the thumbnail so it can immediately present the thumbnail to the user (with some kind of an overlay or blur)

In order to send it over the open socket, server can convert the low resolution thumbnail to base64 string and send it as a string.