CSS Sprites Showcase

Ahmed October 2, 2009 11

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.

Google

http://www.google.com/images/nav_logo6.png

AOL

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

Microsoft

http://i3.microsoft.com/en/shared/…/cspSearchComponent/sprite2.png
http://i3.microsoft.com/en/shared/…/cspMscomNewsBand/NB_ltr.4.png

Yahoo!

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

Xing

http://www.xing.com/img/v/header_r3.png
http://www.xing.com/img/s/button_r3.png

Apple

http://images.apple.com/global/nav/images/globalnavbg.png

CNN

http://i.cdn.turner.com/cnn/.element/img/2.0/global/icons/share_sprite.gif

Digg

http://digg.com//img/menu-current.gif

Dragon Interactive

http://dragoninteractive.com/lib/i/navigation/sprite.jpg

Bing

http://www.bing.com/fd/s/a/j.png

Amazon

http://g-ecx.images-amazon.com/images/G/01/gno/…/navPackedSprites_v12._V222883957_.png

YouTube

http://s.ytimg.com/yt/img/master-vfl117997.png

MySpace

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

BBC

http://wwwimg.bbc.co.uk/home/release-34-2/img/bgsprite.gif

Firefox (Thanks to Esteban)

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!!

http://printf.ru/spritr/

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/

http://www.csssprites.com/

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.

11 Comments »

  1. Esteban October 2, 2009 at 20:20 - Reply
    • Ahmed October 2, 2009 at 20:24 - Reply

      Good Call! How can I miss that?
      I’ll add it to the list now. Thanks.

  2. Robena Akright May 30, 2010 at 02:10 - Reply

    Nice post. I like your blog.

    • Ahmed May 31, 2010 at 10:35 - Reply

      Thanks!

  3. Muhammad Abdusamad July 21, 2010 at 07:38 - Reply

    Check out the sprite on this site. Its huge. But such a beautiful site.

  4. Muhammad Abdusamad July 21, 2010 at 07:38 - Reply
    • Ahmed July 21, 2010 at 14:53 - Reply

      Amazing Design! Like the CSS Sprite as well.

  5. Randyz.com October 6, 2012 at 02:06 - Reply

    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!

  6. Adrian December 1, 2012 at 07:21 - Reply

    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.

Leave A Response »