Increasing Your Page Speed With Css Sprites

Looking for an efficient way to increase your page speed and/or make effective CSS image rollovers? If you’re a Web Developer and you don’t know how to increase loading times with CSS Image Sprites, it’s about time you jump on board!

What Is A CSS Sprite Image?

A CSS Image Sprite is a master image made up of a collection of multiple small images needed for a website. This image is set as a background image and references the images with x and y points using the CSS property ‘background-position’.

Why Use CSS Sprites?

CSS Sprites increase the page speed of a website. Instead of loading multiple small images on a website, we are using just the one, so instead of an HTTP server request for each image, our server request is made once.

By using CSS Sprites, we can also make image rollovers work alot more smoothly for users. When we create image rollovers with a separate image for our hovered state, we are not downloading that image until the user has hovered on the image. This can cause a flickering effect when first downloading. When we use a sprite image, our hover state image has been downloaded already, as it’s the same image we have downloaded for our default image state, which inturn creates a perfect rollover.

spriteTo Build A Rollover Navigation With CSS Sprite Image:

Demo | Download

1. First you need to create your sprite image. When creating this, ensure there is enough space between each image so that the next image won’t be showing (this will be based on our elements height). For example, if you have a 10px x 10px icon you wanted to show at the top of a div that was 30px x 30px you would need to make sure the image below your icon was 20px below your image or it would be appearing in your div element.

To the right is the sprite image I have created for a Rollover Menu.

2. Next you need to create the elements you want to display your image in.

Below my menu is made up of 3 links, each assigned with a unique class, which I will reference with my CSS further on.


<a class="home" href="#">Home</a> <a class="about" href="#">About</a> <a class="contact" href="#">Contact</a>

3. Finally, assign your sprite image as the ‘background-image’ property, set the position of the background image using the ‘background-position’ property and set up any hover states as required.


<style type="text/css">
    /*our sprite image*/
    /* general styling */
    padding:14px 10px 3px 35px;
    /* Move the background up 75px to show the about icon */
    background-position: 0px -75px;
    background-position: 0px -141px;
    /* Move background to show hover state icon */
    background-position: 0px -39px;
    background-position: 0px -108px;
    background-position: 0px -172px;

Demo | Download

If you like the article please subscribe us.


Please follow and like us:

Leave a Comment

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