When you try to gauge your page load speed with tools such as Google's Page Speed Online or WebPageTest, you probably get a rude awakening that your page is making unnecessary HTTP requests for those apparently harmless, tiny social icons. That could be bad for your seo performance. One technique that helps in reducing server visits is to combine as many images as possible into a single file. CSS Sprites serve such a purpose.

The good news is that online generators, for example SpriteMe and Project Fondue's CSS Sprite Generator, are available to ease the pain. That may not be your cup of tea, in which case I invite you to follow how I did the CSS Sprite used for the social links on this page. You need to be familiar with using a graphics program such as Photoshop, Gimp or Fireworks. A smattering of css will also come in handy.

  1. Open up your image manipulation software and import the separate icons into the program. The images should be of the same size. In my case, each image measures 22px by 22px.
  2. Place the images 15 pixels apart on horizontal, X axis. This is my setting. You can set it to anything you want but it would be easier to leave it at 15px in order to follow along.
  3. Ensure that the images are aligned both vertically and horizontally.
  4. Crop the canvas to a height of 22px, same as for the images. Your composition should now look similar to the image below: social icons montage
  5. Export the result to your favourite format. I have saved mine as 'social-sprite.gif' under my icons folder.
  6. You may also want to create a transparent gif of 1x by 1x but this is provided as part of the complete exercise download file.
  7. Send your graphics program to sleep once more, as you won't be needing it for the rest of this exercise.

The html/css principle is simple. We will use the sprite image as a background for the div that houses our social links. We then assign a transparent gif image to each link's anchor element and superimpose that on the background image. The spacing of each link is adjusted via css to match the distance between the icons - 15px in this case, as suggested in step 2 above.

  1. In your document, create a div with id of "sprite".
  2. Create a ul with class of "content-sprite".
  3. List your links according to their position on the sprite image.
  4. For each anchor element, make sure to specify 'transparent.gif' as image source and set the correct height and width. Your container should look similar to the following extract:

<div id="sprite">
<ul class="content-sprite">
<li><a href="#" title="twitter" ><img src="icons/transparent.gif" alt="twitter" width="22" height="22" /></a></li>
<li><a href="#" title="linkedin" ><img src="icons/transparent.gif" alt="linkedin" width="22" height="22" /></a></li>
<li><a href="#" title="facebook" ><img src="icons/transparent.gif" alt="facebook" width="22" height="22" /></a></li>
</ul>
</div>

Our css is basic but effective:

* {margin: 0;} /* css reset to satisfy Internet Explorer peculiarities */

#sprite{
background-position: left top;
background-image: url('icons/social-sprite.gif');/* your sprite location */
background-repeat: no-repeat;
height:22px; /* change to height of standard size of your image */
}

.content-sprite{
padding:0px;
}

.content-sprite li{
float: left;
list-style-type: none;
width: 22px; /* standard width of your images */
padding-right: 15px; /* this is the spacing between images */
}

.content-sprite img{
border:0; /* set to 1px to see the effect */
}

Using CSS Sprite, we have ended up with a smaller file size overall, which can only be a good thing for the burden on your server, and your seo performance. The method I have provided here works on all major browsers, and IE6.

DOWNLOAD


Comments (0)



Add a new comment:

This thread has been closed from taking new comments.
  • twitter
  • linkedin
  • facebook
  • email
  • buzz
  • ping
  • stumbleupon
  • google
  • delicious
  • digg
  • newsvine
  • technorati
  • reddit
  • rss