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.
Sprites to the rescue
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:
1 | .sprite{ background: url(sprite.png) no-repeat 0 0; } |
2 | .sprite.image1 { background-position: 0 -50px} |
3 | .sprite.image2 { background-position: 0 -70px} |
4 | .sprite.image2 { background-position: 0 -100px} |
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.
One file != slower page load
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.
As an example, a given web page may have 2-3 stylesheets, 2-3 javascript files, multiple images, some 3rd party statistical code and of course the rendering of the page. Each one of those files has to be processed and then rendered by the browser. Putting those images into on file, not only removes those extra calls, but nine times out of ten, the end user has their cache mechanism setup on their browser so that file doesn’t need called on the next page refresh or call.
Heavy lifting done for you
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.
Looking for some icon sprites? You can generate your own from the sprite generator or you can find the Silk Sprites handy that utilize the awesome FamFamFam icon set.
Experiment till your hearts content
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.