CSS Sprites is a well established technique in web development. In this technique collection of images put into a single image and with CSS just the required part of the image is shown. Actually a web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

Where Are CSS Sprites Used?

CSS sprites can be used in various cases. But the main purpose of this concept is to put multiple images into single images. So you can use it with small websites to large web projects to combine multiple images into single images and can reduce multiple HTTP request. It also helps to keep design maintainable and easily updatable. CSS Sprites usually work well in a pixel-based design, but they are hard to use in em-based designs due to the restricted background-position-property.

Tools to Combine Images

There are many tools available online which generates CSS sprite. They provides very simple interface to upload multiple images and generate sprite CSS and sprite image. Using that generated CSS and image, you can easily apply this concept. Below are some major CSS sprite which you can use to generate CSS and image.

Also you can combine images manually.

CSS Sprites Example


Here I will explain how I have applied CSS Sprites with social icons at the top of page. You can see in the CSS(Before) below how each individual class has background image. Each individual class is making HTTP call to load background image. These five small social icons are making five separate HTTP call which increases server load time.

  1. #social-icons li a.pint {background-image:url(‘../images/pint.png’)}  
  2. #social-icons li a:hover.google {background-image:url(‘../images/google.png’)}  
  3. #social-icons li a.facebook {background-image:url(‘../images/facebook.png’)}  
  4. #social-icons li a:hover.twitter {background-image:url(‘../images/twitter.png’)}  
  5. #social-icons li a:hover.rss {background-image:url(‘../images/rss.png’)}  

Using CSS Sprites, we can really enhance this example up. Instead of having five separate images for social icons, we can literally combine all of them into one big long image.

Going through above online CSS sprite tools, you can combine multiple images into one large image. It also generate a sprite CSS to display particular image pixels. Also you can create a new image manually that is as wide as your widest image and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.

Now we’ll see CSS (After) example. In below CSS, there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.

  1. #social-icons li a{backgroundurl(../images/socials.png)}  
  2. #social-icons li a.sprite-facebook{ background-position0 0width23pxheight23px; }  
  3. #social-icons li a.sprite-google{ background-position0 -73pxwidth23pxheight23px; }  
  4. #social-icons li a.sprite-pint{ background-position0 -146pxwidth23pxheight23px; }  
  5. #social-icons li a.sprite-rss{ background-position0 -219pxwidth23pxheight23px; }  
  6. #social-icons li a.sprite-twitter{ background-position0 -292pxwidth23pxheight23px; }  

So using of sprites isn’t difficult. You should do it. First develop your website without thinking sprite with separate individual images and then finally apply spiriting concept with images. if you have already complete website then you should go for CSS sprites concept without making any delay because Google now counts site speed as a Ranking Factor, it can effects your site search rank.