CSS Sprite Nedir? Faydaları Nelerdir? Nasıl Kullanılır?

Hemen hemen sitenizi sorguladığınız tüm SEO analiz sistemlerinde CSS Sprite hakkında bir uyarı muhakkak görürsünüz. Özellikle de sitelerini Google Page Speed testine sokan arkadaşların çoğu ise bu uyarı yüzünden yüksek miktarda hız puanları kaybetmektedirler. Peki ya CSS Sprite nedir? CSS Sprite'ı bu kadar önemli yapan şey nedir? CSS Sprite bloglarınız da nasıl kullanabilirsiniz? Tüm bu soruların cevabı bu yazının içinde.

CSS Sprite Nedir?

CSS Sprite temanızda kullandığınız resimlerin tek bir resim dosyası içerisinde sıralanarak, birleştirip kullanılmasıdır. Yani temanızın resim klasöründe atıyorum 20 tane resim olsun, bu yirmi resmi tek bir resim dosyasında birleştirip, göstermek istediğiniz resmi CSS kodları yardımıyla da bu dosyadan sitenize ekliyorsunuz.

Mesela henüz dün kullanıma sunduğum Bislog temasında normalde tema dosyasında kırk tane resim dosyası bulunuyordu fakat ben bunları CSS Sprite yöntemi ile tek bir resim dosyasında birleştirdim. İlgili resim dosyasını buradan açabilirsiniz. Şuan da site de gördüğünüz tüm ikonlar vs. yalnızca bu resim dosyasından gösterilmektedir. Peki ya temanızda ki tüm resimleri tek bir resim dosyasında birleştirmek size ne fayda sağlar?

CSS Sprite Yönteminin Faydaları Nelerdir?

Az önce kendi sitemden verdiğim bir örnekle size temam da 40 tane resim kullanmak yerine bunları tek bir resim dosyasında birleştirdiğimi belirtmiştim. Peki ya bu bana ne fayda sağladı? Elbette, hız konusunda inanılmaz bir fayda sağladı. Düşünün bloguma girdiğiniz de 40 tane resim dosyası yüklenecekti ve siteye aşırı yük binecekti. Haliyle site de oldukça geç açılacaktı. Sitede ki sorgu sayısının ve sayfa boyutunun artması da bunun cabası. Şimdi ise bu 40 resmi tek bir resim dosyasında birleştirerek siteye girdiğinizde yalnızca bir tane resim dosyası yüklemenizi sağlıyorum bu da siteye inanılmaz derece de bir hız kazandırıyor. Düşünsenize 40 tane resmi açmak ne demek, tek bir resmi açmak ne demek :)

Bunun yanında ise bu yöntemle sayfa boyutunda da inanılmaz bir düşüş yaşanmaktadır. CSS Sprite tekniği öncesinde bu kırk resim toplamda 140kb yer kaplarken, resimleri tek bir resim dosyasında birleştirmem sonucunda bu tek bir resmin kapladığı alan ise 40kb. Yani arada ziyaretçi başına 100kb lık bir trafik tasarrufu konusu, özellikle de bu oranı yüksek ziyaretçi sayıları ile çarptığımızda ise trafik açısından da size sağladığı faydayı göreceksinizdir. Özellikle trafik sıkıntısı çeken bloglar için bu yöntem oldukça idealdir.

CSS Sprite Yöntemi Nasıl Uygulanır?

Öncelikle arkadaşlar CSS Sprite uygulayacağımız resimleri iyi seçmemiz gerekiyor, tekrar eden resimlere ne yazık ki CSS Sprite uygulanamamaktadır. Şimdi size örnek bir kısım üzerinden CSS Sprite tekniğini nasıl uygulayacağınızı anlatacağım. Öncelikle bu yöntemi uygulayacağınız resimleri seçtiğinizi düşünüyorum, ben size anlatım yapmak açısından aşağıda ki resimleri kullanacağım.

Bu resimleri kullandığımız CSS kodları ise aşağıda ki gibidir.

 .benzer-ikon {background:url(resim/benzer.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;} <br />
	.blog-ikon {background:url(resim/blog.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} <br />
	.film-ikon {background:url(resim/film.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} <br />
	.kitap-ikon {background:url(resim/kitap.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} <br />
	.resim-ikon {background:url(resim/resim.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} 

Öncelikle arkadaşlar bu resimleri .zip formatında bir arşiv dosyasına eklemelisiniz. Daha sonra ise Spritegen adresine giriş yapıyorsunuz. Karşınıza oldukça sade tasarımlı bir sayfa çıkmış olmalı. Burada yapmanız gereken karşınızda ki "dosya seç" butonuna tıklayarak daha önce oluşturduğunuz .zip formatında ki arşiv dosyasını seçmek. Daha sonra sayfadan isterseniz ayarları değiştirebilirsiniz ancak varsayılan ayarlar başlangıç için size yetecektir. Bundan sonra yapmanız gereken ise sayfanın en altında ki butona tıklamak.Karşınıza yeni gelen sayfa da bir kutucuk içerisinde yeni CSS kodlarının gözükmesi lazım.

Karşınıza çıkan sayfadan öncelikle "Tümleşik Resim Dosyanızı İndirin" butonuna tıklayarak, CSS sprite yöntemini kullanabilmeniz için resimlerinizin birleştirildiği yeni resim dosyanızı açın. İndirdiğiniz yeni resim dosyanızı tema klasörüne atın, daha sonra adını istediğiniz gibi değiştirebilirsiniz. Ben bu ismi genellikle site.png olarak belirliyorum.

Şimdi yeni resim dosyamızı tema klasörüne attığımıza göre artık CSS kodları yardımıyla da CSS Sprite yöntemini temamıza uygulamaya başlamalıyız. Öncelikle üstte verdiğim CSS kodlarında gördüğünüz gibi benzer.png, blog.png, film.png, kitap.png, resim.png isimlerinde resimler belirtilmiş, öncelikle bu resimlerin hepsinin adını site.png (siz ne isim verdiyseniz onu yazın) olarak değiştiriyoruz.

 .benzer-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;} <br />
	.blog-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} <br />
	.film-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} <br />
	.kitap-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} <br />
	.resim-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} 

Şimdi de Spritegen adresinin bize verdiği kodlar yardımıyla istediğimiz resimleri, site.png adresinden çekerek temamızda göstereceğiz. Öncelikle .benzer-ikon sınıfının resmini yani eski adıyla benzer.png adlı dosyayı nasıl göstereceğimize gelelim. Daha önceden Spritegen adresinin bize verdiği kodlarda bulunan .sprite-benzer satırında ki "background-position:" değerini kopyalıyorsunuz. Zaten daha önceden CSS kodlarımızda genişlik ve yükseklik değerlerini belirttiğimizden diğer kısımları kopyalamamıza gerek yok. Kopyaladığımız bu değeri CSS kodları içerisinde .benzer-ikon sınıfının kodlarının içerisine yerleştiriyoruz.

 .benzer-ikon {background:url(resim/site.png) #fff;background-position: 0 0;height:36px;width:36px;float:left;position:absolute;margin-top:10px;}

Daha sonra aynı işlemi diğer resim dosyaları içinde uyguluyoruz.

 .benzer-ikon {background:url(resim/site.png) #fff;background-position: 0 0;height:36px;width:36px;float:left;position:absolute;margin-top:10px;} <br />
	.blog-ikon {background:url(resim/site.png) #fff;background-position: 0 -86px;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} <br />
	.film-ikon {background:url(resim/site.png) #fff;background-position: 0 -172px;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} <br />
	.kitap-ikon {background:url(resim/site.png) #fff;background-position: 0 -258px;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} <br />
	.resim-ikon {background:url(resim/site.png) #fff;background-position: 0 -344px;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} 

İşte bu kadar! Artık tüm bu resimlere CSS Sprite yöntemini uygulamış bulunuyoruz. Şuan da temada ki tüm resimler site.png adını verdiğimiz resim dosyasından background-position: kodunun yardımı ile çekilmektedir. background-position: kodu bir nevi eski resminizin, yeni resim üzerinde yer alan koordinatlarını belirtir.

Konu ile ilgili soru ve sorunlarınızı yorum olarak sorabilirsiniz.