svidgen - CSS Sprites Demo

The following image are displayed using CSS Sprites:

The images above are "pulled" from the following image, which contains the sprites at known locations.

When used in conjunction with a transparent pixel image and CSS, you can greatly reduce page load time, bandwidth, and the tax on your server(s) without sacrificing on search engine visibility. This can be done because we use an actual IMG tag for each sprite. Thus, we point each IMG to a unique and meaningful URL, though each loads the same transparent GIF. And we can give each IMG an ALT and TITLE attribute as we see fit.

The code:

<style type='text/css'> 
	img {
		margin: 5px;
		border: 1px solid silver;
	}

	.sprite {
		width: 64px;
		height: 64px;
		background-image: url('images/sprites.jpg');
	}
	
	.sprite.smile {
		background-position: 0px 0px;
	}			
	
	.sprite.fish {
		background-position: -64px 0px;
	}

	.sprite.people {
		background-position: 0px -64px;
	}			

	.sprite.potatohead {
		background-position: -64px -64px;
	}
	
</style> 

		
<img src='images/trans.gif#smile' alt='smile' title='smile' class='sprite smile' />	
<img src='images/trans.gif#fish' alt='fish' title='fish' class='sprite fish' /> 
<img src='images/trans.gif#people' alt='people' title='people' class='sprite people' /> 
<img src='images/trans.gif#potatohead' alt='potato head' title='potato head' class='sprite potatohead' />

When not to use this technique:

In the rare circumstance that your users need to be able to right-click on your image to save them for view their properties, this technique should not be used. This technique can also cause issues printing the page, as background-images (like sprites) are ignored by default in most browsers for printing purposes.

However, for most purposes, this technique is a great way to conserve on bandwidth and HTTP requests, thus improving both the end-user and administrator's experience!

Oh no! I'm an idiot!

If I've made a mistake somewhere on this page, or if you have any questions, please feel free to use my contact form to let me know.

Help Svidgen!

If you found this little demo helpful, please support the site by creating an account and using our social bookmarking and socially fueled search engine. The more folks that supporting this, the sooner I can get around to implementing the rest of the pending updates.