February 16th, 2008
CSS sprite technique is a way to improve performance of a website by combining images in a single large “map” of images, and then display the relevant portions of it on the page elements.
Actually, this technique is used for YouTube Player as well.
Here is the list of CSS Sprite Technique Samples.
Using CSS Sprites, we can really lighten this example up. Instead of having ten separate images for the buttons (five default states and five rollover states), we can literally combine all of them into one big long image.
Check it out the AFTER example.
We were able to reduce the number of HTTP-Requests by 9 and the total file size of the image(s) by 6.5 KB. That’s a pretty huge improvement for such a little example. Imagine what you could do on a full website.
You can see the basic CSS Sprite Technique sample for Navigation.
WebDesignerWall shows you creative CSS Sprite Menu. You can download the sample file.
This is a sample of using jQuery and CSS Sprite. That’s amazing Menu.
This is a sprite image for the menu.
Here is another sample of using jQuery and CSS Sprite. That’s really clever idea!
12 page sprite
the page-turning part
Here is the demo.
CSS Sprite Generator is an online tool to help automate the process of generating CSS sprites. Given a ZIP file containing 2 or more images (GIF, PNG or JPG), it will generate a sprite image and the corresponding CSS rules to target and display each compo