Combine all 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 were 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 icon 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.
Skill Levels: This tutorial assumes a basic familiarity with CSS positioning and a basic familiarity with Adobe Photoshop or other graphics software.
On this page:
- Step 1: Prepare, and Combine the Icon Images
- Step 2: Add the Icon Graphic as a CSS Background Image
- Step 3: Add CSS Background Positioning
- Step 4: Fine-Tune the CSS
- Cross-browser, Cross-platform Compatibility Testing, W3C Validation
- Why Bother with CSS Image Sprites?
Step 1: Prepare, and 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.
Read Also: How To Use Personalization And Automation For Small Business Growth
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 postp.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 to display to the left of the 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.
Step 3: Add CSS Background Positioning
This step will position each icon to display 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:0 0; - 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.
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
Cross-browser, Cross-platform Compatibility Testing, W3C Validation
In addition to local testing, the markup and CSS in this tutorial have been thoroughly tested 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.
