CSS Sprite'ların kullanış alanları | bildirgec.org

Birçok resim tek bir resim dosyasında

Sprite nedir?
Sprite bir imaj dosyasıdır. Ama bu imaj dosyanın diğerlerinden tek bir farkı vardır o da birçok imaj dosyasını içinde bulundurmasıdır. Örneğin ülke bayraklarının herbirini tek tek kaydetmek yerine düzgün bir biçimde 1 imaj dosyasının içine kaydedebilirsiniz. Daha sonra css kodlarında bazı derlemeler yaparak her ülkenin bayrağını tek tek o dosyanın içinden ayırabilir ve sitenize ekleyebilirsiniz.

Performans Kazancı
Daha büyük bir imaj dosyasının daha çok hacim kaplayacağı doğrudur fakat tek tek kaydedilen her imajda aslında büyük dosyalardakine oranla daha çok bandwith kaybı vardır. Ayrıca sadece 1 imaj dosyası sunucudan ükleneceği için http request'lerinin sayısı azalarak sayfamız daha çabuk kullanıcıya sunulur.

Nasıl kullanılır?

#nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

Örneğin yukarıdaki gibi bir css kodumuz olsun. Gördüğünüz gibi her linkin arkaplanına bir resim yerleştirilmiş. Bu resimler toplam 20.5 kb yer kaplamakta ve 10 http-request'i ile sayfaya çağrılmakta.

#nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}

Üstteki örnekte ise her imaj toplam 13 kb yer kaplayan bir imaj dosyasının için konulmuş ve CSS dosyası sayesinde bunların tek tek konumları belirlenerek linklenmiş. Bu sayede 1 http-request'i ile sayfalar daha da hızlandırılmış.

Gördüğünüz gibi sitelerin hem hızlanmasını hem de daha az bandwidth kullanmasını sağlayan Sprite'lar sitelerin üstündeki yükü bir nebze olsun azaltmakta. Eğer kolayca Sprite yapmak isterseniz Sprite Generator adlı siteyi kullanabilirsiniz.

Ayrıca konuya örnek olarak gösterilebilecek olan Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak yazısı eburhan tarafından yazılmış.

Not: Bu bildiri Css-Tricks kaynağındaki bu yazıdan yararlanılarak yazılmıştır.