v.plonk!

The magic of SPRITES

Let me explain the theory first: If you have several images on the website (especially small icons) that get loaded over and over again, you can either produce several small images OR you put all images in ONE image and just "move" that image in a "picture frame" by chaging it's background position.

You may ask now "what's the deal? I write more code, that's not cool!". You might be right, that you have to write a little bit more code, BUT you load the image in just 1 request, which means that instead of requesting 20-150 images you just ask the server for ONE. Furthermore it drastically improves what we call "caching": That means your browser doesn't load everything from the server everytime, but uses its own memory. That's much faster! You even might be able to write LESS code...

Okay, enough theory, let's get to the action:
First we create an image out of our images. I used that sweet young lady you can see in my blog picture (I bought the photos from istockphoto.com , so I think it's okay that I use them here). Then I putted all photos in a larger image, where I can access them by moving up or down inside the picture and I did some image manipulation to make it look better on the background.

Now the code:

#top2 { background: transparent url('SERVER_URL/eyecatcher.jpg') no-repeat; }
.top-blog #top2 { background-position: 375px -1400px; }
.top-archive #top2 { background-position: 375px -1120px; }
.top-albums #top2 { background-position: 375px -840px; }
.top-links #top2 { background-position: 375px -560px; }
.top-friends #top2 { background-position: 375px -280px; }
.top-about #top2 { background-position: 375px 0px; }

Yes... that's all! You see, we even used LESS code, as we only reference one picture instead of six!

Okay, let's explain it a bit more: First we define, that we want the picture "eyecatcher.jpg" everytime in the head by giving it as background to the ID top2. Then we do a nice trick: we shift the picture down by defining the background-position, until we reached the "subimage" we want for each part of our blog. So when the guests opens the Links list, he/she will see a different image. Cool? Hot? Both!