- You are here:
- WebsiteTips Home
- Articles, Tutorials, Tips
- CSS
- CSS Sprites for Blog Icons
CSS Image Sprites: How to Create CSS Sprites for Blog Icons, Web Site Icons
by Shirley E. Kaiser, M.A., SKDesigns
Published October 04, 2007. Copyright © 2007-2008 Shirley E. Kaiser, M.A., SKDesigns and WebsiteTips.com. All rights reserved.
Combine all those blog icons or Web site icons into 1 single image and use CSS positioning to display them all where needed. Your pages will load faster since you'll save bandwidth, HTTP requests, and more. Learn how in this CSS sprites tutorial.
I decided to turn my 5 individual blog icon images 
into 1 combined image and use CSS background positioning to display each icon where needed for blog post dates, comments and trackbacks, categories, audio versions, and the post permalinks (permanent links) - an approach nicknamed CSS sprites or CSS image sprites. This tutorial explains:
- how to create a combined icons graphic in Adobe Photoshop for use as CSS image sprites
- how to create the CSS image sprites approach to display the 'sprites' icons appropriately where needed
It's really not hard to do at all, especially if you set up an image grid that shows not only where to place the icons within the image but also provides the numbers to use for your CSS positioning. You'll see what I mean in this tutorial.
Why combine icon images into 1 image and use CSS positioning for this CSS image sprites approach? Why Bother with CSS Image Sprites? below describes the optimization benefits of CSS sprites, such as saving bandwidth and HTTP requests to help your pages load faster.
What about browser support? See Cross-browser, Cross-platform Compatibility Testing, W3C Validation below. You may be pleasantly surprised!
Skill Levels: This tutorial assumes a basic familiarity with CSS positioning, a basic familiarity with Adobe Photoshop or other graphics software.
On this page:
New and Popular CSS Books
Recommended by WebsiteTips.com
Read reviews, why we recommend each book in our CSS Books Recommendations section!
In association with 
Step 1: Prepare, Combine the Icon Images
First I added Photoshop 'Guides' at 100px intervals for each icon, then positioned the icons so that the top of each icon snapped to the corresponding guide, as shown in the image to the right.
Each icon is left-aligned at '0' (zero) except for the 'links' icon (smaller icon, worked better for this layout to center it within this graphic).
Why the 100px interval space? If the user resizes the font in the browser, I don't want the icons above or below the displayed icon to show at all. The space between the icons is to allow plenty of extra room to avoid this, as well as to allow for browser font display rendering differences.
We'll also use this grid matrix below in Step 3: Add CSS Background Positioning to position each icon with CSS.
Step 2: Add the Icon Graphic as a CSS Background Image
Designate the CSS Classes for Each Icon
First, the key to the CSS classes in the examples:
p.time = Date and time of blog post p.time span.com, p.firstcom = Comments, Trackbacksp.aud = Audio versionp.cat = Categoriesp.perm = Permalinkol.comment... = Comment list itemsp.firstcom = Comments area: Comments, Trackbacks: __ so far...
Designate the CSS Background Image
Since each of the above CSS classes use the same icon graphic, we can use a combined CSS rule to add the background graphic for all of them. Note:
- The background image doesn't repeat
- Adding left padding allows horizontal space for each icon display to left of text. Otherwise the text would display over the top of the icon.
p.time,
p.time span.com, p.firstcom,
p.aud,
p.cat,
p.perm
{
background:url(/img/icons/all.gif) no-repeat;
padding:0 0 0 19px;
font-size:x-small;
}
Results of Adding the CSS Background Image
- For this first step, you'll see ONLY the top icon
, which is for comments. Step 3: Add CSS Background Positioning will then position and display the proper icon for each class. - Also note that the icon might be partially cut off in some or all of the locations, depending on the browser you're using. Step 4: Fine Tune the CSS will tweak the CSS a bit to display each icon fully.
View the above example as a live HTML page: CSS Sprites, Step 2: Results of Adding the CSS Background Image. (A separate popup window will open.)
TIP:
Note that although I used the paragraph element for these examples, if you have a list, consider using list items with CSS sprites icons, such as navigation:
/* Key to #nav classes
li.hom = Home
li.arc = Archives
li.sub = Subscribe */
#nav li.hom,
#nav li.arc,
#nav li.sub {
background:url(/img/icons/all.gif) no-repeat;
padding:0 0 0 19px;
}
...
Step 3: Add CSS Background Positioning
This step will position each icon to display for comments, categories, audio versions, post dates and times, and permalinks. Step 4: Fine Tune the CSS will tweak the CSS for the specific layout.
Display Each Sprites Icon Using CSS Background Positioning 
- The
background-position's first value is always zero (0) for this particular use since the icons are flush left in the graphic:background-position:0(whatever); - The comments-trackbacks icon is at the top of the graphic, so the
background-position's second value in this case is also zero (0):background-position:00; - The category icon
is 100px from the top of the graphic, so the background-position's second value is then a negative (minus) 100px:background-position:0-100px;
The rest are also based on how many pixels they each are from the top of the graphic as listed below.
/* Comments */
span.com,p.firstcom {
background-position:0 0;
}
/* Category */
p.cat {
background-position:0 -100px;
}
/* Audio */
p.aud {
background-position:0 -200px;
}
/* Date, Time */
p.time {
background-position:0 -300px;
}
/* Permalink */
p.perm {
background-position:0 -400px;
}
Results of Adding CSS Background Positioning
Below are the results of adding the CSS background positioning rules. While each sprites icon is now visible, some or all of them are partially cut off at the bottom, depending on the browser you're using. That's an easy adjustment addressed in Step 4: Fine Tune the CSS below.
View the above example as a live HTML page: CSS Sprites, Step 3: Results of Adding CSS Positioning. (A separate popup window will open.)
Step 4: Fine Tune the CSS
Now it's time for the minor but important fine tuning. As shown in Step 3 above, the icons are visible but some are cut off a bit. Fine tuning the CSS will alleviate that.
Add Top Padding
There are lots of ways to tweak the CSS to make sure the icons aren't cut off. I chose to add top padding to each individual class rule if needed.
First I addressed the clock icon for the date and time of each post, adding 4px top padding:
/* Date, Time */
p.time {
background-position:0 -300px;padding-top:4px;
}
I then proceeded to add top padding to the remaining icon CSS rules, adding just enough for the icons to show completely without throwing off their placement. I also designated margins just for visual design, not for the sprites.
CSS Sprites Final CSS
/* The background image for all */
p.time,
p.time span.com,
p.aud,
p.cat,
p.perm,
p.firstcom {
background:url(/img/icons/all.gif) no-repeat;
padding:0 0 0 19px;
font-size:x-small;
}
/* Comments */
span.com,p.firstcom {
background-position:0 0;
}
/* Category */
p.cat {
background-position:0 -100px;
}
/* Audio */
p.aud {
background-position:0 -200px;
margin-top:5px;
margin-bottom:0;padding-top:3px;
}
/* Date, Time */
p.time {
background-position:0 -300px;
margin-top:0;
margin-bottom:0;padding-top:4px;
}
/* Comments trackbacks (to right of Time, Date) */
p.time span.com {
margin-top:0;
margin-bottom:0;padding-top:2px;
}
/* Permalink */
p.perm {
background-position:0 -400px;
}
CSS Sprites Final Results
View the above example as a live HTML page: CSS Sprites, Step 4: Final Results. (A separate popup window will open.)
Cross-browser, Cross-platform Compatibility Testing, W3C Validation
In addition to local testing, the markup and CSS in this tutorial have been thoroughly tested in the multitude of browsers via BrowserCam.com with several versions of Windows, Mac, Linux, and a multitude of browsers for each OS. The result is virtually identical in each. This approach even works with Internet Explorer 4.
For Netscape 4 and other very old browsers, however, it's best to hide the CSS background images and styles from them since they won't do positioning properly for this.
In addition, all the markup and CSS is based on W3C Recommendations and validates. No hacks are used.
It's always a good idea to do thorough cross-platform, cross-browser testing for Web site development work.
Why Bother with CSS Image Sprites?
- to save bandwidth
- to reduce HTTP server requests
- and thus speed up page load times
- Plus, it's fun to do!
Here is some hard data about the savings for my own site. I started with already optimized, small image files for my icons:
| Image | File Size |
|---|---|
| aud.gif | 159 bytes |
| cat.gif | 136 bytes |
| com.gif | 114 bytes |
| link.gif | 105 bytes |
| time.gif | 368 bytes |
| Image | File Size |
|---|---|
| all.gif | 564 bytes |
| Image | Total File Sizes | Total HTTP Server Requests |
|---|---|---|
| Original Images | 882 Bytes | 5 |
| New Combined Image | 564 Bytes | 1 |
So, what was the result? What did I save?
Bandwidth saved: 318 bytes
HTTP server requests saved (per page view): 4
Multiply that by the number of visitors per day, per week, per month, per year, and it adds up to quite a savings in bandwidth, in addition to speeding up page load times a bit.
So, my own answer is that it's more than worth it, especially when I look at the bigger picture over time. I was already using these icons as background images, so reducing the CSS rules to only 1 icon image ended up shaving a little off my external CSS file, too.
IMPORTANT NOTE:
- If your individual images aren't already optimized, your file savings and bandwidth savings can be substantially more than the numbers I show above.
- In addition, you'll save even more if your images were embedded within the HTML rather than used as CSS background images.
- A nice bonus is that when you redesign it will be so much easier to swap out those icons in your CSS when they're implemented as CSS background images rather than all those icons being embedded within your HTML.
Combine CSS sprites with other optimization and you'll find considerable bandwidth savings and much faster loading pages.
