arkaplan

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

4 sene önce

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.

REKLAM

css-sprite

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.

sprite

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.

sprite2

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.

Yorumlar (20)

  1. Arda Erakman dedi ki:

    Yeni blogcular için faydalı bir yazı.

  2. Erkan dedi ki:

    Ben css ile pek fazla uğraşmasamda uğraşanlar için çok yararlı bir makale olmuş.Teşekkürler burak.

  3. Burak dedi ki:

    Site nolur nolmaz dursun arşivde :) Teşekkürler

  4. Mert Güney dedi ki:

    Konuyu çok güzel anlatmışsın Burak abi, günlerdir bu konu hakkında uğraşıyordum bu yazı bana çok fayda sağladı :)

  5. Hibestil dedi ki:

    Bu konu hakkında ben de bir yazı yazmıştım belki faydası olur : http://www.hibestil.com/css-sprite-nedir/
    Hatırlatmadan edemeyeceeğim http://www.spritecow.com/ un daha yalın bir arayüzü var.Css-sprite tekniğinde daha kolaylık sağlıyor.

  6. Alperen Avşar dedi ki:

    Bu yöntemi kullanmak gerekli zaten , artık yeni nesil. :)

  7. enes dedi ki:

    css ile ilgilenen ve yeni başlayn kardeşlerimiz için yararlı bir paylaşım olmuş tebrikler

  8. Hale dedi ki:

    Güzel bir anlatım olmuş Burak,teşekkürler.

  9. yunus emre koc dedi ki:

    Bilmediğim bir uygulamaydı bu yazıdan sonra siteme uyguladim google speed 84 e çıktı teşekkürler

  10. ahmet idin dedi ki:

    Sağol Öğrenmiş Oldum Lazımdı Zaten :)

  11. malik kazan dedi ki:

    adım adım uyguladım sorun nerde bilmiyorum
    verdiği kod bu;
    .sprite-search_forbg{ background-position: 0 -778px; width: 188px; height: 30px; }

    ben bunu şuraya ekliyorum;

    {background:url(1-default/sprite.png)BURAYA no-repeat left top}

    Üstte BURAYA yazdığım yere
    background-position: 0 -778px;
    ekliyorum
    resim dosyasının adı sprite.png

    ne yapbilirim?

  12. müzik haberleri dedi ki:

    çok fazla resim olunca sıkıntı oluyor ama uğraşması zor tek tek position vermek o zamanda css dosyası alıp başını gider benim sitemde bir sürü resim var cssle uğraşacağıma biraz daha fazla verip daha kaliteli host kullanmak daha mantıklı gibi geliyor bana

  13. mp3su dedi ki:

    Burak Merhaba Sipsi Temanda Bunu Uyguladınmı Acaba ?

  14. Senindepon.com dedi ki:

    Güzel anlatım. Fakat spritecow kullanımı bu işlem için daha uygun diyebilirim. Çok rahat bir kullanımı var, tavsiye ederim. Elinize sağlık paylaşımlarınızın devamını dilerim.

  15. Arden dedi ki:

    Merhaba, yazınız üzerinden bir süre geçmiş olmasına rağmen umarım cevap alabilirim :) Bu yöntem responsive yapıya uygun mudur?

  16. node dedi ki:

    Merhaba , Bu yöntemi bir film sitesine uygulayabilir miyiz? Her gün bir film tanıtımı yapıyorum. Ve oldukça fazla resim kullanıyorum.
    Saygılarımla.

  17. Erdoğan Sönmez dedi ki:

    Google’un pageSpeed uyarılarında görmüştüm css sprite yapmamın gerektiğini, sitemde şuanda yaklaşık 2.6 mb resim var, en yakın zamanda resimleri optimize edip CSS sprite ile çağıracağım teşekkürler (: