CSS Sprite işlemleriniz için Sprite Cow ve Gerçek Dünya Örnekleri

20 Ocak 2012
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

CSS Sprite

Web sitesi geliştiriyorsanız, hazırladığınız sitelerin tasarım ve kodlamasının yanı sıra optimizasyona da fazlası ile dikkat etmeniz gerekiyor. İşte bu konuda en önemli yardımcılarımızdan biri olan CSS Sprite Tekniği ile hem resim karmaşasından kurtulun hem de çok daha optimize web siteleri oluşturun.

Öncelikle CSS Sprite‘ın ne olduğundan bahsedelim. Bir web geliştiricisi olarak kullanmamış olsanız dahi adını mutlaka duymuş olduğunuzu düşünüyorum.

CSS Sprite Tekniği nedir?

CSS Sprite tekniği temel anlamda web sitelerinde kullandığınız birden fazla resmi bir araya toplama ve yer değiştirme işlemleri için her hangi bir Javascript kodu kullanmadan HTML ve CSS özellikleriyle bunu gerçekleştirme işlemidir.

Neden önemli?

Web sitenize bir ziyaretçinin girmesiyle sitenizde kullandığınız javascript ve css dosyaları, kullandığınız tüm resimler gibi her öğe için sunucunuza bir istek/request gönderir. Sunucunuzda bu isteklere karşı ziyaretçinize bir response/cevap gönderir. Bu da web sitenizin ziyaretçinize sitenizin yüklenme süresi olarak geri döner. Tüm bunların yanı sıra siteniz üzerinde kullandığınız resimler tek bir istekle yükleneceği için sitenizde kullandığınız link hover işlemleri çok daha süratli çalışacaktır.

Gerçek dünya örnekleri

Özellikle optimizasyona bu derece etki eden ve ara yüz tasarımcıları için çalışmayı kolaylaştıran bu tekniğe karşı yüksek hit alan büyük web sitelerinin kayıtsız kalması elbette mümkün değil.

Facebook

Aşağıda görmüş olduğunuz gibi Facebook web sitesinde kullandığı pek çok resim için tek bir resim kullanıp, CSS‘in background özellikleriyle bu tekniği kullanıyor.

Google Plus

Google‘ın yeni gözdesi ve Facebook‘a rakip olarak gösterilen sitesi Google Plus‘ta bu tekniği fazlası ile kullananlardan. Aşağıdaki resimde de göreceğiniz gibi kullandığı resimleri sadece 6 KB‘lık küçük bir resim dosyasında toplamış durumda.

Twitter

Herşeyi 140 karaktere sığdırmamızı isteyen Twitter bu tekniği kullanmaz mı? Buradan göz atabilirsiniz.

Milliyet

Milliyet.com.tr‘nin yanıp sönen sürmanşetlerine hepimizin gözü takılmıştır. Yukarıda bahsettiğim gibi link hover işlemleri için hazırladığı CSS Sprite örneği de buradaki gibi.

Sabah

Bir örnek de Sabah.com.tr‘den geliyor. Sabah Gazetesi de internet sitesinde özellikle haber sayfalarında kullandığı küçük ikonları bir araya toplamış.

Zaman

Açıkçası bu tekniği kullanıp da aklımda soru işareti bırakan tek web sitesi zaman.com.tr oldu. Zira buradan olaşabileceğiniz resimde de görüldüğü gibi yaklaşık 300 KB‘lık bir resim kullanıyor. Kullandığı resimler aynı sayfada olduğu ve nasıl olsa yüklenmek zorunda olacağı için mantıklı. Fakat hiç değilse dizilim de gerekli ayarların yapılıp, mutlaka daha düşük boyutlara getirilmesi kanaatindeyim.

Nasıl kullanacağız?

Bu tekniği kullanmak için temel HTML ve CSS bilgisi yeterli. Tek sıkıntılı taraf, toplu resmi oluşturmanız için gerekli resimlerin konumlarını belirlemek. Bunun için de sıklıkla kullandığım Sprite Cow isimli online servisi kullanabilirsiniz.

Şimdi Sprite Cow isimli online servisi de kullanarak biraz kod yazalım. Aşağıda gördüğünüz resmi Sprite Cow‘a yüklüyorum ve istediğim alanları seçiyorum. Sprite Cow bana bu görüntüyü nasıl elde edebileceğime dair gerekli CSS kodlarını otomatik olarak oluşturuyor.

.sprite { background: url(‘imgs/firefox_chrome.png’) no-repeat -2px -5px; width: 126px; height: 126px; }

.sprite { background: url(‘imgs/firefox_chrome.png’) no-repeat -1px -132px; width: 127px; height: 124px; }

Sprite Cow‘un vermiş olduğu kodları bir link etiketi ile birlikte kullanalım ve bunun için aşağıdaki HTML ve CSS kodlarından faydalanalım.

HTML Kodu:

<a class=”sprite” href=”http://www.delipenguen.com“></a>

CSS Kodu:

a.sprite { background: url(‘images/firefox_chrome.png’) no-repeat -2px -5px; width: 126px; height: 126px; display:block; }
a:hover.sprite { background: url(‘images/firefox_chrome.png’) no-repeat -1px -132px; width: 127px; height: 124px; display:block; }

CSS koduna Sprite Cow‘un vermiş olduğu koda ek olarak display:block; kodunu da ekliyorum ki link etiketini block olarak gösterebileyim.

Yapacaklarımız yalnızca bu kadar..

Demo‘ya göz atmak için buraya tıklayabilirsiniz. Örneği aşağıdaki linke tıklayarak indirebilirsiniz.

{filelink=2}

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. 21 Ocak 2012 - 06:32

    hocam çok faydalı bir yazı olmuş, çok işimize yarayacak, teşekkürler.

    • :DeliPenguen
      21 Ocak 2012 - 09:03

      Çok teşekkürler hocam, beğendiğine sevindim.

  2. 29 Ocak 2013 - 13:33

    sa.
    hocam, seoya uygun şekilde, .css 3 dosyam var bunları nasıl sıkıştırabilirim bi kodla?

  3. Nurettin Kaya
    12 Mart 2013 - 20:43

    hocam html koduna class=”sprite” eklemeyi unutmuşunuz 😀

  4. :DeliPenguen
    12 Mart 2013 - 20:50

    Düzeltttim. İkaz için teşekkürler Nurettin 😉

  5. 29 Kasım 2015 - 22:40

    çok teşekkür ederim beni büyük bir dertten kurtardınız

  6. 20 Mayıs 2016 - 00:06

    Güzel paylaşımınız için teşekkür ederim. Bu teknikle sayfa açılış hızında ciddi oranda sonuç alınabiliyor. Paylaşımlarınızın devamını dilerim.