permalink

10

CSS Sprites in Under 10 Minutes

In this post I’m going to teach you everything you need to know about CSS Sprites in under 10 minutes – you’ll learn a little the basics of what they can do..and more importantly, how you can implement them in your projects. So, lets start!.

So..what is a Sprite?

Back in 2004, a guy called Dave Shea came up with a simple CSS-based approach to using multiple-images across a website and combining them into a single master image. His concept was quite straight-forward -  to show a single image from the master image you would use the background-position property in CSS to define the exact position of the image to display. It was versatile enough that you could use hover, active or focus effects using the same background-position property for any element displayed. 

 

Why should I use them? It’s easier to just slice my images separately, right?

CSS Sprites have a lot of different advantages. The first is that your users only need to download a single image file for the graphics on your page (and thus it can complete loading much quicker). Secondly, if you need to update any of the graphics on your page, you only need to release a single image file live to have the chances come into effect. Need to optimize all your images? A master image just requires one round of optimization so you effectively cut down your work exponentially.

 

Before I learn how to use these Sprite things..who else is using them?

Everybody. Apple.com, Amazon, YouTube, CNN and even Digg.com use CSS Sprites for their graphics. There’s even a website that helps you generate your own Sprites by uploading your image to their server.

 

Okay..so how are they done?

Lets take the example of a horizontal navigation menu. Normally you would do something like this to set each of the background images for your menu items:

 

#nav li a {background:none no-repeat left center}

#nav li a.item1 {background-image:url(‘../img/image1.gif’)}

#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}

#nav li a.item2 {background-image:url(‘../img/image2.gif’)}

#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)}

 

For 10 different images that’s a whole 10 different HTTP requests that need to be made. We’re talking about what.. 20-40kb in total that your page needs to load up (just for the graphics?)  We can do better than that..

If instead you use a "master" image to store all your menu backgrounds, it’s as easy as pie to use background-positioning to access the same images:

 

#nav li a {background-image:url(‘../img/image_nav.gif’)}

#nav li a.item1 {background-position:0px 0px}

#nav li a:hover.item1 {background-position:0px -72px}

#nav li a.item2 {background-position:0px -143px;}

#nav li a:hover.item2 {background-position:0px -215px;}

 

That means your page just needs to perform 1 HTTP request to grab all your image and it only takes up 15-18kb as you’re not using multiple files with their own image headers.

 

Here’s another quick and dirty example:

Here’s a master image which contains some pretty cool vector characters. I would like to use the third one, so using PhotoShop, Fireworks or my favourite image editor, I find out how far away the image is from the left and how far it is from the top. As you can see this is -196x and -2px. The image is 115px in width. Accessing the image is thenas simple as doing the following:

 

.sprite {background:url(sprite.png);} 

.thirdimage {width:115px; background-position:-196px -2px;}

 

And that’s it!. If I’ve successfully convinced you that CSS Sprites are the way forward,

click here to learn how to get the positions of the images in your "master" so you can start

making your own or check out the CSS Sprite generator here.

10 Comments

  1. I want to know how to do sprites in fireworks, I have an Image with all the icons but that's not arranged well, then I was cuted, I have the slices but now I don't how to: Get the CSS for each slice (I meaning {backgroun-position:Xpx Ypx; }). and the image sprite from the sliced image with icons. Please help me. In addition, I want to know how to do that in Fireworks…not with Web Tools, Generators or anything like that… Thanks!

    • Hi there.

      Sprites in Fireworks are relatively easy to do. If you take a look at the toolbar to the left hand side of the screen you'll see a number of icons. Look for the section called "Web" and use the Sprite Knife tool (second icon, the one to the right) to create your sprite sections. Once you've created all your sprites you can export them using the File -> Export option (remember to select Export Sprites from the final dialog window).

      I have to ask..but why would you need to change the CSS properties of an image regarding positioning if Fireworks allows you to position it anywhere you want on the canvas? You could easily move everything to where you want it to be inside of the application itself.

      That said, if you really need to modify the css, for example, if there's a layer of Flash or something going on top of it, simply add an ID to the overall image map that's created and then use #idname { css goes here.. } to style the positioning of the entire image.

      Hope that helps!
      Addy

    • Hi there.

      Sprites in Fireworks are relatively easy to do. If you take a look at the toolbar to the left hand side of the screen you'll see a number of icons. Look for the section called "Web" and use the Sprite Knife tool (second icon, the one to the right) to create your sprite sections. Once you've created all your sprites you can export them using the File -> Export option (remember to select Export Sprites from the final dialog window).

      I have to ask..but why would you need to change the CSS properties of an image regarding positioning if Fireworks allows you to position it anywhere you want on the canvas? You could easily move everything to where you want it to be inside of the application itself.

      That said, if you really need to modify the css, for example, if there's a layer of Flash or something going on top of it, simply add an ID to the overall image map that's created and then use #idname { css goes here.. } to style the positioning of the entire image.

      Hope that helps!
      Addy

  2. Pingback: Tweets that mention CSS Sprites in Under 10 Minutes | AddyOsmani.com | Where Web Businesses Grow -- Topsy.com

  3. Pingback: Tweets that mention CSS Sprites in Under 10 Minutes | AddyOsmani.com | Where Web Businesses Grow -- Topsy.com

  4. Pingback: CSS Sprites in Under 10 Minutes « Jasper Blog

  5. Pingback: CSS Sprites in Under 10 Minutes « Jasper Blog

  6. I want to know how to do sprites in fireworks, I have an Image with all the icons but that's not arranged well, then I was cuted, I have the slices but now I don't how to: Get the CSS for each slice (I meaning {backgroun-position:Xpx Ypx; }). and the image sprite from the sliced image with icons. Please help me. In addition, I want to know how to do that in Fireworks…not with Web Tools, Generators or anything like that… Thanks!

Leave a Reply

Required fields are marked *.