Using CSS Sprites

If your website has got a lot of small images on it, each one of those images will make an HTTP request on your server, loading it up and slowing down your website considerably.

One of the best ways around this, one of the best ways to speed up your website is to use CSS Sprites. A CSS Sprite is a collection of these small images, all stored inside one single image file.

It will then use its built-in properties to choose which bit of the image needs to be displayed and where it needs to be displayed.

While this does not cut down on how much data is downloaded by a browser, it does reduce the waiting time while the requests are being fulfilled.

Advantages of Using a CSS Sprite

Using a CSS Sprite brings untold benefits to your website, including:

  • Not so many HTTP requests made to the web server
  • Only a single file needs to be cached
  • Page loading speeds improve significantly

How to Use CSS sprites:

You could, if you are very confident and have knowledge and experience in HTML and CSS, create your own sprites and customize them to your requirements.

However, this can be intensive work, especially if you have a lot of images so the best way would be to use a tool designed specially to combine your images.

For example, you could use a bookmarklet called spriteme.org, which will analyze the web page you specify, find all the images that can be combined into a sprite and do it for you.

It will also put your images into groups by several different attributes so that the best result can be gained.

Alternatively, there are a number of plugins that you can use but do make sure you use one that doesn’t compromise the speed gains you get from using the CSS Sprites.