BLOG

Increasing Your Page Speed With CSS Sprites

17 Jul 2012

0 Comments

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.

How to Build a Rollover Menu with CSS sprite image:

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.
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.

Code

<a class="home" href="#">Home</a> <a class="about" href="#">About</a> <a class="contact" href="#">Contact</a>
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.

Code

<style type="text/css">
a.home,a.about,a.contact{
   /*our sprite image*/
   background-image:url(../images/sprite.jpg);
   background-repeat:no-repeat;
   /* general styling */
   display:inline-block;
   text-decoration:none;
   color:#1367b2;
   padding:14px 10px 3px 35px;
   font-weight:bold;
   font-size:14px;
}
a.home:hover,a.about:hover,a.contact:hover{
   color:#1c466e;
}
a.about{
    /* Move the background up 75px to show the about icon */
   background-position: 0px -75px;
}
a.contact{
   background-position: 0px -141px;
   padding-left:40px;
}
a.home:hover{
    /* Move background to show hover state icon */
   background-position: 0px -39px;
}
a.about:hover{
   background-position: 0px -108px;
}
a.contact:hover{
   background-position: 0px -172px;
}
</style>

LIVE DEMO

Home About Contact

What are the limitations?

We are limited with image sprites when it comes to elements that need a repeated background. Generally won't work, however if the repetition is only going horizontally or vertically (not both), this can be worked around.

If your repetition is required only horizontally, organise your images in your sprite file to appear under each other and make your repeating image stretch the full width of your sprite. Use the CSS property 'background-repeat:repeat-x;' for repeating horizontally. Alternatively if you require your image to repeat vertically, do the opposite, have your images line across horizontally so that the image that will repeat vertically can stretch the full height of your sprite. Use 'background-repeat:repeat-y;' for vertical repetition.