Single Image CSS Layouts

Table of Contents

• Explaination and Introduction
• Advantages and Disadvantages
• Getting Started
• Step 1. Combine the images.
• Step 2. Modifying the CSS code for the single image.
• The complete source code.
• Side Notes
  • How image combination works (in simple terms).
  • How image compression works (in simple terms).
  • How to compress images with tools.

Explaination and Introduction

A single image CSS layout (for lack of a better term) is a layout that calls upon and uses a single image containing multiple images, instead of individually calling upon several images. By using a single combo image (again, for lack of a better term), your website layout will be more efficient. See the pros and cons.

I originally wrote this article because I wanted to offer a complete guide on how to use single images for CSS layouts, how to do it most efficiently, and why it works that way. Although the process explained is simple, very few people actually use it. I've tried to put everything into simplified terms to make it easy for anyone to grasp.

Advantages and Disadvantages

• By using only one image, there are fewer server requests (a new server request is made for each image in a website); too many server requests on high traffic servers can bring a website down.
• Combining images into one reduces the total image file size. (See the how image combination works side note for an explanation of this.)

• It requires a little more effort (and code) on your part. But it's worth it.
• Only works with images from within CSS code. You will not be able to do this with images in <img> tags.

Getting Started

You generally want to compile all your layout images into a single image as the last step towards finishing your layout. So I've created a layout that uses five images called via css, so that I can demonstrate step-by-step how to do it.

The above code should look like this in Mozilla Firefox. It will look slightly different in IE due to IE's rendering issues.

Step 1. Combine the images.

The layout uses the following five images:

145B

131B

135B

131B

130B

Each image is between 130 and 145 bytes, for a total of 672 bytes. If we were to combine these images into one image using a simplistic image editor (Microsoft's Paint works just fine), you might end up with one of these:

274B

273B

274B

254B

257B

261B

274B

You should have noticed a few things from the above images:

• The file size of just one of these image combos is roughly the same size as two of the original images, even though this combo image holds the original five.
• All the original images in each combo image are listed verically; one image under another. It could also be done horizontally, but would result in a much larger file size, in this case, as the gradient image has a much larger height than the other images (we would end up with extra unnecessary whitespace).
• The order of the original images effects the file size of the combo image. (See the how image compression works side note for an explanation of this.)
• A stretched gradient helps decrease the file size. Having a 1 pixel gradient increases file size in this case, since there will be the left over whitespace that the gradient could occupy you can't get rid of. (Once again, See the how image compression works side note for an explanation of this.)

We'll keep the image with the smallest file size (the fourth image above), and put it in the directory images, with the name layout.png. If one wished, they could reduce the file size even more by converting the image to png8 from png24. In some cases, making extra whitespace transparent may helps. (See the how to compress images with tools side note for more information about this.)

Step 2. Modifying the CSS code for the single image.

CSS has a background property called background-position. With it, you can specify the starting point of the background image from two given points (x and y). Using it, the class edge-top-right from the layout would be like this:

The above can also be written in shorthand syntax, like so:

The background-position of the class edge-top-right is 0px, 27px because if you were to open a image editor, you'd find the coordinates of the image for class edge-top-right starts at point (0, 27). When applying the image positioning, remember to replace the background image url with the new layout.png image url.

The complete source code.

The following is the new source code of the layout, with the background-position attribute properly added to each of the classes using background images. The code below uses the shorthand syntax.

When rendered, the above code looks exactly the same as the original, but will load slightly faster, and will require fewer server requests.

Side Notes