mustea adlı üyeden alıntı

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.


GTmetrix sitesinde siteyi analiz ettim bunlar çıktı:
http://www.oyunlaroyun1.com/temalar/t3/resimler/anasayfa.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/blokalt1.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/menuayirac.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/reklambaslik.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/vucutust.gif

bu resimleri de http://css.spritegen.com/ adresine upload ettim şu kodları verdi:

/* Generated by http://css.spritegen.com CSS Sprite Generator */

.vucutust, .blokalt1, .reklambaslik, .anasayfa, .menuayirac
{ display: block; background: url('png.png') no-repeat; }

.vucutust { background-position: -10px -0px; width: 1000px; height: 7px; }
.blokalt1 { background-position: -10px -17px; width: 310px; height: 3px; }
.reklambaslik { background-position: -330px -17px; width: 310px; height: 3px; }
.anasayfa { background-position: -650px -17px; width: 42px; height: 36px; }
.menuayirac { background-position: -702px -17px; width: 2px; height: 44px; }
----------






bunlar tamam bundan sonrasını ne yapacağımı bilmiyorum. Üsttekini hangi dosyaya alttakini hangi dosyaya koyacağım ?