Using CSS Sprites to save effort and web storage
Posted in Web Development — no comments.
Yes, I know that CSS Sprites it’s an old technic and you probably know about it. But I still see many people using a single image to do a mouseover effect or even two separated images, which is not wrong. But, you consume more storage and bandwidth from your hosting service, and effort to create several images. If you use CSS Sprites you will also increase your site’s performance by reducing HTTP requests.
What is CSS Sprites
If you already know what is CSS Sprites, jump to the next subject.
CSS Sprites is a technic to reduce HTTP requests, save web storage and increase your web site’s performance by grouping all the significant images into a single one. Using the CSS Background positioning it’s possible to arrange the image so only one is shown when necessary. Is it still cloudy? Check out some images below that represent CSS Sprite usage:
The sprite images above are from Google’s new layout and Amazon. They both using CSS Background positioning using only one image. There are lots of other companies using sprites like Yahoo!, AOL.com, Facebook and others.
Getting start with CSS Sprites
Now that you had an overview about CSS Sprites, it is time to get your hand dirty. There are two ways to work with sprites:
- Combine all similar images into one (icons, backgrounds, navigation items, buttons).
- Create a single image for the entire web site.
I strong recommend, if you never did CSS Sprites, to start with the first way. But, if you a web site like mine, with few images, you can gather all of them into one. For this post, I’ll use the Google’s sprite image.
Creating a web site using CSS Sprites
It’s easy and fast to create your CSS rules using sprite images. Let’s create a simple clone of Google’s result page so we can take all of the items on the image.
Step 1: HTML structure
First of all we need a HTML structure to work on. Here is a simple HTML I did to use as an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>CSS Sprite • Step 1 – Eugenio Grigolon http://eugen.io/</title>
<link rel="stylesheet" href="reset.css" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<h1>Google</h1>
<input type="text" value="google" /> <input type="submit" value="Search" class="btn_search" />
</div>
<h2><a href="#"><strong>Google</strong></a></h2>
<p>Enables users to search the Web, Usenet, and images. Features include PageRank, caching and translation of results, and an option to find similar pages.</p>
<p class="url">www.<strong>google</strong>.com
<a href="#" class="comment">Comment</a>
<a href="#" class="promote">Promote</a>
<a href="#" class="remove">Remove</a>
</p>
<h2><a href="#">Gmail: Email from <strong>Google</strong></a></h2>
<p>A <strong>Google</strong> approach to email. Gmail is built on the idea that email can be ... Keep unwanted messages out of your inbox with Google's innovative technology.</p>
<p class="url">mail.<strong>google</strong>.com
<a href="#" class="comment">Comment</a>
<a href="#" class="promote">Promote</a>
<a href="#" class="remove">Remove</a>
</p>
<h2><a href="#"><strong>Google</strong> Videos</a></h2>
<p>Search and watch millions of videos. Includes forum and personalized recommendations.</p>
<p class="url">video.<strong>google</strong>.com
<a href="#" class="comment">Comment</a>
<a href="#" class="promote">Promote</a>
<a href="#" class="remove">Remove</a>
</p>
<h2><a href="#"><strong>Google</strong> Maps</a></h2>
<p>Find local businesses, view maps and get driving directions in <strong>Google</strong> Maps.</p>
<p class="url">maps.<strong>google</strong>.com
<a href="#" class="comment">Comment</a>
<a href="#" class="promote">Promote</a>
<a href="#" class="remove">Remove</a>
</p>
<h2><a href="#"><strong>Google</strong> News</a></h2>
<p>Aggregated headlines and a search engine of many of the world's news sources.</p>
<p class="url">news.<strong>google</strong>.com
<a href="#" class="comment">Comment</a>
<a href="#" class="promote">Promote</a>
<a href="#" class="remove">Remove</a>
</p>
</body>
</html>I’ve already added Eric Meyer’s CSS Reset file to make your work easy. Preview step 1.
Step 2: Making it prettier
Let’s make it prettier by adding some CSS styles, font colors, paddings and margins. Add the following code below the reset.css file:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />Create a file and name it style.css and let’s add some line codes in it:
body{
padding:10px;
}
strong{
font-weight:bold;
}
div.header{
border-bottom:1px solid #c9d7f1;
padding-bottom:20px;
}
h1{
float:left;
margin-right:15px;
}
h2{
font-size:18px;
margin-top:20px;
}
h2 span{
font-size:12px;
}
h2 span.no_comments{
color:#ccc;
}
p{
font-size: 14px;
}
p.url{
color:#008000;
}
p.tags{
margin-top:20px;
}It’s not a awesome layout, but it’s good for this example, right? Preview step 2.
Step 3: Adding the CSS Sprites technic
Ok, now that we have a “nice” layout, it’s time to add some CSS Sprites technics. Let’s start with the logo, I’ve made a copy of Google’s sprite image and named it google_sprites.png.
Before we start coding, here’s a trick to find image’s position and size. I’m using Photoshop to create grids and “map” the position of each image, that way I can easily find the X and Y to add in the CSS code. After adding the grids, use the Info window (Windows > Info from menu bar or F8 key) to visualize the values.
Now we know that the image size for the logo is 137 x 49 pixels and the position is 0 (zero) left and -41 pixels top. Yes, it is -41px top because we want the image goes up, if you insert a positive value, the image will go down. Let’s create the sprites.css and add it just below the styles.css file:
<link rel="stylesheet" href="sprites.css" type="text/css" media="screen" />Note: while I’m doing the sprites code, some codes will be added to the style.css but will not be here. You can download the ZIP file with all the correct codes at the end of this post. Now, let’s add the code for the logo:
h1{
display:block;
overflow:hidden;
width:137px;
height:49px;
text-indent:-5000px;
background:url('google_sprites.png') no-repeat 0px -41px;
}I’ve used the image replacement technic, and added the CSS Sprite technic (last line) calling my sprites image and positioning it at 0px left and -41px top. And here is the code for the other elements:
input.btn_search{
height:30px;
padding:0 10px;
border:none;
color:#fff;
background:url('google_sprites.png') repeat-x 0px -167px;
}
a.comment, a.promote, a.remove{
display:inline-block;
width:16px;
height:16px;
overflow:hidden;
text-indent:-5000px;
margin-left:2px;
}
a.comment{
background:url('google_sprites.png') no-repeat -82px -119px;
}
a.comment:hover{
background:url('google_sprites.png') no-repeat -99px -119px;
}
a.promote{
background:url('google_sprites.png') no-repeat -137px -55px;
}
a.promote:hover{
background:url('google_sprites.png') no-repeat -153px -55px;
}
a.remove{
background:url('google_sprites.png') no-repeat -137px -70px;
}
a.remove:hover{
background:url('google_sprites.png') no-repeat -153px -70px;
}And we’re done! Preview step 3.
Conclusion
I may noticed how easy is to work with CSS Sprites, save you time and effort, web storage and bandwidth, and increase your web site’s performance. You can also use YSlow, a Firefox add-on, to review the usage of files and images from your site. If you want, download the files used in this post.
Download css-sprites.zip (29Kb)
Feel free to leave your question or suggestion in the comments below.
