Most designs of sites found on the web verge on the graphical overload to grab the attention of the viewer — if you can accomplish it, do it. I am one myself to do this from time to time in my designs as I draw from inspiration from many of the CSS gallery sites. I am not saying this is a bad thing, but from the technical side, a heavy graphic looking site can definitely slow down page load time. Luckily there are a few tricks of the trade that make it possible to combat this through using pure CSS.
No, this is not your typical mythical creature found in most fantasy books, but instead, it is a single graphic file that is used as a CSS background image, which can be applied to elements found throughout a given site. I say one graphic file, but it really is one composed of many images. This image is then in turn referenced in your stylesheet using background positioning. A quick example:
With this basic example, we are just moving the image in space — granted we must assume that the container object of the image has a set height and width, otherwise the other images in the sprite image file could possibly show.
You are probably saying to yourself, “Hold on, does that not make the file size bigger by using one image?” In most cases it could possibly, but if you look at it from the side of the browser and page load time, it actually makes things faster! The way a browser accepts data is by serialization. This means that it can only process one item of information at a time before it gets to the next. If you use FireFox, download and install the YSlow add-on to see this in action.
So, hopefully you are thinking this is a great method for us designers and want to try it out yourself. If so, great! Now crack open Photoshop, place your images in a specific grid, write down the x and y coordinates from the top left corner of each, create your stylesheet… wait, there has to be an easier way. You know what, there is! Luckily, the guys over at Website-Performance have created a handy app that will generate your sprites for you. Check out the CSS Sprite Generator.
Just collect all your images into one folder, zip them up, and fill out the form found on the page. It will spit out the CSS for you and allow you to download the new sprite file it created. If you are really adventurous and know a little bit about your system, you can download the app and install it on your machine. All you need is a graphics library, such as GD or ImageMagick, and to be running a PHP server.
Now not all images you use will be able to fit into a single file or be created as a sprite. There are some draw backs with this method, but with experimentation some can be overcome. For example, having elements that need repeating graphics probably should all be grouped together in one sprite or similar sized objects in one sprite. You may also want actual embedded images in the page and not to be used in the stylesheet. If that’s the case, then by all means, don’t use them in sprite format.
Have fun and enjoy taking CSS to another level.