15

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).

3 Answers 3

14

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.

2
  • 1
    So the server has to store two images for one reference?
    – EdmDroid
    May 23, 2014 at 5:09
  • Generally you have two different urls, eg www.example.com/images/img1.png vs www.example.com/images/img1_thumb.png. But yes the server will either need to store the original and the thumbnail or generate the thumbnail when needed.
    – Alex
    May 23, 2014 at 5:13
7

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.

2
  • 1
    I don't know your answer is right or Falkon but like your solution over array.. I think your answer is too good.+1 for this Jun 1, 2015 at 12:09
  • thank you for your vote. it is still a theory but can be confirmed by sniffing traffic sent to whatsapp servers from your local LAN .. anyway, what also makes me think this way is that the receiver gets that thumbnail super fast which makes me think that it is part of the original message itself .. Jun 1, 2015 at 16:49
0

I believe that there are two part in this process

  1. First is message part which is loaded from api server which will have text contents of the message and very small/blurred image (Base64 encoded string of the image) with url to actual video. example

    {message:"Hi this is my video uploaded..", thumbnail:"..base64 string of image", url:"...url to video file with key or without"}

  2. Second is Media part which starts when user click on download button after seeing the preview image from url served with message.

While uploading the message we can also so the same thing either we generate thumbnail/blurred image and submit the message in two part

  • First upload message with thumbnail to api server and get key for media server
  • Submit video to media server with key provided by api server.

              Or
    
  • First upload message to api server and get key for media server

  • Submit video to media server with key provided by api server and let server generate thumbnail for video.

Here i believe that we are running two separate server one for handling static contents and another for api calls.

Hope you all agree with me or suggest any correction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.