I’m going to skip the long introduction to CSS Sprites as they have been discussed in detail (see ‘Detailed tutorials’ below) many times across many websites.
This post is primarily here to only showcase websites that use CSS Sprites.
What is an Image Sprite?
Basically, an image sprite is one big (master) image that contains many smaller images. Part of this master image is then used in different places on a webpage.
Ok, so why should I use this? Basically, it helps load web pages quicker as the server only needs to make 1 image request to the server as opposed to 27, say.
It’s tough to implement and not needed for a small site however for the larger ones, it’s strongly recommend.
You’ll have to see the showcase below to fully understand them.
CSS Sprites showcase
Please note: I was going to display the image sprites on this page but due to their large size, thought it best to link to them directly.
If you know of any other, please post them in the comments!
CSS Sprite Generator
Please don’t complain, I’ve never used any of these!!
You can upload multiple images using this tool and then generate the CSS code for the sprite.
This tool is awesome. Upload your CSS Sprite image and then create the code for the various areas. (Difficult to get pixel perfect though)
The big question. Should you use CSS Image Sprites?
For most people, the answer is NO. It won’t make a difference to most websites and will only waste your time.
If your website receives hundreds of thousands of hits daily then you should consider using CSS Sprites to ease user experience.
For web design agencies, I would say it’s a must to attract large contracts.
Well, in the end, it’s your choice. It probably good do use CSS Sprites at least once to get a good feel for it.