Fast icon toolbars with CSS Sprites

I always try to make web interfaces as fast as possible. Yet, when we were building our Web content management system, we got complaints from users with slow internet connections. It was the number of icons that made the interface slow: each image used is a separate HTTP call to the server. When you use too many of them, you can actually see them loading one by one. Instead of using many different images, we started using a technique called CSS Sprites.

The background image

All the icons are stored in one single image, which is used as a background image for all the icons. I collected all the Notes 6.5 smarticons in a single file, using a 20 by 20 pixel grid:

Picking out each icon

Each individual icon is then picked out by changing the background position. I used CSS and a separate id for each. In a real life situation, you would store the actions in a JavaScript array instead of hardcoding them.

The HTML

<div id="actions">
    <a href="#Expand" title="Expand" onclick="alert('Expand');return false;" id="expand"></a>
    <a href="#Collapse" title="Collapse" onclick="alert('Collapse');return false;" id="collapse"></a>
    <a href="#Previous" title="Previous" onclick="alert('Previous');return false;" id="previous"></a>
    <a href="#Next" title="Next" onclick="alert('Next');return false;" id="next"></a>
    <a href="#Search" title="Search" onclick="alert('Search');return false;" id="search"></a>
    <a href="#Edit" title="Edit" onclick="alert('Edit');return false;" id="edit"></a>
    <a href="#Save" title="Save" onclick="alert('Save');return false;" id="save"></a>
    <a href="#Cancel" title="Cancel" onclick="alert('Cancel');return false;" id="cancel"></a>
    <a href="#View" title="View" onclick="alert('View');return false;" id="view"></a>
    <a href="#New" title="New" onclick="alert('New');return false;" id="new"></a>
</div>


The CSS

#actions{background:#f60;height:26px;border-bottom:solid 1px;margin-bottom:10px}
#actions a{
    background-image:url(/domino/SmarticonsR65.gif);
    display:block;
    height:21px;width:21px;
    float:left;
    border:outset 1px;
    margin:1px
}

#expand{background-position:-3260px -40px}
#collapse{background-position:-3260px -80px}
#previous{background-position:-3300px -100px}
#next{background-position:-3300px -80px}
#search{background-position:-3280px -80px}
#edit{background-position:0 -20px}
#save{background-position:-180px -140px}

#cancel{background-position:-80px -140px}
#view{background-position:-3180px -20px}
#new{background-position:0 -140px}