Resimleri CSS sprite görseller içinde birleştirin

merhaba,
https://developers.google.com/pagespeed/ adresini kullanarak wordpress ile oluşturduğum blogumu test ettim ve "Resimleri CSS sprite görseller içinde birleştirin" uyarısı aldım.
bunun üzerine CSS Sprite Generator | Project Fondue adresini kullanarak
.sprite-email{ background-position: 0 0; width: 32px; height: 32px; }
.sprite-navi{ background-position: 0 -82px; width: 5px; height: 5px; }
.sprite-postmeta_bg{ background-position: 0 -137px; width: 5px; height: 30px; }
.sprite-rss{ background-position: 0 -217px; width: 32px; height: 32px; }
.sprite-share_save_120_16{ background-position: 0 -299px; width: 120px; height: 16px; }
.sprite-sidebar_arrow{ background-position: 0 -365px; width: 10px; height: 10px; }
.sprite-twitter{ background-position: 0 -425px; width: 32px; height: 32px; }

kodlarını elde ettim.
bu kodları blogumda tema editörünü kullanarak style.css bölümünün en altına kopyaladım.

CSS Sprite Generator | Project Fondue adresinin bana verdiği birleştirilmiş resmi de kendi sunucumda image klasörüne yükledim. sorun şu ki bundan sonra ne yapacağımı bilmiyorum. sanırım birleştirilmiş resmin url'sini bir yerlere kopyalama gerek. ama nereye? yapacaklarımı bana söylerseniz sevinirim. teşekkürler.

internette bulduğum kaynaklar hep sıfırdan bu tekniği uygulamak ile ilgili. temayı yeniden düzenlemek ile ilgili kaynak bulamadım. bu mesajıma temamı ve elde ettiğim kodları ekledim. yardımcı olursanız sevinirim. teşekkürler. tema ve kodlar

bu konuya bende senin gibi yabancıydım fakat şuan siteme uygulamak için siteyi arıyordum sağolasın site olmadan yapmak o kadar kolay olmuyor.

konuya hakimim hemen bilgilendireyim seni

o verilen kodlar resmin pozisyonu oluyor mesela

dieyelim ki orda bir twitter resmi var mesela diyelim ki o resmi şu şekilde çağrıyoruz

.twitter {background-image:url(twitter.png); background-position: 0 -425px; width: 32px; height: 32px; }

elde ettiğin kodu bak gördüğün gibi css kodunun devamına ekliyorsun.
ama burda dikkat etmen gereken oluşturdun sprite resmin uzantisi olacak

tum-ccs-resimler.png mesela vs işte sen ne yaptıysan resim dosyanın adını

önce resim adresi

background-image:url(twitter.png);

Sonra pozisyonu

background-position: 0 0; width: 32px; height: 32px;

anlatabilmişimdir umarım

sonuç olarak bu ne işe yarıyor dersen sitede ki sorgu sayısını azlatıyor yani
normalde 7 adresten resim çağrırken bu sefer tek adresten tüm resimleri çağırmış oluyoruz

Resimleri CSS sprite görseller içinde birleştirin bende bu konuda uğraşıyorum bitirmek üzereyim bilgi vereceğim www.kucukmucit.com

2 yılda hala bitiremedin mi .d