So, I remember reading about CSS sprites a year or so ago but never used them until the other day. Basically a sprite is an image with many images inside it. Facebook for example takes this to the extreme. They utilize CSS sprites to round the corners of your profile pic and for some other uses as well. Take a look at the linked images and you’ll probably get where this is going.

Basically instead of having multiple images swapped in and out by CSS you create one master image and use CSS to reposition the background-image to suit your needs depending on what section of the sprite you want to display to the user. No load lag and no flicker. Pretty snazzy…

I found two tutorials online which were easy to follow and within minutes I fully understood how to use and manipulate sprites via CSS. The first one I read was written by Dave Shea for the website “A List Apart”. The second one was from “Well Styled”.

Check out both the tutorials above and I’m sure you’ll agree this is the best, most elegant way to do this type of image manipulation. This may be old news so to speak but I thought it was still worth looking at again. I hope you find the info as useful as I did.