Speed up your site with image sprites

How to make css image sprites

There are several techniques for speeding up your site. If your site is using many graphical objects this also means the your users browser needs to establish many HTTP connections to display all the images. This can slow down your site. By implementing image sprites on your site, you can radically reduce the number of HTTP requests required t display your site, and thereby speed up the rendering of your site.

This post gives you the background behind image sprites, and a example on how to implement image sprites on your website.

Background

The idea behind image sprites is to combine several images into one image, and then use CSS positioning to display the different parts of the big image as individual images.

The benefit of having multiple images in one common file is, that each individual image also means a individual HTTP request, and HTTP requests takes time. You can therefore speed up the page loading time significantly by joining 6 individual images into one common image sprite, since the image sprite means 1 HTTP request compared to 6.

Another important benefit of using image sprites is, that the size in KB of the image sprite is smaller than the sum of the individual images. Especially if you only include common images in the image sprite that’s used many places on your site.

How to create a image sprite

In this post we’re going to apply images sprites to the following page. The page has 6 images that totally has file size of 12 kb, and to display this page, the users browser has to make 6 HTTP requests.

When working with image sprites, the first thing you need to do is to create the new combined image including all the individual images. In this example, the 6 individual images has been combined into the following image (sprite.png):

Css image sprite with 6 images

The new image has a file size of 6 kb. This means that by combining the images into one image the image size has been reduced with 6kb (12kb originally – 6kb new). This might not sound like much, but if your site has huge traffic, 6 kb per user per page actually can be a lot of bandwidth saved.

Please notice that if you just need one part of the image sprite for a page on your website, the entire image needs to be loaded. You can therefore use the following rules of thumb for selecting weather an image should be included in a image sprite or not:

  • Images that are frequently used in your site could be included in a global image sprite
  • Images that are only used on a single page/template could be added in a page specific image sprite
  • Very big images, that are only used on special and low traffic pages shouldn’t be included in image sprites

Creating the CSS

Now that the image sprite file has been created, the next step is to create the CSS that can identify different parts of the image as individual images.

First we’re creating a CSS class “spr1”, that defines what file should be used for the image sprite.


.spr1 {
  background: url(img/sprite.png) no-repeat top left;
}

Next we’re going to define where in the individual images can be found in “spr1”. A CSS class is created for each of the individual images. The class has two parameters: the height and width of the image, and the pixel coordinates of the upper left corner of the image in the common file (sprite.png).

Finding pixel coordinates for image sprite in Adobe Photoshop

You can find the pixel coordinates of the upper left corner of the individual image in your image editor. In Photoshop pixel position can be found in the “Navigator/Info palette” (X: Y:). If this palette isn’t open, it can be activated in Window>Info.

The CSS classes looks like this:

.digg {
  height:32px; width:32px;
  background-position: -5px -7px;
}

.email {
  height:32px; width:32px;
  background-position: -42px -7px;
}

.facebook {
  height:32px; width:32px;
  background-position: -79px -7px;
}

.gowalla {
  height:32px; width:32px;
  background-position: -5px -44px;
}

.stumbleupon {
  height:32px; width:32px;
  background-position: -42px -44px;
}

.twitter {
  height:32px; width:32px;
  background-position: -79px -44px;
}

Displaying the images

Now that the CSS and combined image is ready, we just need to  create the HTML for displaying the images. In this example we’re using a little trick to display the sprites as images. First a transparent 1×1 pixel image (1×1.png) is displayed as a image, and then the previously defines CSS classes are used to display the relevant part of the combined image as background. The HTML for the Digg part of the combined sprite image is:


<img src="img/1x1.png"  class="spr1 digg" alt=""/>

There you go, now a nice icon for Digg is displayed like in the original example, but now the icon is taken from the common sprite instead. Using the same procedure for the other background images, creates the final file.

The file looks exactly like the original file, but total image size has been reduced 50%, and http requests has been reduced from 6 to 1. Both things are great for your hosting provider (and the money you have to pay for your hosting) and for your users, that will experience a faster site.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

2 Replies to Speed up your site with image sprites

  1. Very helpful n worth reading!

  2. dbriers says:

    This was a very helpful post for a self developing wordpress user. I’ve always wondered why some websites used sprites.

Comments are now closed for this article.