This is a technique I have personally admired for quite some time.
By using CSS sprites, you can save bandwith and improve your site loading speed by cutting down the total file size and http requests.
I know, I know — double rainbow — what does it mean!?!
Use one large graphic file to serve in multiple spots on a page, using CSS to fetch the right section of the graphic.
Here’s what it looks like:
First, you have a graphic that’s laid-out like so:
As you can see, this graphic is broken down into 100px segments:
By defining a different position, a different section is rendered:
The CSS is as simple as this:
[cc lang=”css”]#logos {height: 64px; margin: 0; padding: 0; position: relative;}
#logos li {background: url(/logos.jpg) no-repeat top left; margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#logos a {height: 64px; display: block;}
// First logo
#logos li a.jaz {background-position: 0 0}
// Second logo
#logos li a.iberotel {background-position: 0 -100px;}
// Third logo
#logos li a.solymar {background-position: 0 -200px;}
// Fourth logo
#logos li a.travcotels {background-position: 0 -300px;}
// Fifth logo
#logos li a.intercity {background-position: 0 -400px;}[/cc]
The results are undoubtedly impressive:
This isn’t hard to do, so if your a coding n00b, there’s no need to flinch.
Peter Richards explains it further on Six Revisions and provides some additional links that are worth checking out at the end of his post.
Good stuff, right?
Speak your mind...