Hi and welcome to this week’s web design video blog. Today we’re going to talk about designing websites using CSS sprites. Firstly we’re going to explain what CSS Sprites are, secondly how they work and thirdly why they are becoming very popular with web designers.
One of several PNG CSS Sprites used on Facebook.
If you’re not already familiar with CSS Sprites you’ve probably come across the term on blogs, in books or magazines. Traditionally, web design elements like navigation bars, icons and backgrounds are ‘sliced’ into pieces and then stuck back together in HTML in CSS. The initial thought process behind this was that the website would load gradually, tricking the eye into thinking the website was loading quickly.
A CSS Sprite is a one single image that contains a patchwork of some or of all the images that might be loaded on the page. Then, using CSS and a little maths, the designer can display a specified part of this image by defining their co-ordinates. The best way to show you a CSS Sprite and to explain how they work, is to check out a well known, live example of a CSS Sprite in action.
The CSS Sprite showing the 4 different states used for Apple's respected navigation bar. (Click to Enlarge.)
Adopting CSS Sprites can be a daunting prospect, particularly if you’re used to slicing your images and working with them individually. However it’s important to understand why the CSS Sprite technique is being used more and more by professional web designers. Firstly, there’s the fact that you can be a lot more organised – Less images and less code.
Secondly and most importantly, page speed. Combining your icons and images into a single graphic will usually result in an overall smaller file size. Plus your website will be making far fewer HTTP requests, having to only load a single image instead of multiple smaller ones. Smaller file sizes and fewer HTTP requests give you a faster loading website resulting in a better user experience and happy search engine spiders.
