Show blurred thumbnail before downloading the whole image (like in Whatsapp)?

Question

I am trying to get the same nice UI effect guys at Whatsapp did. Each time I receive some image, not matter of its size, I can see blurred thumbnail in a matter of 1 sec, and over it an indicator that the real image is being downloaded.

How do they do this? I want to achieve the same effect when users download images from our server. I am not sure if they are doing some server-side image processing, or there is a built-in feature in Android SDK which can do this.

Let's say a user requests an image of 4MB. Almost instantly he clicks download, a blurred thumbnail of the image will appear over the screen and download status indicator over it. I am mainly interested how to get image preview so quickly, literally in a matter of 1 sec (feels like being instantly).

PS. Similar effect has StackOverflow when you try to upload an image. When you drag it to the upload popup, you see its preview almost instantly. I guess Stackoverflow does this by using client side scripting, which we cannot apply in Android app. But this is a good showcase of what I need (in case you don't use Whatsapp).

Answer 1

Basically what is happening in these situations is you need to request a blurred thumbnail from the server (Usually very small so it downloads quickly), and then begin the download of the full image. This is something that has to be done by the server.

Update: You can now use a technology like progressive jpeg to achieve the same effect without having your server store two separate images. Progressive jpegs basically encode a very low quality image in the first bytes of an image, and then as the image continues to load the quality improves. This may not be the exact effect you are looking for, but it should be able to show a quick low quality preview while loading in the full sized image. Currently the only way to load these on Android is with Facebook's Fresco library.

Answer 2

I have another theory. I think the method used here is that before publishing the message, they have some algorithm to generate a lightweight fuzzy low-quality picture (in the sender) and then send the contents of that array (a few bytes as a byte[] array maybe) along the published message .. now once the receiver receives the message, he can instantly display that fuzzy image and get the full image by doing a full request to the server .. What makes me think this is that if they are going to request the thumbnail from the server then why not have a detailed thumbnail ? it can be small in size as well .. why have a fuzzy thumbnail that is only a mere shallow representation of the original one and not complete like thumbnails we see in the web.