O'Reilly

CSS Sprites

By on  

The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:

  1. Fewer images for the browser to download, which means fewer requests to the server.
  2. Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
  3. No ugly mouseover code. No JavaScript -- only CSS!

For this example, I've used the DW illustration. I have a color version and a grayscale version which I have merged into one file as you can see below.

DW!

Now, it's time to see how the system works.

The HTML

	<a href="http://domain.com" id="logo-link"> </a>

Just a very simple anchor tag with a unique ID.

The CSS

#logo-link
{
	width:191px;
	height:151px;
	text-decoration:none;
	display:block;
	background-image:url(dw-logo-sprite.jpg);
	background-position:191px 0;
}
#logo-link:hover,#logo-link:active	{ background-position:0 0; }

When the image initially loads, I want the grayscale version, which is on the right site. For this reason, I set the link's initial background position 191 pixels to the left. When someone mouseovers the link, however, I want to show the color version. It's only then that I remove the 191 pixels.

Wanna see the working version?

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

  • MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

Discussion

  1. I have known about this for a long time but I never knew it was called sprites. :)

  2. Another interesting side effect is that you can’t copy the image (in IE at least) and this gives you some image protection (for newbies that is).

    • Michael

      Yes you can copy the images in all browser. Does anyone now how to block that feature. I have seen it on several site but still cannot figure out how they do it. Thanks

    • Jeremy

      You could use some javascript to disable right clicking while the cursor is over the image.

    • Be advised, there is no way you can prevent an image from being copied. If it is visible on your browser, it is already in your computer (in temp files). The best way to prevent it from misuse is to add a neat watermark, which serves as a signature.

  3. Hey David, I’m curious as to what this does? href=”javascript:;”

  4. It’s cool. Any tools can create the sprite images other than the expensive PS?

  5. @Jesus: javascript:; tells the link to do nothing when clicked. I think another method is going void(0);.

    @NYC Guy: I recommend GIMP. Free, but not as powerful as Photoshop.

  6. Good points, but make it more generally

  7. Rob Simpkins

    NYC Guy, I have found inkscape to be a useful tool instead of photoshop, and it is free to download online too :)

    http://www.inkscape.org.

  8. I actually wrote a similar article last week explaining how to create the image, and the HTML/CSS for this for navigation images. Also, I explained how to have the text input there so it’s not jsut a blank tag so in case CSS is disabled (or background images – like if you are on a blackberry) a link will appear in it’s place.

    I really dig your font – is Cambria cross-browser/cross platform compatible?

  9. @Lindsey: Awesome article — I hadn’t seen that. The text-indent is genius. Great addition!

    As far as Cambria, every browser I’ve checked my site in has it. I’m not a Mac guy, but I’m pretty sure it works there too.

  10. Ryan

    I don’t know what browser support is like for this (I’ve checked it in IE7 and Firefox5), but by the W3 recommendation for CSS 1 this should work:

    a.rollovers{
    background-position: 100% 0;
    }

    a.rollovers:hover, a.rollovers:focus, a.rollovers:active{
    background-position: 0 0;
    }

    I’m a fanatic about improving programming style. Mostly because I’m lazy. If this helps, consider it my way of saying thanks for a post that resolved my debate between keeping style in the stylesheet or avoiding ugly background flash.

  11. Ryan

    …ahem. Firefox 2, I mean. God knows where the 5 came from.

  12. How about adding some mootools magic to the effect?

    Similar to what they did with JQuery here
    http://alistapart.com/articles/sprites2

  13. @Paul: Thanks for the suggestion!

  14. hi david, thx for this tut.. i use this for my navigation.

  15. Sven

    Thanks for sharing this.

    I am not good with css so I am hoping for some help with this “problem”:

    When I use the same css as you do and wants to line up some images (“share icons” and Smilies” with no hover) I get theme below each other and not in a line.

    I have tried to add the classic nobr tag and the css white-space: nowrap; – but still it breaks.

    Also: when I use this for share this icons and “smilies”, should I add the “background image” for each of the icons or is there a better way?

    I am sure this is a small problem for you css experts, but please give med some feedback on this.

    Thanks :)

    a.shock {
      background-image: url('css-spirite.gif');
      background-repeat: no-repeat;
      background-position: -40px -223px;
      width: 15px;
      height: 15px;
      display: block;
      overflow: hidden;
    }
    a.wink {
      background-image: url('css-spirite.gif');
      background-repeat: no-repeat;
      background-position: -116px -223px;
      width: 15px;
      height: 15px;
      display: block;
      overflow: hidden;
    }
    
    • It should work, dont know what happened to it. I have used it in my website and is working well. Its much helpfull. Before it was taking 7 sec to load but now it loads in just 3 seconds

    • It should work, dont know what happened to it. I have used it in my website (www.swastiksolutions.in) and is working well. Its much helpfull. Before it was taking 7 sec to load but now it loads in just 3 seconds

  16. If I get your problem right you want to display links with icons all in one line? If so you defined display:block on the a – this means it is now a block element – not inline anymore. Block elements get a 100% width and always fall one under another.

    To solve this add float:left; to your links and all of your a tags will float to the left part of the containing div. Also don’t forget to clear them afterwards or set overflow:hidden on the container element so elements below won’t fall under links.

    Also avoid adding html elements just to solve design issues.

  17. Sven

    @easwee: Thanks for your reply.

    Well, I am learning more and more about CSS, like “inline” and “block”. Problem solved, thanks again :)

  18. There is a free tool to create CSS Sprites automatically – http://sprites.in/ .
    If you are interested in website speedup you can also try Web Optimizer application (also as a WordPress or Joomla plugin) here – http://www.web-optimizer.us/

  19. nice and have written article about your post on my blog

  20. David

    This is great i am going to name my first born son after you. :) Thanks for the info this helped a lot and it was easy to understand.

  21. This is another one of those things you Google and get endless useless demos that are over complicated and dont work in IE.

    You example is straight to the point and works cross browser.

    Thanks for that

  22. Good points
    Thank you so much

  23. I was searching for a tutorial for css sprites, and I got to look into so complicated codes. Yours were the simplest and easiest to understand

  24. This is the very easiest method for creating and using sprites that I have ever seen. We will use this to our clients from now onwards. Thanks for the article.

  25. Thank you very much for this nice tutorial. Page Speed likes CSS sprite !

  26. GREAT… straight to the point, no blubber. thanks, I am now about to use this on my site :)

  27. i want to know, how can i insert this code into my blog. i want to use the css sprite within my content wrapper. but i don’t know how.

  28. Another cool implementation of CSS sprite: Dynamic CSS Sprite implementation to give a painting effect. Read how to implement it by reading an easy to follow tutorial at http://blog.kunals.com/dynamic-css-sprite-implementation-gives-a-painting-effect/

  29. Hi,

    Nice Article! Thanks for sharing.

    There is a tool called Sprite Master Web to generate sprite sheets automatically. It generates sprite sheet and CSS code automatically with generating smallest sprite sheets using advanced algorithms.

    You can take a look at it from http://www.mobinodo.com/spritemasterweb

    Also, you may watch the quick video here: http://www.youtube.com/watch?v=458Qx7JW5PI

  30. Ano

    Why is this article called “Creating & Using CSS Sprites” if it doesn’t show how to create sprites but only shows how to use them?

  31. Thanks for sharing!
    Our site, http://www.nbhuntop.com has totally 9 CSS images, we are planing to apply CSS sprites. This is really a good tool.

  32. CSS sprites… Well, we haven’t put it in action till now, seems but difficult for us.
    Now we have only 6 CSS pics in the home page, our site, http://www.nbhuntop.com. Is it really workable for us to apply CSS sprites? Doubting…
    Any suggestions? Friends. Thanks.

  33. You can also create Sprites using spritepad.wearekiss.com.

    It’s also a great service.

  34. Thanks, I have made my all background images into sprite.
    It boosts the speed, and also moved such sprite to cdn hosted sub domain to allow parallel downloading.

  35. Well, our site, has already made it.
    My last comments was in Aug, 2012 here.
    CSS sprite is a good tool.
    However this is still part of the optimization.
    Now our website, google page speed 99, Yslow score 95.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...