Pinoy Tech

Another day, another tip. Not really. I don’t blog everyday (at least not these days…). I am just posting to give a quick tip about CSS sprites. If you don’t know what CSS sprites are? CSS sprites are graphical images compiled in one image. Why do you have to use it? Here are some reasons why.

Benefits

1. You have a slow website and you have a lot of images being used for your website. Having smaller number of HTTP requests can greatly speed up your website’s loading speed.
2. Image re-use. Imagine if you have to manage fewer images for your website.

Sprite image:

CSS code:

div.sprite-sprite-sample {
      width: 144px;
      height: 144px;
      background: url(../images/sprite.gif) 0px -91px no-repeat;
      margin: 0 auto;
}

div.sprite-sprite-sample:hover {
     width: 144px;
     height: 144px;
     background: url(../images/sprite.gif) -144px -91px no-repeat;
}

CSS Sprite Sample:

Using fewer images are definitely the way to go. As promised, the css sprites sample.

In the css sprites example, I used only one image for the colored flower and the grayscale flower. Try hovering your mouse on it.

View working sample here: Creating CSS Sprites

PS. I lied. I used also only used one image for the tabs and the flower backgrounds for the css sprites. Ain’t that cool?