CSS Sprite Tekniği

Web sitenizin hızını azami derecede arttırmak istiyorsunuz. Bunun için yapılacakları listelediniz. Standartlara uygun sıfır hatalı bir css dökümü, XHTML uygunluğu, gzip sıkıştırması, ön bellekleme ve daha bir sürü iş. Bugün açığa kavuşturmak istediğim konu ise CSS Sprite tekniği.

Bu yöntemdeki ana amaç özetle şu; sitenizdeki görsel öğeleri ayrı ayrı değilde bir bütün olarak çağırıyor ve makaslayıp kullanıyor.
Konuyu açalım;
Sayfamızda sabit kullandığımız 20 adet resim, ikon vs var diyelim, bu görsel öğelerin yüklenmesi için 20 adet istek gereklidir. Bunun fazla bir etkisi olmayacağını düşünebilirsiniz ancak sayfa yükü arttıkça gözle görülür bir işlem yükü getirdiğini farkedersiniz. CSS Sprite yöntemi ise tüm görselleri bir parça halinde alıp ki bu da 1 istek demektir, koordinatlara göre resmi kesip gösterilmesini sağlıyor.

Nasıl yapacağım ?
Dilerseniz tüm görselleri tek tek bir yerde toplarsınız dilerseniz bu işlemi otomatik yapan online araçları kullanırsınız.
http://spritegen.website-performance.org/
Gönderdiğiniz görselleri tek bir parça haline getirip sizi yormadan CSS koordinatlarına kadar veren bir araç.

Koordinatlar elimde, peki sonra ?
Şimdi yapacağımız işlem son aşama. CSS döküm.
Tek parça halindeki görselimiz tekparca.png ve bu görselimizin içerisinde çağırmak istediğimiz 3 küçük ikon olsun.
CSS Sprite kullanmadan önce şöyle olacaktı.

#kategori {height:10px; width:10px; display:block; background: url(kategori.png);}
#yazar {height:10px; width:10px; display:block; background: url(yazar.png);}
#sayac {height:10px; width:10px; display:block; background: url(sayac.png);}

Görüldüğü gibi 3 farklı istek yaptık.
CSS Sprite kullanalım;

#kategori {height:10px; width:10px; display:block; background: url(tekparca.png) no-repeat -10px top;}
#yazar {height:10px; width:10px; display:block; background: url(tekparca.png) no-repeat  -30px top;}
#sayac {height:10px; width:10px; display:block; background: url(tekparca.png) no-repeat -60px top;}

Ne yaptık ?
Örnek; Kategori alanımız için 10 px genişliğinde 10 px yüksekliğinde bir görsel kullanacağımızı belirttik. Tekparca.png’mizi çağırdık. Ve bu görselin sol üst kısmından 10px makaslayarak sayfamızda gösterdik.
İşlem bu kadar.

Unutmadan söyleyeyim, hatrı sayılacak derecede büyük siteler bu yöntemi kullanıyor. Bir başka yazıda “hover” efektinin CSS Sprite tekniğiyle nasıl kullanılacağını yazmak istiyorum.

Faydalı olabildiysem ne mutlu, kolay gelsin.

Kenan CANOL

Google sayfama göz atabilirsiniz.

1 Yorum

  1. Pingback:

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir