Css Sprite tekniği çok basittir. Web sayfan açılırken yüklenmesi gereken her resim için tarayıcın tek tek resimlerle bağlantı kurar. Bu da zaman kaybı anlamına gelir.
Bunun yerine bütün resimleri tek bir resimde toplayarak css den resim üzerindeki kordinatlar ile resmin bir kısmını çağırarak hızlanma sağlayabilirsin. Örnek olarak;
width:800 height:600 bir resmin var ve resmin adı logo.png
#logo{background:url('logo.png') 14px 12px;width:275px;height:47px;}
yukarıdaki kod ile kalın yazan yer resim üzerindeki koordinattır. -14 width, 12 ise height'i temsil eder. Yani bu kod ne yapar;
Resmin 14 widht(genişlik) noktası ve 12 height(yükseklik) noktasından başlar 275 width ve 47 height bölümünü getirir.