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 and then the whole sharp images loads.

I am not sure about the technical term here but they seem to be pre-fetching a lossy version of images and then download the rest of data.

How can I achieve this?

  • 2
    I think they are just progressively encoded JPGs, I don't see any additional HTTP requests?
    – MrWhite
    Sep 26 '12 at 20:21
  • AJAX calls to load images while user scroll the page to them. Search for jQuery image preloader
    – Trouble
    Sep 26 '12 at 20:26
  • 1
    Are you talking about "Lazy loading"? Sep 26 '12 at 21:03
  • @AurelioDeRosa yes may be its called Lazy loading.
    – AJ.
    Sep 27 '12 at 5:18

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.

  • You're wrong about how progressive JPEGs work, but yes, they're the right thing to use. Or interlaced PNGs if you're storing graphics and not photos.
    – DanMan
    Nov 4 '12 at 0:11
  • @DanMan - I can't remember the site where I double checked this now. That'll teach me to always include a reference link.
    – ChrisF
    Nov 4 '12 at 10:38
  • No problem, just making sure that noone learns something wrong. If there were really multiple images in the same file, the file size would be much bigger, wouldn't it? Progressive JPEGs are actually often a little smaller. They're just stored differently internally, so the 8x8 blocks which they're made of can be loaded in multiple passes instead of completely one at a time. Let's leave it at that.
    – DanMan
    Nov 4 '12 at 18:42

Lazy-loading images might be your answer. Consider this http://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">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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