Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question
2  
I think they are just progressively encoded JPGs, I don't see any additional HTTP requests? – w3d 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"? – Aurelio De Rosa Sep 26 '12 at 21:03
@AurelioDeRosa yes may be its called Lazy loading. – AJ. Sep 27 '12 at 5:18

2 Answers

up vote 2 down vote

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.

share|improve this answer
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
up vote 0 down vote

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">
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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