Sprite-sheet Usage in Web Application (.NET MVC)

I just recently deployed a web application (.NET MVC) that has quite a bit of images / icons (Current there are around ~50 separate .png files taking up around 40KB.) throughout and I was curious as to the benefit of creating a single-image sprite-sheet that could contain all of the images as opposed to having multiple images.

Is it worth the effort to create a sprite-sheet that contains all of the images in a si开发者_开发问答ngle image and refer to them by position?

Would this assist any issues such as "flickering" loading? (images can occasionally load after the rest of the page)

Any suggestions would be greatly appreciated!

Creating a single image sprite from multiple images could definitely speed up page load times and avoid flickering. I have used the Image Optimization Framework in some of my projects with very good results. It is important though to wisely choose the images to be put in the sprite and the way they are grouped. Button icons are great candidates for this job. Bigger images that appear only on some pages should not be included in the sprite.

I think you would want to "preload" your image(s) using some scripting at the top of the document. There is a good discussion here:

How does the javascript preloading work?

Also, you could reference your icons in your stylesheet for the page. Either way should have the icons available without flickering.