CSS Sprite guide for non technicals

You might have came across the word CSS Sprite while reading articles or tips on website speed optimization.This concept is mentioned in more or less all of the website speed optimization guides but does not provide in depth idea of the concept in simple non technical terms.

Lets understand this concept with an example.You have 6 social media buttons places on your website.All of these buttons are lightweight approx 3K.So in total it is 18 bytes.Now web browser is loading your page then it needs to fetch these 6 images from your server to display them on the page.For each social media button image web browser needs to make one request.

I know above paragraph is technical so let’s make it more simple.Suppose I need to bring six boxes from a shop.For this task I need address of the shop.I will have to find address of the shop.Finding address of the shop is like domain lookup (web browser tries to locate server from which image is to be fetched).

Now after finding the shop I will have to give order for the item.Shop keeper will take the order and place the item for my taking.Now web browser makes connection with your server for the item (server sees whether the item occurs or not and then places it for web browser to download).Web browser downloads the item.

Now this whole task of going to shop and coming back home with the item should be repeated for all the items.So you will have to cover the distance from home to shop 6 times and negotiates with shop keeper 6 times.On the similar lines web browser have to lookup for DNS,make connection for each of the images.

Now consider a situation in which you need to visit shop only once and you have a carry bag to put all the six items.One catch here is weight of 6 items combined should not be more than your capacity to lift.Will it be better? Yes it will be as it will cut down 5 times effort of visiting the shop and placing order and coming back home.

On the similar lines web page will load faster if browsers have to make fewer requests.This can be achieved by combining all the social media images in one image.Also the images combined should be small remember the total image size should not be much (recall the capacity statement made above in this regard).

This is where concept of CSS Sprite comes in.CSS Sprite is nothing but combining all the images in a single image and using CSS to display them on your webpage.Now the question is How to create CSS sprite and display them on web pages?

First of all select all images you want to create CSS sprite from.Then use http://csssprites.com/ to combine the images in a single image.You can download resultant sprite image as well as CSS and HTML code to display them on your webpage.

Enjoy the performance benefits of CSS Sprite.Feel free to share your queries and thoughts.

Share this post on

4 thoughts on “CSS Sprite guide for non technicals

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Ashok Koparday

    Yes, hardly anywhere how to on sprites is given.

    I still haven’t understood the positioning.

    Good work.
    Best wishes,
    ashok

    Reply
    1. Esha Upadhyay

      I will update the post..While creating sprite you get the position..I will attach a sample in this post

      Reply
  2. sangram

    Well explained ..specially for a layman.. but bloggers rarely use images sprites..
    i have seen just big sites using image sprites.

    Reply
    1. Esha Upadhyay

      Yes website load time being a ranking factor top sites have adopted it earlier..but there is no reason to be left behind..I am using it for quite sometime now with good effect..The social media icons on this site is css sprite example

      Reply