CSS Sprite sitedeki tüm imajların tek bir dosyada toplanarak konum belirtilerek çağrılmasıdır. Bu da sunucuya tek bir istek gönderileceği için performans kazandırmaktadır.
Örneğin:
#deneme{
float: left;
width: 100px;
height: 100px;
background:url (/media/1.png);
}
#deneme2{
float: left;
width: 100px;
height: 100px;
background:url (/media/2.png);
}
yerine
#deneme{
float: left;
width: 100px;
height: 100px;
background:url (/media/sprite.png);
background-position: 0px 0px;
}
#deneme2{
float: left;
width: 100px;
height: 100px;
background:url (/media/sprite.png);
background-position: 0px -310px;
}
gibi..
CSS sprite imajları oluşturmak ve imaj dosyalarının konumlarını bulmak için
http://csssprites.com/ adresini kullabilirsiniz.