WebsiteTips.com - Web Design Tutorials, Tips, Top Resources

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:

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.

New and Popular CSS Books
Recommended by WebsiteTips.com

  •  Cover - CSS Mastery. by Andy Budd, Simon Collison, Cameron Moll. 02-2006. 
  •  CSS Web Site Design. By Eric Meyer. Peachpit Bk/CD-Rom (11-09-2006). 
  • The Art and Science of CSS. By Cameron Adams, Jina Bolton, others.
  •  Transcending CSS. by Andy Clarke, Molly Holzschlag. 
  •  More Eric Meyer on CSS, by Eric Meyer. Published by New Riders, 2004. 
  • Cascading Style Sheets: Separating Content from Presentation, 2nd Ed. By Owen Briggs, Steve Champeon, others. Glasshaus, 03-2004.
  • Book cover: The CSS Anthology: 101 Essential Tips, Tricks & Hacks, Practical Solutions to Common Problems, by Rachel Andrew
  • The Zen of CSS Design, by Dave Shea, Molly E. Holzschlag. Peachpit 12-2004.

Read reviews, why we recommend each book in our CSS Books Recommendations section!

In association with In association with Amazon.com

Step 1: Prepare, Combine the Icon Images

Icons Grid

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, Trackbacks
p.aud = Audio version
p.cat = Categories
p.perm = Permalink
ol.comment... = Comment list items
p.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:

  1. The background image doesn't repeat
  2. 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

Screenshot - Add Icons as Background Image

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;
}

...

top‘On this page’ menu

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 Icons Grid

Icons Grid 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.

Screenshot - Add Icons as Background Image

View the above example as a live HTML page: CSS Sprites, Step 3: Results of Adding CSS Positioning. (A separate popup window will open.)

top‘On this page’ menu

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

Screenshot - Add Icons as Background Image

View the above example as a live HTML page: CSS Sprites, Step 4: Final Results. (A separate popup window will open.)

top‘On this page’ menu

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?

  1. to save bandwidth
  2. to reduce HTTP server requests
  3. and thus speed up page load times
  4. 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:

The Original Images
Image File Size
aud.gif 159 bytes
cat.gif 136 bytes
com.gif 114 bytes
link.gif 105 bytes
time.gif 368 bytes
The New Combined Image
Image File Size
all.gif 564 bytes
Comparison
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:

Combine CSS sprites with other optimization and you'll find considerable bandwidth savings and much faster loading pages.

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with Amazon.com 

Our Other Sites

SKDesigns

Effective, accessible, standards-based Web site design since 1996

SKDesigns - skdesigns.com

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves


Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation