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.