Css Sprite nedir ve nasıl yapılır

Örnek Kaynak

CSS Sprite Nedir ; CSS Sprite ile sitenizde kullanmış olduğunuz resimleri tek bir kaynaktan çekilmesi ile sayfanızın hızını artırmaktır.

Sayfamızın hızını nasıl kontrol edebiliriz diyenler için şu adresi tavsiye edebilirim.

Verdiğim adresten sitenizi kontrol ettiniz ve bakmanız gereken yeri size söylüyorum "Combine images using css sprites" + ya basınız ve alanı genişletin.

Büyük bir ihtimalle bir çok resim linki göreceksiniz işte CSS Sprite burada devreye giriyor. Bu resimleri birleştireceğiz ve sayfanız %5 kadar hızlanacak bununla beraber Google SEO puanınız artacak.

Şimdi bu çıkan resimleri bir klasör içinde toplayalım ve şu adrese girelim. Bu sitede "Browse" bölümünden resimleri topladığımız klasörü açıyoruz, klasör içerisindeki tüm resimleri seçiyoruz ve "Create Css Sprite" tıklıyoruz.

Karşımıza üretilen CSS kodları ve bir adet .png uzantılı resim çıkıyor 

Temsili Resim

Yukarıda ki resimde gösterilen 1 numaralı .png resmi masa üstümüze indiriyoruz,

Daha sonra bu .png dosyayı sunucumuza(ftp) upload(yüklemek) ediyoruz,

2 numaralı kısımdaki CSS kodları style.css(sizde farklı olabilir) dosyamıza ekliyoruz

Bu işlemleri gerçekleştirdikten sonra gerekli olan div dağılımını temalarınız için uyguluyorsunuz.

Saygılar ...