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?
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.