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.
« önceki yazı kullanım kılavuzları arşivi |
sonraki yazı » Çin yapımı UFO |
Yorumlar
sprite konusunu ilk defa duydum ve cok hosuma gitti. Aslinda ilk resim dosyasi server'dan request ediliyor fakat daha sonra ayni resim dosyasi istendiginde cache'den geliyor. Fakat yine de request sayisini azaltmasi, web server'lar uzerinde olumlu etki yapacagi kacinilmaz.
| sekanet | |
|
|
(0 puan) |
|
| 22 Haziran 2008 14:56 |
yazıyı begendim, aynı sprite uygulamaları programların tema dosyalarında da var... örneğin winamp.
| beder | |
|
|
(0 puan) |
|
| 22 Haziran 2008 15:54 |
evet birçok programda kullanılan bir uygulama ama son zamanlarda web'de de oldukça yaygın
| basarozcan | |
|
|
(0 puan) |
|
| 22 Haziran 2008 16:15 |
uzun zamandan beri nasıl olduğunu merak ediyordum bunun, isminin sprite olduğunu öğrenmiş oldum. uygulaması daha meşakatli gibi gözükse de denemeye değer bence
| EcHoJanZ | |
|
|
(0 puan) |
|
| 22 Haziran 2008 16:20 |
tekniğin en önemli artısı performans optimizasyonu. yahoo!nun developer networkte vs de önerdiği teknik bu.
özellikle hover efektlerinde farklı bir imaj çağırmak kadar işkence birşey yok. her seferinde tekrar çağırılır imaj. ama bu teknikle sadece arkaplan pozisyonu değiştireceği için hem bandwidth hem de rendering hızı alırsınız.
| gameover | |
|
|
(0 puan) |
|
| 22 Haziran 2008 16:22 |
Bu yöntemin kullanıldığını daha evvel bir kaç sitede görmeme rağmen ne olduğunu öğrenememiştim... Teşekkürler basarozcan...
| CemeL | |
|
|
(1 puan) |
|
| 22 Haziran 2008 23:01 |
böyle bir web tekniği olduğunu bilmiyordum. ben de arabirimi (skin) olan programlarda böyle bir yöntemin uygulandığını farketmiştim. ama nasıl yapıldığını bilmiyordum. gerçi program arabirimi olarak baktığımızda CSS yada sprite kullanılmıyordur ama benzer bir sistem.
bildiri için teşekkürler..
| turkuas | |
|
|
(0 puan) |
|
| 22 Haziran 2008 23:35 |
adının ne olduğunu hep merak ediyordum öğrendiğim iyi oldu cok tesekkürler
| dislek | |
|
|
(0 puan) |
|
| 23 Haziran 2008 00:33 |
teee 8 bit bilgisayarlar zamanından gelme bir tekniktir.. css'in çıkması ile web'de çok sık kullanılmıştır da.. güzel bildiri teşekkürler..
| supermeg | |
|
|
(0 puan) |
|
| 23 Haziran 2008 09:45 |
rollover butonlarda da kullanılıyor. butonun üstüne geldiğiniz kısmı a:hover ile position belirtip gösteriyorsunuz. güzel bi yöntem
| nonline | |
|
|
(0 puan) |
|
| 23 Haziran 2008 14:30 |
www.apple.com'u incelerken bakmistim bende
navbar in
orjinal resmi bu.
| nilux | |
|
|
(0 puan) |
|
| 24 Haziran 2008 12:45 |
daha once bır sıtede gormustum ve merak edıordum super bır paylasım olmus tesekkurler ;)
| husmania | |
|
|
(1 puan) |
|
| 23 Aralık 2009 01:14 |
css3'ü explorer haricinde hepsi destekliyor nasılsa. Native corner özelliği ile cSS ile yuvarlatma mümkün, sprite artık bu tarz bir şey için eskidi =)
ama şu alttaki kullanım için daha mantıklı
CSS olan ;
border:1px solid #999;background-color:#282828;color:#d6d6d6;-moz-border-radius:4px;-webkit-border-radius:4px;-opera-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;width:60px;
| mnc | |
|
|
(0 puan) |
|
| 23 Aralık 2009 10:21 |
pillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.
İlgili Yazılar
- CSS Sprite kullanmak artık daha kolay! (5)
- CSS ile şekil çizmek çok kolay! (8)
- hayatı kolaylaştıracak 11 css3 tekniği (10)
- wired news des.. (0)
- css ile takvim yapalım (6)
- css öneri ve hileleri [bölüm 1] [bölüm 2] (0)
- [Well-Designed Weblogs] - table, font tag veya ... (0)
- garanti bankası web sitesi değişmiş. baya hem (7)
- en iyi 10 css kaynak sitesi (1)
- Internet Tasarımı - Genel Kurallar (0)
Bu Yazıyı Tutanlar
Beğendiğiniz bir yazıya "tuttum" demek için başlığın yanındaki yıldıza tıklayabilirsiniz.
