Wednesday, April 29, 2009

How to show blurry images first and then progressively show clear image

InterlacedNormal
We have a slow net connection and when we browse our site we can see that the images are loaded line by line from top to bottom. We can change this behaviour by saving the image as Progressive (jpeg) or Interlaced (gif). We can achieve this using GIMP or there are lot of free image editing softwares out there.
The Interlaced image will have a bit more size than normal image, but the user will have a better experience.
Try loading the two images in different window and see the difference.
The Interlaced image will first load the whole image, but the image will be blurred. This will get sharper and finally the clearer image will be displayed.
In case of normal image, the section of image loaded will be sharp, but the whole image will not be loaded at once.