: How to progressively display images on websites I want to display images on my websites just like Facebook and other websites display images now - progressively i.e a complete blurred image first

@Pierce454

Lazy-loading images might be your answer.
Consider this www.appelsiini.net/projects/lazyload
It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.
Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images.

<img data-original="img/sharp.jpg" src="img/blurry.jpg">

Vote Up Vote Down

@Kimberly868

The easiest way to achieve this is to use Progressive JPG encoding. This effectively creates several images each one more compressed than the last, though only one image is actually stored in the file.

When the file is displayed the lowest resolution version is displayed first - the blurred image - and as each subsequent image is downloaded it's displayed until the highest resolution image is seen.

The drawback with this approach is if the user's browser doesn't support Progressive JPGs and waits until it's downloaded all of the information before displaying anything.

Vote Up Vote Down