Works of Time

Website of Tim Huisman

Front-end Webdeveloper

The Making Of – Part II: Sprites

I’ve been using CSS sprites for some time now and I’m still a huge fan (as far as you could be a fan of a technique) of them. Combining multiple images into one image results in fewer HTTP requests and a faster loading website. The article ‘CSS Sprites: What They Are, Why They’re Cool, and How To Use Them’ on CSS-Tricks shows a good example of this. On the new website I’ve used CSS sprites in seven different places:

 

Step 1: the image

You’ve two options when it comes to making CSS sprites: make them yourself or let them be made for you. I would recommend CSS Sprite Generator by Project Fondue, for it also creates the CSS which goes alongside the image. The containers are the same size as the icons, so we don’t need any empty space between them.* In this particular case there is a normal (grey) and active (color) state:

Social network icons
* It’s important to think beforehand about the use, placing and spacing of the images in the sprite. For example: the envelop icon is used in a container larger than the icon itself. If it would be the first icon in the sprite, all the other icons would be seen beneath the rest of the content.
 

Step 2: the structure

<div id="social">
	<ul>
		<li><a id="icon-icheckmovies" href="[..]" title="[..]"></a></li>
		<li><a id="icon-youtube" href="[..]" title="[..]"></a></li>
		<li><a id="icon-lastfm" href="[..]" title="[..]"></a></li>
		<li><a id="icon-facebook" href="[..]" title="[..]"></a></li>
		<li><a id="icon-twitter" href="[..]" title="[..]"></a></li>
	</ul>
</div>

A normal unordered list is used with empty anchor links. For the CSS sprite to work we will have to select every list item individually, which is easiest if they have an unique class or id name. It is also possible to select every item using the pseudo selector :nth-child, but this isn’t supported by every browser.
 

Step 3: the styling

#social li {
	list-style-type:none;
	float: right;
}

#social a {
	background: transparent url(../img/sprite-icons.png) no-repeat;
	display: block;
	height: 24px;
	width: 24px;
	margin-left: 5px;
}

First of all any list-style on the list items is removed and they’re positioned next to each other via float: right; We add the sprite image to the <a> elements and make them be displayed as a block. This way we can give them a height and width. We add a left margin to create space between the icons. When you would view the website now you will see five icons, which are all the same though.

This can be solved rather easily by adding background-positions to all the anchor links. The values of the background-position are equal to the position of the icon within the image, in negative. In the sprite the hover version of the Twitter icon is positioned at 0 on the x-axis and 24px on the y-axis. Giving #icon-twitter:hover the value 0 -24px will position the (background)image 24px upwards, so that the correct icon is positioned within the 24×24 pixel square of the <a>.

// Hover items have the same x-axis as the normal state, but the y-axis value is set to -24px

#icon-facebook {
	background-position: -24px 0px;
}
#icon-lastfm {
	background-position: -48px 0px;
}
#icon-youtube {
	background-position: -72px 0px;
}
#icon-icheckmovies {
	background-position: -96px 0px;
}

 
By using the CSS sprites technique I’ve combined a total of 103 images into only eleven. This saves a lot of HTTP requests and therefore makes the page load faster. Using a metaphor: you need to buy a hundred bottles of beer. Instead of grabbing all the bottles one by one from the shelve, you can also grab four crates and four bottles. The crates are heavier to carry (equivalent of the larger sized images), but it will save time in the long haul. You will be leaving the shop before you can say the longest place name in Europe: ‘Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch’
 

Further reading

Leave a Reply