Performance enhancements in Sharepoint 2010 using Css sprites

Today, let's learn a technique that improves the performance of your web page. It's the CSS sprite!

The idea of this technique is to combine all the images that you use in your web page into one single image and seperate out each image using some simple css code.

So, here's how you get started on the sprites in the world of web.

Step 1:
Google for any site that generates a css sprite image for you, you can also download tools for the same purpose but online is much quicker according to me.

I generally use InstantSprite.com. Once you are in the site, upload all your images on it, it immediately creates the sprite image, the corresponding css code. You can also specify the gap between each image if you want.

 

Step 2:
Save the css sprite image on to your desktop from the site, copy paste the css code into a notepad for future reference.

Step 3:
Now, let's make use of what has been generated. In order to use the new image named csssprite.png for ex in your project, add it to the mapped images folder. Then, copy the txt file which contains the css code also into the mapped layouts folder. Open the .aspx page for ex where you have to use the new image. Now, modify the "src" to point to the new image and provide the style containing the "top","left","width" and "height" values, this the most Important step in the whole process.

Make sure you use the corresponding css code which points to that image, this should be fetched from the .txt file which has the css code.

Typical Css Sprite image

Typical Css Sprite code

.sprite { background: url('sprite.png') no-repeat top left; width: 96px; height: 96px;  }
.sprite.Alien1 { background-position: 0px 0px;  }
.sprite.Alien2 { background-position: 0px -106px;  }
.sprite.Balloon { background-position: 0px -212px;  }

Example of a css sprite image being used in an .aspx page

<img id="imgPictY" src="/_layouts/images/MyWebpart/webpartCssSprite.png"
                runat="server" style="top: -52px;left:0px;position:absolute;" /> 

Step 4:
Once the changes have been made and the solution has been updated, you need to now check that the new images are being loaded. You might need to clear your browser's cache before reloading. To make sure the right image is loaded, i generally use HttpWatch and look at the round trip calls which will have the call made to the new css sprite image.

Advantages of using Css sprite
1. Reduces the number of calls to the server.
2. Easy to use, modifying the code is uncomplicated.
3. All you images are stiched into one, hence images called in different locations are loaded even before the page is accessed.

Disadvantages of using css sprite/ Things to be aware of before creating one
1. Adding too many images together in one css sprite image can increase the image size and hence the load time of the page
2. Updating an existing css sprite image is not the easiest and has to done with precision to make sure the css code doesnt change for old images.

All in all, we found that using this techinque in our project has worked wonderfully well and has reduced the calls to the server by 15%. This is a very powerful technique to improve the performance of your site if used in the right way.