09 07/2009Damien Buckley Speed up your site with CSS Sprites

CSS Sprites are nothing new so I’m not going to reinvent the wheel – rather I’m going to explain how we’ve employed them in the new propellerglobal.com to minimise HTTP requests, decrease total image file-sizes and limit the overall page weight. All combined these small improvements dramatically reduce the time it takes a browser to download and render the page.

According to Yahoo’s Developer Network, “80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.”

For those who’ve never heard of them, CSS Sprites are a means of combining separate images used within a page or throughout a website, into one image or groups of images – grouping them together means that the browser only has to download and cache one file rather than a number of them.

Comparison of separate and combined image files.

To understand the implications, lets look at a couple of pages and consider the number of images we would be working with if they weren’t combined.

Propeller Home PageStarting with our home page (click thumbnail to enlarge). We can see that we have a total of 18 images.

Firstly we have a large background (cloud), a gradient slice for the loaded footer, our logo, 3 x images featured in the slider, the graphic, web & email icons, logo’s of the associations we’re members of and its background borders plus RSS & question mark icons and a graphic ‘subscribe’ button for our newsletter form.

If we switch to one of our more image heavy pages such as our email marketing landing page, with 36 images, the situation is much worse. There are 15 feature set icons alone.

Homepage with nav groupsReturning to our home page we can see a couple of simple and obvious groupings where we can take several images and combine them into one. Firstly if we turn our attention to our service icons sitting atop the loaded footer.

By combining the separating borders and all three icons into one image, we can not only save filesize as the combined image is smaller than the combination of the separate files, but we can also reduce HTTP requests for this group from 4 to 1 – not a bad result to get warmed up with.

The second potential group are the association / awards logos at the bottom of the page. Combining these images can take us from 5 to 1 – even better. Again, we also reduce overall file size – in this group, the separate images totalled 24kb whereas the combined file is only 16kb – a saving of 8kb!. Sure, it doesn’t sound much but once we add up the html, css, javascript and images; any savings we can make are worthwhile – improving the user experience by speeding things up AND savings ourselves some money in the long run by decreasing bandwidth usage.

We could go further and combine ALL images onto one file and in some instances this will be workable though in our instance I preferred to group the images, keeping some seperate for flexibility and ease of use. In the above example, the first image group is only used on the home page whereas the association logos are used throughout the site.

Putting it into practice

When you consider the reduction in HTTP requests and reduced image filesize, using css sprites isn’t a hard sell but how do we actually implement them?

Email feature icon setBefore we can apply css to display things where we want them, first we have to arrange the images into one file. Depending on how they are going to be used determines how straightforward this will be – for instance, as the home page groups are going to be displayed together in-line, they can simply be saved as you see them on the page.

Alternatively, the feature icons used on our email marketing landing page, are used individually along with text in a floated list. In this case, I’ve chosen to arrange all of the icons in one long thin strip (right). Applying some thought to the arrangement up-front can save a lot of headaches.

The first thing to understand with using css sprites is that we’re going to use css to apply the images as background-images.

The source code of our second example (simplified for brevity) shows that this is simply an unordered list with a containing div (purists may prefer to ditch the div and add the associations id to the <ul> instead ;)

<div id="associations">
    <li class="mcf"><a href="" title="">Winners …</a></li>
    <li class="awia"><a href="" title="">Australian…</a></li>
    <li class="wsg"><a href="" title="">Web…</a></li>
    <li class="wipa"><a href="" title="">Web…</a></li>

We’ve added classes to the list items to provide styling hooks and as we’ll be using the Phark image replacement technique here, I’ve added title attributes to take care of differences in how browsers display tooltips.

Dave Shea has a great roundup of image replacement techniques at mezzoblue.

Next we apply the css.

#associations {
	padding:17px 0;
	background:#FFF url(/site_images/….gif)
		0 0 no-repeat;

This first declaration sets the width and height of the containing #associations div and clear:left; has been added to clear the floated columns above. I’ve also set the background colour and the combined background image for the full area. Top and bottom padding has also been added to keep the unordered list centred vertically between the top and bottom borders.

#associations ul {

Zero out any default margin and padding on the <ul>.

#associations li {

Here, we float the list items and zero default margin & padding. Adding display:inline solves any IE6 float tomfoolery (as there are no margins applied to the floated list items this may not be strictly necessary but I’ve got used to adding it whenever setting up this kind of floated arrangement to save myself time and headaches).

#associations a {

Declaring display:block ensures the link will expand to fill the list containing it and I’ve set a universal height for all links. Applying text-indent:-10000px shifts the link text off the screen whilst leaving it available to screen readers. The only thing left to do is to declare the various link widths to accommodate the different logo sizes.

.mcf a, .awia a {width:284px;}
.wsg a {width:135px;}
.wipa a {width:252px;}

Thats it, one image, a lightweight list and a single HTTP request.

Slightly more complex…

Email Marketing Landing PageThe previous example is a simple implementation as the image is applied to the whole containing element and the links are arranged over the top – a modern day image map if you like.

But what about more complicated situations where the icons have to be displayed individually and apart from others included in the master image. Back to our email marketing landing page.

In this example, all of the icons are included in one file but we’re displaying them individually in floated lists with feature descriptions.

In this example, as no links are used, the code is even more basic.

<ul class="feature-list">
  <li class="time">Create…</li>
  <li class="wysiwyg">WYSIWYG…</li>
  <li class="people">Send…</li>

Again, an unordered list with classes added to the individual list items. To the css.

ul.feature-list {
	margin:0 -10px 0 0;

First things first, we zero out default padding. You may have noticed I’ve zeroed margin apart from the 10px negative right margin. I’ve done this to accommodate the right hand margin I’m going to add to the floated list items later. I’ve also declared overflow:hidden without which the unordered list would collapse.

.feature-list li {
	margin:0 10px 20px 0;
	background:#FFF url(/site_images/….jpg)
		 0 0 no-repeat;

Here, we’ve removed any list styling and using the same float / display combo as our previous example, I’ve arranged the list in-line. Height & width are added to set the list block size along with right and bottom margins to give them some breathing room. Left padding is used to create the white space in which we’ll reveal the ‘background’ icons and then the background declaration is applied, setting the background colour and image for all list items.

All we have to do now is to shift the background image into position to ‘reveal’ the correct icons. Had I spent more time on setting up the image, I’d have ben working with a nice grid and could have moved the background image in nice incremental values – 100px, 200px etc. In this instance it was quicker to get the image together and adjust the values until I got the position just right.

li.time {background-position:0 -5px;}
li.wysiwyg {background-position:0 -97px}
li.people {background-position:0 -175px}

… you get the message, I don’t need to include all of them right?

This technique can be extended to create fast rollover effects but thats for another day.

Like this? Share it!

Recent Projects

  • The 'New' Stradbroke Island Beach Hotel Website

    Stradbroke Island Beach Hotel

    We dont often share single website launches but in this instance there is a degree of history behind it which speaks to a return on investment not normally associated with websites.

  • Brown Brothers Engineers New Zealand

    Brown Brothers Engineers New Zealand

    December 2013 saw the launch of a new Brown Brothers Engineers Australia website. October 2014 sees the turn of New Zealand parent company Brown Brothers Engineers.

  • RedFest 2014


    Read about Propeller’s 2014 responsive reboot of the RedFest website.

  • Into Harmony Health Services

    Into Harmony Health Services

    Into Harmony Health Services are located in Bayside, Brisbane. Melanie Young has been passionate about health and wellness for over 30 years. Following a substantial period of rehabilitation following a car accident and surviving cancer in her late twenties, Melanie has dedicated years of personal development and training to assisting other people with their health challenges.

Get The Latest!

Subscribe to our free e-newsletter for our latest news and offers - direct to your inbox.