CSS Sprite

İnternet teknolojisini uzaktan yakından takip eden herkes CSS Sprite‘ı duymuştur. Kim düşünmüşse bunu iyi etmiş.

CSS Sprite bize birçok fayda sağlar. Bunlardan birkaçını şöyle sıralayayım.

  1. Öncelikle görsel boyutunu azaltır. Yukarıdaki örnekte olduğu gibi; en sağdaki görselin boyutu 3.66 kB. Eğer tüm görselleri teker teker alsaydık toplam dosya boyutumuz 14.64 kB. olacaktı. Ancak hepsini birleştirip kullandığımızda boyut yaklaşık 9.5 kB.a kadar düşüyor.
  2. Dört yerine sadece bir tane görsel kullandığımız için HTTP isteği de dörtten bire düşüyor. Daha az istek olduğu için sitemiz daha hızlı açılıyor. Ne güzel değil mi!
  3. Diyelim sadece görsellerin normal hallerini koydunuz, “hover“larını koymadınız. Böyle bir durumda sayfanın ilk açılışında sadece normal halleri yüklenir haliyle. Fareyi görselin üzerine getirdiğinizde bu sefer “hover” hali çağırılır. Ama bu hali siteye önceden yüklenmediği için bu sefer de bunu yükler. Bu da belli bir zaman kaybına neden olur.

Diyeceksiniz, “sadece 5 kB. nedir ki!” Demeyin! Şöyle düşünün: Sitenize bir kişi girdiğinde server’a 5 kB. daha fazla yüklenecek. Sitenizin günlük ziyaretçi sayısına ortalama 100 desek; günde 500 kB. eder. Bunu aya çarparsanız 4.5 mB. eder ve bu sadece 5kB.lık bir fazlalıktan oluşan aylık değer. Bunun birden fazla olduğunu düşünürseniz, bunun size fazladan server masrafı olarak döneceğini tahmin edebilirsiniz.

Peki Nasıl Kullanılır?

Ben örneğimde bu görselleri bağlantı olarak kullandım. Üstteki transparan görseller bağlantıların normal görünüşleri; alttakiler ise fare üzerine geldiği zamanki halleri.

Görseli yukarıda gösterdiğim gibi kullanılabilir parçalara bölüp koordinatlarını alıyoruz ve yazmaya başlıyoruz.

#sprite a {
  width:42px;
  height:44px;
  display:block;
  text-indent:-9999px; /* Bağlantı içinde sadece resim görünmesi için */
  background-image:url(../images/sprite.png);
}
a.gorsel1 {background-position:0 0;}
a.gorsel2 {background-position:-44px 0;}
a.gorsel3 {background-position:-89px 0;}
a.gorsel4 {background-position:-135px 0;}

a.gorsel1:hover {background-position:0 -44px;}
a.gorsel2:hover {background-position:-44px -44px;}
a.gorsel3:hover {background-position:-89px -44px;}
a.gorsel4:hover {background-position:-135px -44px;}

Artık her bir görselin konumunu alıp “background-position” ile belirledik. Şimdi sıra bunu HTML’e yerleştirmekte.

<div id="sprite">
  <a href="#" class="gorsel1">Görsel 1</a>
  <a href="#" class="gorsel2">Görsel 2</a>
  <a href="#" class="gorsel3">Görsel 3</a>
  <a href="#" class="gorsel4">Görsel 4</a>
</div>

Konuyu kapatmadan önce önemli olduğunu düşündüğüm bir kısma değinmeden edemeyeceğim. Görsellerinizi “sprite” için birleştirirken mümkün olduğu kadar bu işlemi yatay olarak yapın. Çünkü resimlerde tarama işlemi soldan sağa değil de yukarıdan aşağıya yapılır. Bundan da şöyle bir çıkarım yapılır. Eğer aynı renkler paralelde aynı hizaya gelecek şekilde birleştirilirse görselin boyutu daha da azalır. Görsellerinizi bir dikey olarak, bir de yatay olarak birleştirin; boyut farkını göreceksiniz.

Örnek