Merhaba sayın okurlarım.
CSS’in güzelliklerinden sadece biri Sprite tekniği ile karşınızdayım.
Sprite, trafiği yoran, siteyi yavaşlatan görselleri bir araya toplayıp hem daha az trafik harcaması hemde siteyi hızlandırması için kullanılan bir tekniktir.
Web işleri ile uğraşanlar, Sprite tekniği bir yerlerden duymuştur. Yada illaki sitelerinin Seo analizini yapmış ve bu analiz sonuçlarından Sprite adını duymuştur.
Peki tam anlamıyla ne bu Sprite?
Sprite tekniği sitelerimizdeki görselleri tek bir görsel dosyası içine toplar, bu şekilde hem aynı anda birden fazla görsel yüklenmesini engeller, tek bir görsel dosyasına indirir hemde çok büyük oranda görsellerin boyutunu düşürür.
Örneğin temamızın, bir çok ikonu vs. görsel dosyası var. Diyelim ki 30 adet birbirinden farklı, farklı dosyalar ile yüklenmiş görsel var. Sitemizi ziyaret eden kullanıcının tarayıcısı bu 30 görseli tek tek çağırmak zorunda. Bu da büyük zahmet ve hız kaybı değil mi?
Oysaki Sprite tekniği ile bu 30 görseli tek bir görsel dosyasında birleştiriyoruz ve tarayıcılar tüm görsellere sadece bir görsel çağırarak ulaşıyor.
Ayrıca, diyelim ki 30 tane görselin toplam boyutu 120 kb boyutunda. Sprite tekniği ile tüm görselleri bir araya toplayıp bu boyuta baktığınızda %75′lere varan boyut avantajı yaşandığını, 120 kb olan görselin 30 kb civarında olduğunu göreceksiniz.
Bu da gerçekten siteler için çok büyük hız kaynağı.
CSS Sprite Tekniği Nasıl Kullanılır?
Düşünüldüğünün aksine çok basit bir yöntem CSS Sprite…
Yapmanız gereken, tüm görselleri tek bir görsel içinde alt alta toplamak ve css kodlarımızda görselin adresini verip, sıkıştırılan görselin içinden istediğimiz görselin koordinatını vermek.
Sol kısımdaki görsel, blogumun ikonlarının Sprite tekniği ile birleşmiş görseli. Sol kısımda gördüğünüz gibi tüm ikonları, görselleri alt alta düzgün bir şekilde sıraladık. Sizler görseli tam boyutta açarak nasıl yapılacağını daha iyi görebilirsiniz.
Görselleri bu şekilde sıralayıp, birleştirdikten sonra, her görsel için, (örneğin: images/csharp.png, images/php.png) ayrı ayrı görsel çağıracağımıza, tüm görsel eklenecek kısımlarda bu görseli çağıracağız.
Örneğin; .csharp sınıfında background:url(images/csharp.png) olarak, .php sınıfında background:url(images/php.png) olarak görselimizi eklerken, sprite tekniğinde hem .csharp sınıfında hemde .php sınıfında da background:url(images/spritegörseli.png) olarak görselimizi ekleyeceğiz.
Peki koordinatı nasıl ölçümleyeceğiz?
Bu işi bir yardımcı olmadan yapmak biraz zor ve zahmetli olacaktır. Bu yüzden tarayıcınızdan (Ben Chrome kullanıyorum.) yardım alacaksınız.
Siz görselinizi, şimdilik background:url(görseladresi) no-repeat 0, -125; css değeri ile sınıfınıza ekleyin. Ardından tarayıcınız ile sitenizin arayüzünde Sprite uygulayacağınız css sınıfı ile çağrılan kısmın üzerine gelin ve Öğeyi denetleyin özelliğini kullanın.
Sağ taraftaki düzenleme kısmından sınıfınızın bulunduğu kısmı bulun ve background:url(görseladresi) no-repeat 0, -125 yazan değerden -125 değerini değiştirin. Bu şekilde görselinizin koordinatını bulabilirsiniz.
