CSS Sprite Tekniği Nedir? Bu teknik nasıl uygulanır? Oval köşeler nasıl yapılır?

CSS üzerine araştırma yaparken böyle bir tekniğin varlığını keşfettim. Konuyu baştan sonra yazmaktansa, konuyla ilgili bir kaç şey verdikten sonra, konuyu en güzel anlatanların linklerini vermenin daha akıllıca olduğunu düşündüm.

Sprite, bir imaj dosyasıdır. Bu imaj dosyasını diğerlerinden ayıran farksa bir çok imajı tek dosya içinde bulundurması ve koordinatlar vererek her resmi sitenin istediğimiz yerine tek tek çağırabilmemizdir.

Böylece HTTP çağrıları azalacağından ve tüm resimler tek imaj dosyasında olduğundan sıkıştırma daha iyi olacak, böylece imaj dosyasının boyutu düşmüş olacaktır.

Nasıl bir Performans Kazancı sağlanacak?

Deminde bahsettiğim gibi tek tek kaydedilen her imaj büyük ve tek bir dosyadakine oranla daha fazla boyut anlamına gelmektedir. Bu teknik ile sunucudan sadece bir imaj dosyası çekilir ve sitenin her yerine dediğim koordinat sistemi çerçevesinde görseller yüklenir. Sunucudan bir imaj dosyası çektiğimiz içinse HTTP çağrısı minimuma iner ve sayfa ziyaretçiye daha çabuk ulaşır.

CSS Sprite Tekniği Nasıl Uygulanır?

Bu tekniğin nasıl uygulandığı konusunu ben anlatmayacağım, Web Deneyimleri Blog’unda Volkan Görgülü bey CSS Sprite Tekniği‘ni olması gerektiği gibi anlatmış.

Eburhan’da da CSS yardımıyla tek bir resimden Oval köşeler yapma konusunda CSS Sprite tekniğinden yararlanılmış. Bu iki konunun Türkçe olarak zaten anlatıldığını görünce, yeniden yazmanın boşa vakit kaybı olacağını düşündüm.

Bu iki konudan başka Türkçe olarak CSS Sprite tekniği hakkında yazılar bulursanız, bu konunun altına yorum olarak yazıp, linklerini verebilirsiniz.