tüm görselleri tek resim dosyasından açmak ?

arkadaşlar benim söyle bir sorum var temamda siprite.png asında bir resim dosyası var ancak sitemdeki bir çok görsel bu dosyada menü arka planı, twitter kuşu,ara butonu, alt menü arka planı...vs bu soya css den alttaki gibi yazılmış ve o kısma o resim dosyasında belirttiği yeri alıyor ve site bir çok resim açmak yerine sadece tek resim ile tüm görselleri açıyor bu da çok büyük bir performans farkına neden oluyor... acaba diğer görselleride o resme ekleyip nasıl css özerinde değişiklik yaparım

Resimler söyle css eklenmiş :

nav#navMenu {margin-top: -20px; background: url("../img/sprite.png")no-repeat -4px -174px; width: 960px; height: 42px; overflow: auto;}
.aramaInput {background: url("../img/sprite.png")no-repeat -963px -860px; width: 223px; height: 22px; padding: 10px; border: none; color: #6b6b6b;}
#altMenu {background: url("../img/sprite.png")no-repeat -4px -218px; width: 904px; height: 27px; padding: 7px 0 0 55px; overflow: auto; margin-top: -2px;}


Kodların içinde farklı işlelere yarayan kısımlarda var abize gerekli olan yerleri ne ve hangisi hangi işe yarıyor ? yazarsanız hem öğrenmiş olurum hem çoğu kişinin işine yarar


Dip Not: bu komu çok kişinin dikkatini çeker diye düşünüyorum...

Dediğiniz şeyin adı CSS Sprite özelliği hocam.

nav#navMenu {margin-top: -20px; background: url("../img/sprite.png")no-repeat -4px -174px; width: 960px; height: 42px; overflow: auto;}

Bu kısımda sprite özelliğini ilgilendiren alan background: url("../img/sprite.png")no-repeat -4px -174px; bu alan. Sprite resminin içindeki ilgili resmin koordinatları.

Ayrıca her resmi sprite yapmanıza gerek yok. Her sayfada yüklenen resimleri tercih edin.

bende tam olarak öyle yapacağım zaten sitemde mevcut resimlerin tamamı her sayfada kullanılıyor seo bakımından da önemi var çünki optime etmeye gerek duyulmuyor böylece hem hızlı açılma saglıyor

mesla şu resmi bu dosyanın en başına ekledim diyelim kodlarını nasıl düzeltirsem uygun bi şekilde gözükür ?

Kodları Şölye: background:url(../img/ata.png) no-repeat;;}

Resim Dosyasında En Baştaki Atatürk Resmi Resim Boyutu 135x101 Resim Adresi Burada

Ek Olarak: Konu Güncel