İnternet standartlarının yükselişi ile CSS, yeni bir soluk getirdi hem kullanıcılara hem de programcılara. Son dönemin de yeni soluğu Sprite CSS yine hem kullanıcı açısından hem de site yöneticileri açısından pek çok avantajı beraberinde getirdi. Makalemizde Sprite CSS’in ne olduğuna, kullanıcılara, site yöneticilerine ve programcılara ne gibi avantajlar sağladığına ve Sprite CSS’in nasıl oluşturulacağına dilim döndüğünce değinmeye çalışacağım. Aslında makaleyi kendi adıma unutmamak için yazdığımı da belirtmek isterim (:

CSS Sprite Nedir?

Bir projeyi tasarlarken her bölümün imajlarını yani resimlerini butona hatta ikonlara inene kadar tek tek ayırırır ve kodlamasını da yine her bölüme ayrı resim çağırarak yaparız. Sprite ise düzgün bir biçimde yerleştirilmiş tek bir resim üzerinden tüm resimlerin göreini yapmamıza yardımcı oluyor.

Sanırım bu kısım biraz karşık oldu, biraz daha açmakta fayda var. Blogumun üst navigasyon (anasayfa/hakkımda…) menüsüne baktığımız zaman hepsinin ayrı bir resim olduğunu yine resimlerin üzerine geldiğimiz zaman yeni bir resmin çağrıldığını görmek mümkün. CSS Sprite yöntemine göreyse menü öğelerinin tüm resimlerini tek bir resimde toplayıp her seferinde yeni resim kullanmak yerine bir resim ile işimizi halletmiş oluyoruz. Yani sıkıştırmış oluyoruz.

CSS SPrite Tekniğinin Avantajları Nedir?

CSS kodlamacıları için avantajlarına değinelim ilk olarak. Normal tekniğe göre kod yazan kişiler birden fazla resimle çalışır. Komplike bir sistem olduğu zaman alıp başını gittiği durumlar da cabası. CSS Sprite ile durum tam tersi. O kadar fazla resim dosyası yerine birkaç tane resim dosyası ile çalışacaktır. Bu da daha az karışıklığa yol açacaktır.

Site yöneticisi de elbette çeşitli avantajlara sahip olacaktır. Birçok resmin birkaç kere yüklenmesinin önüne geçilerek sistem tüketiminden haliyle maliyetler biraz kısılacaktır. Sitenin yüklenmesi daha hızlı olacaktır.

Ziyaretçi de üzerine geldiği butonun a:hover konumuna gelmesi için beklemeyecek, butonlar diğer nesneler hemen yüklenecektir.

CSS Sprite Oluşturma

CSS Sprite için ilk önce kodlayacağımız alanları kendimize göre bölümlemek daha doğru olacaktır. Yani, navigasyon için ayrı bir sprite resim, içerik bölümü için ayrı, yan menüler için ayrı bir resim oluşturarak bölümlere ayırmak daha mantıklıdır. Resimleri kendimiz birleştirebiliriz ancak hatalar olmaması için yardımcı yazılımlardan medet ummak da işimizi kolaylaştıracaktır.

Şimdi ilk adımı atıp sanki normal tekniğe göre kodlama yapacakmış gibi resimlerimizi bölelim. Sonrasında kullanacağımız resimleri “zip” formatında sıkıştırıp CSS Sprite Generator‘a yüklüyoruz. Servis bize sprite resmimizi, sprite resim üzerindeki öğelerin kodlamamızı oldukça kolaylaştıracak biçimde konumlarını liste halinde bize veriyor. Şimdi tek iş kodlamaya kaldı.

CSS SPrite Kodlama

Bu kısmı kendim anlatmak yerine kendimin de kaynak olarak aldığım Web Deneyimleri’ne alayım sizleri. Videolu anlatım ile daha da pekiştirmiş olacağız.

CSS Sprite makalemizin sonuna geldik. Umarım faydalı olmuştur. Sorularınızı ister yorumlarda, ister iletişim formunda bana iletebilirsiniz. Başka bir makalede buluşmak üzere, hoşçakalın.


Author: Hamdi Yaman

1987 yılında gözlerimi açtığım şu küçük dünyada 2006 yılından bu yana blog yazıyorum. İnternet dünyasının bugünü ve yarını hakkında her zaman ilgili olmuşumdur.

14 comments

Güzel bir yazı olmuş. Bu konu son zamnlarda çok öenm kazandı. Http requestleri zaltması ve optimizasyon açısından

Eline sağlık Hamdi, bence kodlama yapacaklar bu noktaya dikkat etmeliler. özellikle yoğun trafiğe sahiplerse. Merak edenler için benim temanın şablon resimlerinden sadece biri;

http://img.dmry.net/blog/tema/genel.jpg

gördüğünüz gibi birden fazla simge içeriyor ve tek seferde hepsi birden yüklenmiş oluyor.

Hakan sitenin yüklenme hızına olsun, trafik kullanımına olsun her şeyine etki ediyor. Ve gerçekten kodlama yapanların işini de büyük ölçüde kolaylaştırıyor. Bahsettiğim servis kordinatları da çıkarıyor ve böylece eskisi gibi karışıp kalmaktan arınıyoruz 🙂

kordinat çıkarıyor oluşu büyük marifet, çünkü kendi temama yerleştirme yaparken, tüm kordinatları yazılım üzerinden elle hesaplamıştım ve bir yerden sonra kafa gidiyor 😀

Merhabalar,

Tek bir resim kullanmaktan kastınız nedir? Tam anlayamadım. Mesela ben android emülatör kurulumu ile ilgili resimli anlatımlar içeren bir yazı yazdım. bu resimleri nasıl tek bir resim üzerinden gösterebilirim? Bunu mu söylemeye çalışıyorsunuz? Ya da bu söyledikleriniz sadece tema resimlerinde mi geçerli olabiliyor? buton ve hover resimlerinde filan?

Teşekkürler…

vermiş olduğunuz link çalışmıyor, zaten en büyük sorun kodlamada ve bunla ilgili detaylı hiçbir bilgi yok …

css ile ilgili verdiğin fayadalı bilgiler için teşekkürler. Bu yöntemle aynı zamanda css sıkıştırıldığı için sitelerimizin daha hızlı açılmasına katkısı oluyor.

Bir cevap yazın

*