Starting for using CSS sprites on your projects

• Download source - 35.4 KB

We hover the image and another shows. It is not the point of the post, but to show you that what looks as two images is just one.

Introduction

This article attempts to show you how to start using CSS sprites in your Web projects. It is useful because it reduces the load of your page, because less images are loaded, reducing the server overload.

Background

Using CSS Sprites always was seen (by me, at least) as a really hard thing to do. I never understood how background-position works and how can I use it. But, with some research and with the necessity of optimization of a Web project that I'm developing, CSS Sprites are really useful and I can't discard this possibility.

If you do not know, CSS sprites is the use of only one image that have two or more images, and we use the background-position property from CSS to localize the image that we want to show to the user.

It is a Pokemon image Sprite (I'm not a Pokemon fan, just to notice). If we have every image separated, can you imagine how many requests will be opened by the client? The server will overload really fast if we have too many accesses at the same time! Using only one image is only one request opened, and only one file downloaded.

This technique is used in Amazon, Apple, Twitter, Facebook, and Developers that knows its importance.

Using the code

To understand CSS Sprites, we need to understand graph from Math. Not a long explanation, just how it works.

Cartesian plane was created by René Descartes, a French mathematician, philosopher, and physicist. He concluded that we can localize anything in a determined area with coordinates X and Y.

You learned that on school a long time ago, remember? (Reproduction / SparkNotes)

X coordinate represents Horizontal position. Y coordinate represents Vertical Position.

How can I apply it in real life?

You want to help your friend to find a thing on your bathroom (your toothbrush, may be?). You can say to him "It is near the Gillette and toothpaste, inside the wardrobe".

But he is Portuguese and he doesn't understand anything that you say. You can say "Escova de dentes" if you understand Portuguese, but probably you do not. So, if you already map your bathroom (make it today if not!), you can give the toothbrush position with a Cartesian plane.

Call him and say "It is on (2,3)" and he will find it. But how?

You, instead of saying what is near from it (Gillette and toothpaste), say its coordinates. He just follows it and finds what you are looking for.

It is relative to your bathroom only! But we can do a Cartesian Plane of the Universe if we want, cataloging all stars and then, to visit it, we just need to follow its coordinates. Everything corporeal or measurable only, OK? Nothing to try to map your feelings with Cartesian plane.

When we have said to him "It is on 2,3", we say "My toothbrush is on horizontal (X) position 2, vertical (Y) position 3."

So, generically the form to Cartesian plane is: Toothbrush(X,Y), where Toothbrush is the name that we give to the point. In general, we use only one letter (A, B, C, D), but it can be anything you want. Please note that it does not need to be an integer number only. Can be decimal (0.5), fraction (1/2), etc.

OK, How can I use it for CSS Sprite?

It works the same way! We just need to consider the image as a Cartesian plane, and use pixels to say X and Y position.

We will use the image below on this post (you can download and use it if you want):

Note that it has a transparent background and in general all CSS Sprites you'll see use a transparent background (only GIF and PNG support transparency). "But why?"

We can use a CSS image with a blank background or any other color (making it on Paint, for example), but if we try to apply it on a dark background we will have it:

Only use a non-transparent background if you do not pretend to use an image on different background-colors, and if JPEG size is lower than PNG and GIF size (only then support transparency).

If you do not have a photo editor yet, I recommend you download Fireworks (at the moment I'm writing this, it is on CS6 version). It is a paid product but very useful for Web development (is an image editor). It is developed by Adobe, producer of Photoshop.

You can use GIMP to create a transparent PNG image if you can't pay for it (it is worth the price if you develop websites every day!), but you'll need to search in Google how to do it. If you have Photoshop installed, feel free to use it, but note that the process can change in relation to Fireworks and I can't help you with it (I do not know how to use Photoshop yet, but I am really trying to learn!).

If you choose Fireworks, open it. Click on File > New. Use Width: 500 and Height: 500 and select a Transparent background.

It will make a big image! But do not worry, we will reduce it width and height after. On it, drag and drop all images that you want to add to the CSS Sprite. In our example, we will use 2 images.

If the images that you added does not have a transparent background, you can use Magic Wand Tool to remove background. If it need a more precisely way, you can use Polygon Lasso Tool to remove background manually. They are marked in Red on image below.

After add the images (and editing it, if needed), select them and press Ctrl + G and they will be united in only one image, like image below.

Please make sure they're near from each other (to occupy less space, making image slower), but not so near! Let some space separating then (something like 10px. Can be less or more, depending of images that you're applying CSS Sprite).

If you do not let some space, our CSS Sprite will result something like this:

Note that there is part of second image appearing on the 1st one.

Now, press Ctrl + X (Cut) and click on File > New and Fireworks will create an image with exactly Width and Height from the image that we have on clipboard area.

You can optimize it before saving (using Optimize on Fireworks, at the right bar), but it is not the point of this post.

Coding part

We have our image now. Let's try make our first CSS Sprite with it! Remembering that is this one:

Starting with the first image (black magnify) with CSS:

CSS

.searchBtn {
    background: url('search.png') no-repeat 0px 0px;
    width: 12px;
    height: 13px;
}

It will return the 1st image:

Now we need to understand how it works, initializing by syntax from background-position:

background-position: x-pos y-pos; 

It is because we start learning Cartesian plane before continue the post! It is exactly it. The 1st value (0) is the X (horizontal) position and the 2nd value is Y (vertical) position.

But it is not so clear enough, I know! We need to visualize it in a Pixels view:

Initially, we need to imagine the image in the Cartesian plane (always in the center of it [0, 0]).

Note that in CSS we use background-position: 0px 0px;

With it, we say to read image in the Horizontal position (X) = 0. After that, we used Width attribute, saying that the 12 PIXELS AFTER the horizontal point (0) that we select is to be shown.

The 2nd value from background-position is the Vertical position (Y) = 0, and we use Height to read the 13 PIXELS after it.

Now let's try to read the 2nd one!

.searchBtn:hover {
    background: url('search.png') no-repeat -20px 0px;
    width: 12px;
    height: 13px;
}

Using it, we will have (when hover the button):

That is so amazing! It must be much more clear for you now, but let use another image to better understand how it works!

Note that we have used background-position: -20px 0px;

It means that X (Horizontal) position will be 20px, and Y (Vertical) position will be 0px. Note that it is easy to see in the image bellow.

It means that we will start reading image after 20px (pulling black magnify, because it does not matter now). After this position, it will read 12px after it (Horizontal direction), how specified in Width.

After the Y position (0), will be read13px bellow it, how specified on Height.

Please note that just because Y does not assume any other value on this article, does not mean it is not possible!

So I need to do it manually every time I want to use CSS Sprites?

No! There are 2 alternatives.

If you use Fireworks, it is a built-in add-on. Use Marquee Tool (Red) and select the part of image you want the coordinates. It will show in the side of Width and Height (Blue).

Another alternatives is Sprite Cow (http://www.spritecow.com/). You just need to upload the image and select the part of image you want the coordinates. It will give you the complete CSS, and I have used it to write the post.

Points of Interest

It was really frustrating to understand in the start, and I avoided to use CSS Sprites since I start programming. But it is really interesting and useful when you start understanding how it works.

Only make your CSS Sprite after developing the website. It is because is a bit hard to change the image before in relation of separated files.

Fireworks have a built-in function that we do not use on this post, called Optimize. Please use it and not File > Save as... because it will save it without quality lost and editable in the future, making it big. Save the original file but upload for your server the optimized image!

Try to use less space as possible! If not, space will increase in size with nothing useful.

I recommend using CSS Sprites for icons only (like the Pokemon on the top of the post and for the magnify example on this post), not for images with a high Width and Height.

You can use a non-transparent background how said in the post, but only use if you're sure that you'll not use this CSS Sprite image in a background of another color that you have used on image. I recommend you make it only if JPEG image is less in size than GIF or PNG.

History

• 16 Dec 2012: Article published.
• 18 Dec 2012: Updated