HTTP sorgu sayısı web sayfalarının genel darboğazıdır , sorgu sayısı nekadar fazla ise sayfanız okadar ağır yüklenir bu nedenle sayfanızda kullandığınız küçük resim sayısının fazlalığı arttıkça

yüklenme hızı da düşer , işte CSS sprites bu problemi çözmektedir çünkü birçok resim dosyasını tek bir resim dosyası olarak birleştirmektedir , böylece sözgelimi 30 adet küçük resim 30 adet http sorgusu gerektirecek ama tek bir resim tek bir http sorgusu gerektirecektir ilaveten resim boyutu da düşecektir

peki nasıl oluyor derseniz , küçük resimleri tek bir resim halinde birleştirdikten sonra css ie bunlara konum , link , efekt ... tanımları yapılıyor , manuel yapmak zahmetlimi evet , o nedenle online css generator kullanabilirsiniz , eski tarayıcılarda çalışmayabilir ama günümüzde halen eski tarayıcı ile nette dolaşan varsa zaten rus ruleti oynuyor demektir varsın onlarda da css spritemiz düzgün görünmesin. Şu sağ tarafta gördüğünüz sosyal medya ikonlarını bu tekniğe göre hazırladım elbette bunlara efekt vs de eklenebilirdi herneyse gelelim asıl konuya nasıl yaptım ?

1. Googlede ikon sitelerinden birkaçında arama yaptım ve kafama göre ikonlar buldum , sprite tekniğine göre bunları photoshopta tek resim haline getirdim (kafadan 10 kb kazandırdı bile) birde 7 adet Http sorgu sayımın 1 inmesi cabası

2. Css Sprite nin en zor kısmı bu ikonların konumlandırılması haliyle ben işin kolayına kaçtım ve online bir css sprite generator kullandım.
https://www.spritecow.com/

Üstteki birinci kısımda hazırladığım resmimi Open image butonu ile generator a yükledim şimdi sonrada mausemin ucu ile önce ilk butonu seçtim ve generator sayfa altında verdiği kodu kopyaladım

Bu işlemi herbir ikon için yaptım (yani 7 defa tekrarlamışım) ve herbirinin konum bilgilerini bir txt dosyasına kopyaladım ( küçük bir ilave ile bu bizim css dosyamızı oluşturdu)

CSS

.follow_us {
    background:url("images/hepsi.png");
    display:block;
    width:30px;
    float:left;
    margin:0 3px 0 0;
    height:30px;
    opacity:0.8;
    filter:alpha(opacity=80);
  }
  .follow_us:hover {
    opacity:1;
    filter:alpha(opacity=100)
  }
  .follow_us.twitter {
    background-position:-3px -2px;
  }
  .follow_us.facebook {
    background-position:-40px -2px;
  }

HTML

<div class='follow'>
  <a href='https://twitter.com/sordumnet' class='follow_us twitter'></a>
  <a href='https://www.facebook.com/pages/sordumcom/255940071129149' class='follow_us facebook'></a>
  <a href='https://friendfeed.com/tarkandost' class='follow_us Friendfeed'></a>
  <a href='https://www.delicious.com/velociraptor' class='follow_us delicious'></a>

<div style='clear:both'></div>

</div>

Üstte de Html de kullandığım kodlardan ikişini görüyorsunuz peki bunu wordpress te nasıl uyguladım ; üstte elimde bir resim dosyası css kodları ve html kodları oluştu
a) Css kodlarını , wp-content/themes/sizin temanız/style.css ye yapıştırdım
b) resmi wp-content/themes/sizin temanız/images içine attım
c) Html kodlarını da wp-content/themes/sizin temanız/sidebar.php içinde kendimce uygun bulduğum yere yapıştırdım (deneme yanılma ile buldum)
Elbetteki bu çalışmanın kaynak kodlarını (html dosyası , resim dosyası ve css dosyasını içeriyor) yazının sonundaki linkten download edebilirsiniz. işin teknik kısmı için yararlandığım kaynaklar : kaynak 1 , kaynak 2

Online Css Sprite Generators:

toptal.com
css.spritegen.com
cssportal.com/layout-generator
flag-sprites.com

Css Sprite çalışmamın kaynak kodlarını Buradan download edebilirsiniz