Css Sprite

Css Sprite Geçmişi
Css sprite aslında yeni bir olay degildir. 10 yıldan daha eski bir geçmişi vardır. Geçmişte ziyaretçi sayıları az ve internet hızları düşük olduğu için web sayfalardaki resimleri parça parça yükletmek teorik olarak daha mantıklıydı.
Ancak son yıllarda internet bağlantı hızındaki iyileşmeler ve mobil telefon kullanıcıların artması "Css Sprite" olayını tekrar popüler hale getirdi.
Css Sprite Nedir ?
Türkçede tam karşılığı olan bir kavram değil ama Css tümleşik resim kullanma tekniği olarak Türkçeye çevirebiliriz. Sitemizde yada sayfamızda kullandığımız tüm resim öğelerini tek bir resim dosyası haline getirip, sayfamızda oluşturduğumuz div yada table backgroundlarına bu tek resim dosyasının gerekli yerlerinin kordinatlarını vererek tablolarımızı oluşturmaya Css sprite tekniği deniliyor.
Günümüzde yoğun ziyaretçi trafiği olan tüm büyük siteler bu tekniği kullanmaktadır. Google,yahoo,ebay, godaddy vs vs..



Css Sprite Optimizasyonun Bize Ne faydası var ?
- Sayfalarımızda kullandığımız her resim objesi sunucuda HTTP_REQUEST oluşturur. Sitemizin içindeki bir sayfada örneğin 20 adet resim varsa sayfanızı ziyaret eden her bir ziyaretçi 20 adet http_request isteği göndermektedir sunucunuza. Online kişi sayınız artıkta bu rakam katlanarak büyür.
oysa sayfanızda sadece 1 adet resim kullanınca her ziyaretçi bir adet HTTP_REQUEST isteği gönderecektir. Sunucunuz bu gelen isteğe daha hızlı yanıt verir ve siteniz daha hızlı açılır.

- Sitenizde kullandığınız her bir resim dosyasının özel header bilgi kodu vardır. Bu bilgi kodlarını Resim editörleri (photoshop, fireworks vs vs ) resim içine gömerler. Sitemizde 20 adet resim dosyası varsa 20 adet özel bilgi kodu barındırır. Oysa tek bir resim dosyasına indirgenince 1 adet bilgi kodu barındırmış olur. Bu sayede resimlerin toplam boyutu azalmış olur.

- Akıllı telefonlarda parça parça resim içeren sitelerin yüklenmesi hep sorunludur. Css Sprite yapılmış sayfalarda bu sorun büyük ölçüde giderilmiş olur.

-Sayfanız daha hızlı yüklendiği için SEO skorunuz iyileşir.

Css Sprite Nasıl yapabilirim ?
Sitenizde kullandığınız resimleri online olarak birleştiren bir çok web sitesi var ama bunlar çok stabil değil. Bu işi en iyi photoshop,gimp, fireworks vs tarzı programlarla sizin manüel ve PNG formatında yapmanız.
Sayfanızda kullandığınız tüm resimleri tek resim haline getirip sunucunuza gönderin. Bu aşamadan sonra kullanacağınız grafiklerin kartezyen kordinatları için R10 CSS Sprite aracını kullanabilirsiniz.

R10 Css Sprite ile resimlerinizin kordinatlarını çok kolay şekilde çıkartıp sitenizde kullanabilirsiniz.

Bilgilendirme için çok teşekkürler.

Yeni tema yaptırırken bir yandan bu işlemi yaptırmanız iyi olacaktır. Teşekkürler Radmin.

radmin yaslanmissin be adamim bundan 8 yil once guncel herseyi senden ogreniyorduk, peki ya simdi

Sabah bir sitemin kodlarını sprite a çevirmek için uğraşmaya başladım şimdi geldim bu yazıyı gördüm. Sprite çok faydalıdır, her dosya nın yüklenmesi için radminin dediği gibi bir http sorgusu yapılır. Bu sorgu şu şekilde gerçekleşir.

browser - Şu dosya var mı?
sunucu - http 200 evet var cinsi şu boyu şu
browser - dosyayı gönder
sunucu - paket 1

Şimdi kabaca bu şekilde gerçekleşen iletişimde sunucu ve browserın işlem sürelerini göermezden gelirsek her mesaj ping süresi kadar vakit alır.
CSS inizde 40 farklı resim varsa ve ping süreniz (sunucu Türkiye lokasyon ise) 7ms ise sadece header bilgilerinin gidip gelmesi, 40x3x7 ms sürer. Bu da hemen hemen 1 saniyedir.
Oysa 1 sprite resim ile işi gördüğünüzde 1 x 3 x 7 ms yani 21 ms sürer header bilgilerini işlemek. Resim boyutundan da avantaj kazanacağınız için resmin yüklenmesi de süper hızlanır.

Ben içeriğe göre değişmekle birlikte html kodu 20-40kb arası tutmaya sprite kullanmaya ve css ile javascriptleri minimalist kullanmaya özen gösteririm. Sunucu olarak amerika lokasyon kullandığın pek çok sitem Türkiye lokasyonlu sitelerden hızlı açılabiliyor.

Eğer Almanya, Hollanda, Fransa, İngiltere lokasyon kullanıyorsanız ping süreleriniz 60ms - 90ms Amerika lokasyonda 150-200ms bulabilir.

Bu makalenin altında da ilgisini çekenler için bir "Sprite Generate" hizmeti sunan site bağlantısı vermek gerekli oldu:

http://www.spritecow.com/

R10 Css Sprite Radmin bizim için yapmış zaten bunu görmedin mi

SEO Skoru kısmına kadar makaleyi okudum ondan sonrasında dşkkatim dağılmış demek ki
Elinize sağlık.

var ya tamda ilgilendiğim konuydu, görüyordum başka sitelerde nasıl uğraşcam koordinatlarla diye düşünüyordum çok iyi oldu ya teşekkürler

bu konu üzerinden bir soru sormak istiyorum

mesela photoshopda bi tasarım yapsam bu tasarımı kesmeden direk png yapıp bu yöntemi kullansam artıları ve eksileri ne olur?