Whenever I build a website, I always try to learn a new piece of coding functionality or technique in order to improve the site itself and to improve my coding skills. Getting a new piece of code or function to jump out of the screen (in most cases) always fills me with a real sense of accomplishment.

Often, these techniques are hit and miss; either they don’t work out as well as I would’ve liked and are consequently discarded (though stored in my head for possible use on future projects) or they worked really well and quickly became integral to the website.

When I was building GeekZenith.com, the technique I tried out was CSS Sprites. I’d heard the vaguest of rumblings about the technique in the usual coding and web design circles for some time, without really finding the need to investigate the issue further. I wish I had.

I uncovered the (not so) secrets of CSS Sprites while searching methods to reduce web page load time. Using a web optimisation tool, I discovered that the number of HTTP Requests on the main page was slowing down the page load time. The helpful tool also indicated that the majority of HTTP Requests were for website based images and a quick Google search querying how to reduce this lead me directly CSS Sprites.

The basic idea for CSS Sprites is to have all of your website’s images on one main image and then use CSS to show only a particular section of this main image using the CSS position function. The obvious advantage of this is the reduction of HTTP Requests: in my case, there were a half dozen sent for images, after using the Sprites there was just one (because there is now only one image).

The image below is an example of a single image which, using CSS Sprites, was used to build this website:

As you can, see all the main image components for GeekZenith.com are grouped together, packed together in to improve image optimisation. Below is the home icon (shaped like a small house on the bottom line of the image), which has been extracted from the image above using CSS Sprites:

And here is the code that makes this happen:

width: 32px; height: 32px; background-image: url(http://www.geekzenith.com/wp-content/uploads/2010/05/ims.gif); background-position: -185px -555px

Now let’s break the code down:

width: 32px; height: 32px

The height and width of the above CSS matches the proportions of the home image precisely and of course this sets exactly how long and how wide the object will be (in this case, a DIV tag).

background-image: url(http://www.geekzenith.com/wp-content/uploads/2010/05/ims.gif)

This retrieves the image from whichever directory you have it stored.

background-position: -185px -555px

This piece of code positions the image so that the home icon fits snuggly into the 32 pixel by 32 pixel it’s placed it in. To get the exact placement of the image, the pixel range must manipulated until correct and there is no exact science to this. It’s trial and error, changing the number of pixels until the imag is precisely where it should be. Without this piece of code, the CSS has no direction and will just read the image as it’s meant to – from the top let hand corner of the image. See below:

Think of it like this: get a plain piece of paper and cut a small hole in the middle of it. Take a photo of yourself and place it behind the photo. Position the photo so that your face can be seen through the hole. In this analogy, the DIV is the paper, the image is the photo and the CSS is what places the photo where it needs to be.

The Awesomeness Report

Benefits:

• Reduces HTTP Requests.
• Reducing web page load time.
• Can reduce total image size

Drawbacks:

• It takes time and patience to locate the position of the desire image using the CSS code.
• Cannot be used for list-style-image CSS function.
• Cannot be used for repeating images (such as the background gradient for category navigation on this website).

Verdict:

Whilst it is marginally limited to just the CSS background-image tag and somewhat time consuming to position the image correctly, this method is worth using if only to reduce the number of HTTP Requests. Bottom line is, it will help reduce page load time and make user experience all that much more bearable.

Want to Learn a little more about CSS?

Then GeekZenith.com heartily recommends:

Like this fantastical post on Facebook!

Share this awesometastic post with your friends on Facebook!