Make CSS sprites – how to guide

Make CSS sprites – how to guide

If you are regular developer of web applications, you might have come through people who make CSS sprites. CSS sprites are a common use in web development and help optimize the speed of web page load time. Thus, it reduces the amount of data to be loaded and increases the website speed.

The concept of CSS sprites is very simple. Images are combined into a single file or canvas and merged together. Each image has a particular position and dimension in the final large image. So, when the CSS style markup calls the image to be displayed, each image is referred to with the ‘background-position’ property.

The main advantage of this method is that the browser loads one file from the server for delivering to multiple image points on the website. Load time is increased highly and images are placed normally as they would be placed for separate files.

Beginning to make CSS sprites

When you make CSS sprites, you must take into account a few things.

First, you must segregate all your similar images into one place for a single sprite. Multiple images are not a problem, but variety dimensions may be a problem when writing the CSS. So, for example all button background images, for hover, for clicked – everything in a single image sprite. Then, place the list item backgrounds in a different sprite.

This helps you when you synchronize the image backgrounds with your CSS codes. Otherwise, if each image portion has variable dimensions – you’ll face a lot of trouble setting the ‘background-position’ property.

 

make-css-sprites

 

Second, make sure you maintain one particular sequence when you make CSS sprites. So, for all image sprites, place the hover image just below the default background and then below everything place your ‘active’ state background (if you require this).

What I mean to say is if you put the hover state background at the top for an image, your initial background-position property would be (0, -30px) for example. This is because at (0, 0) the image present is the hover background. The default has fallen below that. This is not wrong logically or technically but is a bad practice.

Make CSS sprites images

You can make CSS sprites with any photo editing tool. I personally prefer Adobe’s Photoshop. To create a sprite, just align your desired images one below the other. So, suppose your image has dimensions 30 X 30 units. Start off by creating an image file with dimensions 30 X 60. So, the height element is 60 units.

The idea is to put the default image background on the top half of the image canvas and the hover image background in the lower half of the canvas.

Take a look at the following images to get an idea –

Once this image is ready, you are ready to implement a sprite for your web. You can also make CSS sprites that contain a ‘clicked’ state image along with the other two. So, that’s not a big deal. Just increase the canvas height from 60 to 90 units and add the clicked image background in the lowest 30 unit area.

For the CSS just write the below code and you’re all done (the below code shows example of buttons default and hover)

#logo{
    background: url('logo.png') 0 0
}

#logo:hover{
    background-position: 0 -30px;
}

You can make CSS sprites of horizontal images too. It can also include variety dimensional images. The basic idea is that we display different parts of a same image according to particular user generated events. So, if you are good at CSS and have good knowledge of image editing – feel free to try anything you can think of!