What is a CSS Image Sprite?
A CSS Image Sprite is one large image containing all of your background images. The concept here is to display only the desired part of the graphic by using CSS. Yes, the development takes a little longer than you might like but the outcome is worth the extra effort.
- Reduced server requests
- Reduced page load time
- Reduced image size
- Also, eliminates that annoying "flicker" on hover, seen in IE 7 and older browsers.
- Takes longer to develop
- Harder to maintain
- Use of the image as a repeating background is limited and not recommended
Important Note: Apple mobile devices (iPhone, iPad, iTouch) refuse to render images that exceed a certain size in megapixels. You can read more detail on this topic here.
So how is it done?
You have 2 options on how to get this done.
Option 1: use an online CSS Image Sprite generator like SpriteGen, SpriteMe or CSS-Sprit.es. There are many to choose from.
Option 2: do it yourself using your favorite graphic editor like Photoshop or Fireworks and hand-code the CSS.
On this subject there is no right way or wrong way. It all comes down to personal preference. Mine would be Option 2, mostly because I like to do things myself to fully understand the solution. But that's just me. So, we will explain Option 2, otherwise this would be a tutorial on how to copy/paste. And I think you already know how to do that.
Step 1: Create an empty canvas in your favorite graphic editor
This is where you will be adding all your necessary images. It can be wide or tall, big or small. It doesn't matter. You can always adjust the canvas size as needed.
Step 2: Start adding your images into the canvas
Put all of your background images on this canvas without overlapping them. I like to add each image as its own layer. That way it is easier to manipulate. You can place the images/layers any way you like. Most people like to place them in a grid.
Step 3: Save your image
Save the canvas as a large image comprised of smaller images so we can proceed with the CSS. You would usually want to save it as a .png with a transparent background. Save the project file as well and keep the project open. We will be needing it later on.
Step 4: The HTML
Typical HTML. Nothing special. For our example we will be using the HTML used to create the small RSS button at the lower left corner of this site.
Step 5: The CSS
The concept is that you will be using the same image as a background while shifting the background image's position to display the target area.
For this we should have a good understanding of the CSS property "background" and the values we can pass it.
First, of course, we pass the image path of our background.
We can now expand on that and pass more values to the background property. One being "no-repeat", which means the image should not repeat itself. In this case it doesn't matter but we put it there for good measure.
Then we can add the "position" values. By default a background position value would be "left top" or "0px 0px" unless you specifically assign a value in the background property. It is important to remember the order these values should be declared. First comes the value for "X" (pixels from the left) and then the value for "Y" (pixels from the top). So the end result would look something like this.
Which means, shift the background image 200px to the left and 110px up. Declaring a positive value to X would actually make the background shift to the right.
So how do we get these values?
This is a blown-up portion of this website's Image Sprite to demonstrate. Open your graphic editor and select the measuring tool. Now, measure from the left of the Sprite Image to the left of your target area. This is our "X" value. Remember, we need to shift the background to the left so our value needs to be negative X (-X or in this case -200px). Now we repeat for the "Y" value by measuring from the top of the Sprite Image to the top of your target area. Again, we need to shift the background up so our value needs to be negative Y (-Y or in this case -110px).
Are we done?
Not quite. To finish up we need to specify the height and width of the element, in this case the <a> tag. We need the element to have the same dimensions as the target are in the Image Sprite. So, all we need to do is measure the width and height of the target area and assign those values as the width and height of the <a> tag.
The Final Product
The Final HTML and CSS should look something like this
Repeat this process for all styling images on your website. If you want to measure the difference that this method makes for page load time, check out the YSlow developer plugin to measure page performance. Tweet your results to @BlueBoltSol!