CSS sprites tutorial and examples

Today I will illustrate a very useful technique for optimizing your web. This is the CSS sprites technique, used by many large sites (Google, YouTube, Yahoo ..) precisely because it speeds up page loading. When we call an url, the browser loads first the page and then, through other http requests. These will be the javascript, css and images files. Each request involves extra time in loading the page.

This means that the lower the number of http requests that the browser will have to make, the less time it will take for the page to be visible to the user. Hence the usefulness of sprites. They are nothing more than the page images grouped together to allow the sending of fewer http requests. For the objects on that page, we will use the sprite image clipping instead of an own image.

Create the sprites image

Let’s see how to achieve this. First we group all the images on the page that should not be repeated. This because you cannot sprite a background texture. Furthermore, it is preferable even if not mandatory to convert everything to PNG or WEBP format. This is in case you need images that maintain quality even after compression or that supports transparency.

By combining the images in a single file it is good to leave 1 pixel of detachment between one image and the other so that, in case your page is zoomed for example, it does not form a phase shift of the various images. To operate this grouping you can use, for example, Photoshop (paid program) or Gimp (free program).

Assemble sprites images with css

Once the image file has been created, it is time to go to work on the page by inserting a class in the css that in our example we will call “sprites”:

.sprites {
    background: url("../sprites.png") no-repeat;
}

To which we will give the url of the sprite and no-repeat image as property to ensure that the background image does not repeat itself. Now let’s create the object to which we will assign the sprites class and an id with the dimensions. This to ensure that the background does not pop out when you insert it.

We enter the position of the background so that the part to be displayed is cut out. Keep in mind that we have to write the position in negative (therefore with the minus).
In addition, if it is a line tag and not a block tag, for example an <a> tag or <span> tag, you will also have to enter the block property so that the object takes on the dimensions.

<span class="sprites" id="test"></span>

#test {
    height: 40px;
    width: 100px;
    background-position: -30px 0;
    display: block; /* If is not a block tag. */
}

Split the images

To find the position of the background you have various possibilities:

• You can leave it to some online site that will automatically generate the code for you and group the images.
• You can use Photoshop rulers.
• The last method is the one I prefer and consists in using the editor of a modern browser that allows you to modify the code in run time and by trying to find the position of the image.

And your css sprites images are ready!

It is possible to use this system with images that repeat only horizontally or only vertically, however remembering that they must be inserted over the entire width of the sprite and the no-repeat property must be overwritten with the repeat-x (or repeat-y) property. in the background property of the object:

#test {
    ...
    background-repeat: repeat-x;
    background-position: -30px 0;
}

The possibilities of using sprites are many. The typical example is the structure of your site, since the images will be present on all pages. Another possible use is the rollover menu. You just have to insert in the sprite the state that the object will assume for a certain event and the pseudo class :hover for the event that will trigger it (in this case it is the hover of the mouse on the object).

#test:hover {
    background-position: -30px -30px;
}

Try it at home!