How to load low quality images first for faster downloading of website?

Question

I'm working on Asp.net MVC3 web application. I'm having one page on which appx. 100 images of several size are being loaded with total appx. size of 1.5MB.

I will work on distributing this 100 images to several host names to make it load faster later on. But right now I need your help to optimize load speed of the images. And I really can't use Sprite for these images.

I'm specifically interested to implement something that can load degraded images on the first load and then gradually increase the image quality as more and more bytes are downloaded. So basically it will load low quality images on first and then as more bytes are downloaded image quality will improve.

Update: I have seen several websites where images are loaded gracefully, meaning in the beginning it looks very croppy and then their quality improves over time as it downloads further.

How do they do it?

score 6 · Answer 1 · answered Mar 27 '12 at 13:49

6

Back in the dial-up days, we used the LOWSRC property of the IMG tag to point to a low-colour GIF version of the final image. You can still use it.

<IMG HEIGHT="212" WIDTH="300" ALT="Phydueaux the Cat" SRC="cat.gif" LOWSRC="bwcat.gif">

See: http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3479971/So-You-Want-LowSrc-Huh.htm

answered Mar 27 '12 at 13:49

Diodeus - James MacFarlane

112,730
33
157
176

So its actually two images, what about doing it on single image? Have a look at question, I have just updated it. – Krunal Mar 27 '12 at 14:01
That is called "interlacing" and you have to save all of the images in a special format for that to work. – Diodeus - James MacFarlane Mar 27 '12 at 14:08

score 1 · Accepted Answer · answered Mar 28 '12 at 08:43

Presuming the images are JPEG you could use interlacing but I'm not sure I'd bother, I'd be more inclined to ensure the images are properly optimised and use the right number of hostnames to load them from.

If you want to optimise JPEGs, jpegmini.com is probably the best optimiser our there at the moment.

I'd shard the images over a few hostnames (picking the right number will be fun, I've heard six is optimal for some people but YMMV, and if you're using keep-alive it may actually be bad to use so many domains)

Use the hostnames in such a way that the first six(?) images you want come of the first one, next six images come of the next host etc., until you've used up all the hostnames and then start from the first again. (picked six as that's typically the number of parallel connections a browser maintains, so depending on which browser your visitors use you may want to use four)

The aim should be to progressively render the page so the stuff at the top is visible before the stuff below the fold.

How to load low quality images first for faster downloading of website?

2 Answers2