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.
http://www.google.com/images/nav_logo6.png
http://euhp4.aolcdn.com/os/repos/p/skn/blue_v1/12-blue_skin.png
http://euhp4.aolcdn.com/os/repos/logo/1-uk_logo_sprite
http://i3.microsoft.com/en/shared/…/cspSearchComponent/sprite2.png
http://i3.microsoft.com/en/shared/…/cspMscomNewsBand/NB_ltr.4.png
http://d.yimg.com/a/i/ww/met/gsprite_071309.gifhttp://d.yimg.com/a/i/ww/met/pa_icons/uk_pa_sprite_063009.png
http://www.xing.com/img/v/header_r3.png
http://www.xing.com/img/s/button_r3.png
http://images.apple.com/global/nav/images/globalnavbg.png
http://i.cdn.turner.com/cnn/.element/img/2.0/global/icons/share_sprite.gif
http://digg.com//img/menu-current.gif
http://dragoninteractive.com/lib/i/navigation/sprite.jpg
http://www.bing.com/fd/s/a/j.png
http://g-ecx.images-amazon.com/images/G/01/gno/…/navPackedSprites_v12._V222883957_.png
http://s.ytimg.com/yt/img/master-vfl117997.png
http://x.myspacecdn.com/modules/common/static/img/header/searchBg.gifhttp://x.myspacecdn.com/modules/common/static/img/header/header001.png
http://x.myspacecdn.com/modules/splash/static/img/cornersSheet.png
http://wwwimg.bbc.co.uk/home/release-34-2/img/bgsprite.gif
http://www.google.es/images/firefox/sprite2.png
If you know of any other, please post them in the comments!
Detailed tutorials
CSS Sprites: Image Slicing’s Kiss of Death
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
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.
http://www.floweringmind.com/sprite-creator/index.php
This tool is awesome. Upload your CSS Sprite image and then create the code for the various areas. (Difficult to get pixel perfect though)
http://spritegen.website-performance.org/
Conclusion
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.
You can add Firefox Start to the list.
http://www.google.es/images/firefox/sprite2.png
http://www.google.es/firefox
Good Call! How can I miss that?
I’ll add it to the list now. Thanks.
Nice post. I like your blog.
Thanks!
Check out the sprite on this site. Its huge. But such a beautiful site.
Forgot the link http://www.floridaflourish.com/
Amazing Design! Like the CSS Sprite as well.
Thanks for a marvelous posting! I definitely enjoyed reading it, you’re a great author.I will be sure to bookmark your blog and will often come back later on. I want to encourage you continue your great posts, have a nice morning!
Your style is really unique compared to other people I have read
stuff from. Many thanks for posting when you’ve got the opportunity, Guess I will just book mark this web site.