One image = Multiple images

We are always interesting in speeding up our website in every available way. Today, I have thought of a small, yet smart trick to improve the loading time of our website by optimizing the images we use. With a small CSS trick, we are able to use only one, big image instead of a number of smaller.

A working example of what we are going to create today!

Background-position

Lately I found out the background-position property in a CSS menu and I thought it would be a good subject to write an article about. Before I did that I experimented with the property and found out we could use it for more things. We could, for example, use only one image for your whole website instead of the x number you use now.

Image

- Open up your image editing program (Adobe Photoshop, Paint, everything would do) and create a new file. Make it somewhat big to make sure every ’smaller’ image on you website will fit it. You could try this trick with a couple smaller images before you start on your whole website.

- Copy and past all the images you would like to add inside that new file. To make things easier, you could add the height and width next to the image, this might help us later on when we start CSS’ing.

- Save your file and place it inside your normal image directory.

Our Image

For our example I use the navigation menu from this blog. That menu contains four different images (home, articles, RSS, contact) and can be used as the perfect example for this trick. We will create the image via the steps that were given above. This is the image we will use:

HTML

Before we can start working the image into the layout, we need to know the original classes and ID’s. If you are switching from multiply images to only one, I guess this will not be a problem. You can take a look below to see what classes I used.

This is our layout structure:

HTML

<div id="navigation">
     <div class="home"><a title="Homepage" href="http://www.divitodesign.com/">Home</a></div>
     <div class="articles"><a title="Articles" href="/articles/">Articles</a></div>
     <div class="rss"><a title="Subscribe to my RSS feed!" href="http://feeds.feedburner.com/DivitoDesign">Feeds</a></div>
     <div class="contact"><a title="Contact" href="/contact/">Contact</a></div>
</div>

CSS

The CSS part will be the trickiest part. You have to know the exact positions of the image you are going to use in your big image. Otherwise the normal images will not fit into the design. If you don’t know the exact positions, you can experiment with the values along the way. Here we go:

CSS

#navigation a {
     padding-top:60px;  margin-right:20px; width:56px; float:left;
     text-align:center; display:block; color:#c39c70; text-decoration:none;
     font-weight:bold; font-size:90%;
     background:url(images/navigation.jpg) no-repeat;}
.home a{
     background-position: 0 0 ;     }
.articles a{
     background-position: -58px 0;     }
.rss a{
     background-position: -116px 0;     }
.contact a{
     background-position: -174px 0;     }

#navigation a provide the links with the normal style declarations. We don’t have to specify them per class, because they are all the same for the four links. The only thing that is different is the background-position value.

The first value in the background-position is the number of pixels we go to the left, and the second value is the pixels we go from the top. If we want to position to the right, we need to add the minus sign. Do not forget that, or your image will be positioned in the reversed way!

Questions?

With some experimenting on the positioning part you will be fine. Everything will work out as you now know the basics. I think the rest should be clear for anyone. If not, questions can be asked in the comments! Make sure to do this, because I am ready to answer them!