Css Sprite Nedir?
En kısa tabirle birden çok resmi tek bir resim halinde birleştirmektir. Aşağıdaki resimden CSS Sprites Hiyerarşisi 'ni inceleyiniz.
Resimde facebook, twitter ve google plus iconlarının CSS sprite öncesi ve sonrası hiyerarşisini görüyorsunuz. 6 farklı resim birleştirilerek sprite.png ismini verdiğimiz tek bir resimde toplanmıştır.
Avantajı nedir?
Örneğin sitenizin her sayfasında kullandığınız 15 tane küçük resim var, bunları birer birer çağırmak 15 ayrı sorgu demektir ve sitenizin açılış süresine etki eder. Tüm bu resimleri bir resimde toplandığınızda tek bir sorgu olarak çağırmış olursunuz ve sitenizin açılış süresini kısaltabilirsiniz.
Yapılan hatalar nelerdir?
Sitenizin yalnızca bir iki sayfasında kullandığınız resimleri sprite dosyasına dahil etmeniz, sprite dosyasının boyutunun artmasına neden olur. Doğrusu sitenin genelinde kullandığınız küçük boyutlu resimleri bu dosyaya dahil etmektir.
Tek bir dosyadan istediğimiz iconu nasıl alacağız?
CSS 'de background-position özelliğini kullanacağız. İstediğimiz iconun x ve y koordinatlarına bakarak çağıracağız. Daha iyi anlamak için aşağıdaki resmi inceleyiniz.
Resimde kullanılmak istenen iconun x koordinatı -200px ve y koordinatı da 0 'dır. Background-position özelliğini yukarıdaki gibi kullanarak resimleri çağıracağız. Iconun genişliği 50px ve yüksekliği 50px olduğundan css koduna width ve height özelliklerini de ekledik.
Sprite dosyasını nasıl oluşturabiliriz?
Sonraki makalemde CSS Sprite Nasıl Yapılır konusunu video çekerek anlattım, buraya tıklayarak nasıl yapıldığını izleyebilirsiniz.
Hepinize iyi günler diliyorum 
