Normally when you keep <img/> tag it shows from top to bottom while it is being downloaded from the web and looks very ugly but if you somebody’s Facebook album and click on some photo you will see the whole photo is downloaded i.e the whole photo looks blurry/hazy and then as it downloaded from the web the picture goes clearer and clearer.
It looks so natural and as against the default behavior. How can this be done? I know it is Facebook and they can do anything they wish 😉 but I need a brief overview of what they might have done to achieve this.
It’s the image that is in special form – saved as progressive.
About progressive JPEG:
A simple or “baseline” JPEG file is stored as one top-to-bottom scan of the
image. Progressive JPEG divides the file into a series of scans. The first
scan shows the image at the equivalent of a very low quality setting, and
therefore it takes very little space. Following scans gradually improve the
quality. Each scan adds to the data already provided, so that the total
storage requirement is roughly the same as for a baseline JPEG image of the
same quality as the final scan. (Basically, progressive JPEG is just a
rearrangement of the same data into a more complicated order.)
More information here.