How CSS Sprites Can Improve Performance
A way to optimize your program
Every time your web browser displays a web page, your web browser is working with a remote server. This remote server is providing your browser with all the resources necessary to display the web page. This includes the page content, page styling, and interactive Javascript instructions.
The important part that’s relevant to this discussion is the fetching of page content — more specifically images.
If your web page uses numerous images, that means your web browser must send multiple requests to obtain each image. And consequently, the server will have to fulfill each request individually and send the images one by one.
Sending multiple requests, processing each request, and fulfilling each request can lengthen processing times. Sprites can shorten this process. Sprites are essentially a collection of images stored in a single image file.
The sprite above contains five different images. The benefit of using a sprite is that it will reduce the number of server requests to retrieve each image, which cuts processing times.
Fortunately, sprites are not at all a new tool for developers. If you Google “CSS Sprite Generator,” you can easily find many different tools to generate sprites for you. Or if you prefer the old-fashioned way, you can definitely create sprites in Photoshop yourself.
Moving on, now it’s time to talk about using sprites.
Sprites and CSS
When you’re using sprites, you obviously don’t want to display the entire sprite. You only want to display one image in the entire sprite. This is done using CSS background properties.
Essentially, you are going to take an element — a div, section, list element, or whatever element you want — and set the background of that element to an image.
These are the three primary background properties required.
The first background property provides an image. Simply enter a URL that contains an image, or enter a path to an image that’s stored on your local drive.
The second background property states that you don’t want the sprite to be reproduced more than once. Sometimes, when the container is bigger than the image, the image will repeat itself to fill in the whitespace. This line is saying don’t repeat the image.
The third background property is probably most essential when using sprites.
Let’s take a few steps back to actually understand this.
When we use sprites, as you can recall, we are not introducing the sprite to our web page using HTML’s image tag. Instead, we are going to create an element and set the background image of that element to the sprite. For argument’s sake, let’s say the element we pick is a div. We are going to set the background image of that div to the sprite.
Earlier, it was also mentioned that we only want to display one image in that entire sprite. This is achieved by setting the height and width properties of the div to the height and width of the image.
If you do that, it should only show the first image in the entire sprite. The black square that surrounds the first image represents the div. Every pixel of the sprite that is contained within the dimensions of the div will be visible.
The sprite, in this case, is a horizontal sprite, and it is wider than the div. Since the sprite is wider than the div, any part of the sprite that is not contained within the div’s dimensions will not be visible. That is the red-shaded part. That will not be visible.
To solidify you’re understanding and really bring it home, let’s take this example. Again, the black square represents the div. In this case, we made the div too wide. It’s so wide that it includes parts of the second image within our sprite. You don’t want that. That is why it is essential to set your width and height appropriately. Set them accordingly so that only your desired image, within your sprite, will be visible.
So after understanding that, we can dive into the third property: background position.
By default, the background position will be 0 0. That is why the first element, in this specific sprite, was visible without writing any instructional CSS styling.
What if we wanted to only show the second image? This is done with background-position. The background-position property asks for two things (in this order): how many units do you want to go left? and how many units do you want to go up?
If you want to go right or up, simply use negative numbers. In this case, we want to go right. We do not want to go up or down.
How can you determine how many pixels you should go right by? You can do it through trial and error, or simply use Sprite Cow. With Sprite Cow, simply upload your sprite, and it will tell you the numbers you need to input into your background-position property.
If you get the right position numbers, the second image of your sprite will be shown. And it’s the same idea for any sprite: change the background-position to access the other images on the sprite.
