Introduction to Using CSS Sprites
Using CSS sprites on your website can be very beneficial for you, and a great investment. A few of the many perks include faster page load times, less server overload, and happier clients. Here we will discuss some of the ways that you can utilize CSS sprites and reap the benefits too.
Background
Many people have thought that using CSS sprites was difficult and complicated. One thing many struggle with is background positions and how they work and apply. However, after much research, and more need for them, CSS sprites have turned out to be very useful for many web development projects.
If you have never heard of them, or do not know exactly what they are, CSS sprites involve placing many images into one image. Background position is then use to put the image in a place the user can see, and utilize, the image.
In the above Pokeman sprite, you can see how the images are all placed into one. Image what it would be like if each of these images had to load? Servers would overload, causing slow load times, leading to unhappy clients. This way, only one image has to load and the user can utilize all the images still.
Many of the large online companies, including Facebook, Apple, Amazon, and Twitter use CSS sprites and know how important they can be.
Using CSS code
For most people to understand CSS sprites, they have must understand a basic math graph. A long explanition is not needed; one just needs to know how it works.
French physicist, mathematician, and philosopher Rene Descartes created the Cartesian plane. Mr. Descartes determined that anything can be localized on an X and Y coordinate plane.
Most of us learned this in high school. Remember that X is always your horizontal plane and Y is always your vertical plane.
How does this help in the real world?
If you are trying to help someone find something in your living room, you could say to them, “It’s near the lamp, by the couch.” Easy enough right? Now let’s pretend that your friend only speaks another language. Now what?
You could, if possible, tell him in his native tongue. But, let’s assume you can’t. Well, if you have a diagram of your living room, you can easily tell them that the item is on (2,3). This will make it easy for him to find.
But how does he find it? Well, instead of telling your friend what the item was near, you gave him coordinates. Follow these, and you will find just what you are looking for.
This works nearly anywhere, in theory. It could even work in space, and has been used to catalogue the stars and planets. This ‘map’ could be used by nearly anyone to find specific stars or planets. Remember that this only works for tangible things, not things like feelings.
When you tell your friend to look in (2,3), he knows that he needs to go up X 2 spots, and left Y 2 spots (horizontal 2, vertical 3).
When we find (2,3), the item that your friend was looking for is there. This spot is generally given the name of a letter (A, B, C), but can really be anything. Typically we see numbers there, and these numbers can be whole integers, fractions, or even decimals.
How does this relate to CSS sprites?
To put it simply, it works the same. ON a computer screen, it’s similar to the Cartesian plane. We instead use pixels to denote the X and Y position. The image below will be referenced through the rest of this post, and you can even download it if you want.
In general, all CSS sprites will have a transparent background like the image above. Remember that only PNG and GIF support transparent backgrounds. Buy why are transparent background so popular?
Well, we can use colored or blank backgrounds, using Paint for example. However, when we do this, the image turns out this way:
Non-transparent backgrounds should only be used when the image is placed on another color, and if the JPEG file is smaller than the GIF and PNG.
If you are new to the web design game and have not yet purchased a photo editor, you should invest in one. Fireworks is a great one, and at this time is on version CS6. While this does cost money, it is a very useful tool that was created by Adobe, the same company who created Photoshop.
If money is an issue, GIMP is a good option to help your create PNG transparent images. If this interests you, think about doing a Google search to learn more. Photoshop works, and many people have this already, but the process will be different than that of Fireworks, and the process below may not help you much.
If you have Fireworks, let’s walk through the CSS process. Open up the software, and click File > New. Make both the width and height 500, then select Transparent for your background (Canvas color).
This will make the image way too big, but we will shrink it down to size later. Next, drag and drop each image that you want on the CSS sprite. Here, we will use two images.
Sometimes the images that you want use do not have transparent backgrounds, but there are built-in tools that you can use to erase the background. One of these tools is Magic Wand; if you need something more precise, there is also the Polygon Lasso Tool. The latter will help you to manually remove the background. These tools are circled in red below. Once you have placed all the images you want onto the background, select them all and press Ctrl + G. This will unite the photos into one image, as seen below.
You should place your images close together, but not too close. About 10 pixels apart is good, but this can vary with how many images you are putting on. Too far apart uses up too much space, which can make load times slow.
Not adding spaces will create a CSS sprite that looks something like this:
Look back up to the first image and notice that there is a second part of it.
Now, push Ctrl + X (cut), and then File > New. This will cause Fireworks to create an image that had the exact width and height of the image on the clipboard.
There are things that you can do to it before saving the file, but we will not discuss optimization tools on Fireworks here.
Coding
Now that we have our image, let’s use it to make a CSS sprite. Remember this image:
Start with the first image, but black one, with CSS:
CSS
This will bring you back to the second image:
In order to understand how this works, we have to initialize the syntax from the background position.
Part of the reason we understand that is because we talked about the Cartesian plane above. The first value is always the X plane and the second on the Y plane.
This may not be clear, so let’s look at it from a different view, pixel view.
To begin, it is easiest to think of the image as being on a Cartesian plane, where the center is always going to be (0,0). For CSS, the background position will always be labeled as 0ppx, 0px.
So, we always being at (0,0). Find 0 on the X, horizontal axis, and then move 12 spots wide. The second value of points is going to be the Y, vertical axis. Then move up 13 pixels, making the height of of the image.
Now, let’s try another one.
Pretty amazing huh? Hopefully this cleared up some things for you. But to make sure, we will use a different image to make sure.
Here we have used a background position of -20px, 0px.
This means that the X horizontal point will be at 20px, and the Y vertical point will be 0px. This is easy to see in the imag. This means that we will begin reading the image at 20px, pulling back the magnification.
After this, we read 12px after, horizontally, which will be the width. Then, we will read 13px below, specifying the height of the image.
Remember that the Y position can be any value.
Do I have to make CSS sprites manually each time?
The answer is no. In fact, there are two alternate ways that you can do this.
One can use Fireworks, which has a built-in add-on. Using the Marquee tool, you can select the portion of the image that you want the coordinates of. This will show you both the width and the height.
Another good option is to use Sprite Cow, available at www.spritecow.com. All you have to do here is upload the image you want to use and select the part you want the coordinates for. This will help you create a full new CSS sprite, and is what I used to write this article.
Interest points
When a person first begins to learn what CSS sprites are, how they work, and how to create them, it can be really frustrating. Many people do not even use them when they begin programming. However, once you learn and understand what these are, they can be an interesting, and helpful tool.
One good tip is to create your website first, before you create the CSS sprite. This is smart because it can be difficult to change the image and separate the images.
When using Fireworks, it’s smart to use the built-in function called Optimize instead of File > Save As. This is a good idea because Optimize will save the image without losing quality, and also gives you the ability to edit it later on. You should always save the original file, but you should also upload it to your server in order to optimize the image.
Use as little space as possible; too much space makes the file too big and load times will be long.
CSS sprites are only recommended to be used for icons, such as the Pokemon and magnifying glass examples above. They should not be used for images that have big width and heights.
If you want to use non-transparent or colored backgrounds, you have to be careful. Make sure that you use a color that is not a part of the image. Also remember that they should only be used if a JPEG file would be smaller than that of a PNG or GIF.
The pros
There are many pros that come from using CSS sprites. These pros include, but certainly are not limited to:
- Fewer HTTP requests: This is the main reason for using CSS sprites. Each time a user visits your site, the user’s browser will make a request to your server in order for the photos to load. However, if you have 35 images on your page, your server will overload quickly, and users will see slow load times. This may cause them to go elsewhere. Think of it as asking the mailman to bring a bundle of mail a piece at a time.
- Smaller image sizes: This is true with any file that you have on a computer: merging many files into on. We saw above how we used over 35 images and made them into one using Copyblogger. When these images are placed as one, the file size is only 74 kb, whereas the files alone are over 100 kb.
- SEO is improved: While some people might think this strange, in fact it makes sense. When Google does a search for users, one of the factors that it looks at when ranking sites is the speed of that site. Each request and kb matters. Your site will have a higher rank if it has fast load times.
While some people with high speed connections may think that 30 kb is not much, people with mobile phones and devices will notice a difference.
I hope that you will take the time to learn the advantages and process of these CSS sprites.
