What are CSS Sprites?
CSS Sprites is a method of combining multiple images used throughout your website into one big image. You can then use the proper background-position CSS attribute to load the particular image you want from your CSS Sprite using the X and Y coordinates.
CSS Sprites and Website Performance
A lot of people are under the assumption that it would be faster to reduce image file sizes and load every image individually. This is not true, in fact, it’s quite the opposite. The reason for this is because every time you make an HTTP request (whether it’s in your HTML code or your CSS code) you essentially create one more connection that has to occur in order to fully load a given page. So, for instance, if you have a page with 16 background images (as referenced in your website’s CSS file) that means that in order for that page to load it has to make 16 individual HTTP requests for each of those images. That’s not to mention any additional HTTP requests that will have to be made for stylesheets, JavaScripts, etc..
By combining all 16 of those background images into one big CSS Sprite the website only has to make one HTTP connection instead of 16 individual connections. This also means that anytime an image needs to be loaded on the fly (i.e. a rollover image) that image will already be loaded without any delay thanks to the fact that it’s already been loaded as part of your single CSS Sprite file.
So, not only are you drastically increasing performance by reducing the amount of connections but you can also take advantage of your CSS Sprites by using CSS image preloading.
How to Make a CSS Sprite
When it comes to creating CSS Sprites you’ve got two options. If you’re proficient enough with a photo editing program such as Adobe Fireworks or Adobe Photoshop then you’ll have no problem creating a CSS Sprite. For people who aren’t as savvy with those sorts of programs we recommend using SpriteMe. SpriteMe is a bookmarklet. After you’ve added it to your bookmarks bar, you simply go to any website and click the SpriteMe bookmarklet. SpriteMe will then open up an overlay over the right side of your screen with everything you need. You’ll also find that there is a demo on the SpriteMe site which will greatly assist anyone who isn’t as knowledgable.
Here’s an example of what a CSS Sprite would look like (this was created in Adobe Fireworks):
CSS Sprite Example
The above is an example of what a CSS Sprite might look like. Keep in mind there are a lot of different ways to do this. Some people like to leave 1 pixel of space in between each image just to provide some space. Other people like to leave a substantial amount of space between images. You’ll also find some people who like to stack things next to each other in rows to maximize the use of space. The bottom line is that there really isn’t a wrong way of doing this. So, with that being said consider the above example just that, an example.
Implementing the CSS Code
Now that you’ve finished making your CSS Sprite it’s time to get down to the nitty gritty and put CSS code in place so that we can actually make use of our CSS Sprite. For our example we’ll use the CSS Sprite above and show you how we made it work with the ‘Submit Comment’ button on our Comment Form at the bottom of this post.
#commentform input[type=submit] {
width: 122px;
height: 26px;
border: 0px;
background-color: #FFFFFF;
background-color: #FFFFFF;
background: url(/images/btn-sprite.png) no-repeat 0px 201px;
}
#commentform input[type=submit]:hover {
cursor: pointer;
background-position: 0px 175px;
}
Basically the trick here in using the CSS Sprites in your code is that you’re referencing the X and Y axis from the CSS Sprite. In this case the CSS code uses the background attribute, references the image URL, and finally addresses the X and Y axis which happen to be 0px for both.
The hover version of the button doesn’t have to reference the background image URL since it’s already been referenced above. Instead you simply need to change the Y axis to 175px to reflect the fact that the hover state of the button is above the non-hover state of the button.
I realize this might initially come off as confusing but I promise you once you play around with it you’ll see it’s actually very simple. If all of the CSS Sprite images are aligned to the left then your Y axis always remains at 0 pixels. This is one reason we prefer to stack our images all aligned to the left since it takes a lot of the guess work out of it. Given that your Y axis would always be the same in this case the only thing that would change is your X-axis. So, if the non hover button is at 0 pixels on the Y-axis and 201 pixels on the X-axis then the hover button above it would be at 0 pixels on the Y-axis and 175 pixels on the X-axis.
