Goruntuleri CSS Sprite Kullanarak Birleştirmek

Nedir : Sitenizdeki resimler tek kaynakta birleştirilerek site acılışı esnasında pek cok resmi ayrı ayrı cağırmak yerine tek kaynaktan resimler istendiği icin fark edilir derecede hız artışı sağlar.

Cozum : Css ile resimleri birleştirmek.

Uzman Yorumu : Bu yapı resimler icin değil css ile cağırılan arkaplan resimleri icin gecerli. Site yayına alınırken yapılabilir. Oldukca faydalı bir uygulamadır.


Genel Acıklama


İnternet sayfanızdaki goruntuleri CSS sprite kullanarak mumkun olduğu kadar az dosyada birleştirebilirsiniz. Bu birleştirme işlemi, diğer kaynakları indirirken gecikmeleri ve gidiş donuş sayısını azaltmanıza yardımcı olur. Aynı zamanda, bu sayede istek ek yukune azaltıcı yonde etki ederek, web sayfası tarafından indirilen toplam bayt sayısını azaltabilirsiniz.



Google ’dan Detaylar


JavaScript ve CSS ’ye benzer şekilde, birden fazla resim indirmek ek turlara sebep olur. Oldukca fazla resim iceren bir internet sitesi, gecikmeyi azaltmak icin bu goruntuleri daha az cıktı dosyasında birleştirebilir. Bu da maliyet anlamında daha hesaplı olacaktır.


Goruntuleri CSS Sprite kullanarak birleştirirseniz, internet sayfanızda birden cok simge kullanıyorsanız her biri icin ayrı istek gonderilmesi yerine tek bir dosyada hepsini birleştirerek oluşacak karmaşayı daha sade şekle indirgeyebilirsiniz. Her simge icin ayrı imge yolları tanımlamak yerine tek bir imge yolu tanımlamanız yeterli olacaktır.


Bunlar dışında internet sitenizdeki goruntuleri ve simgeleri CSS Sprite ile birleştirmeniz, tıklandığı zaman bloğunuzun acılmasını hızlandırmanızı sağlar. Site sayfa hız optimizasyonu acısından bakıldığında bu işlemin yapılması site hızını tahminen %3 ile %5 arasında artırır.


Css Sprite ile goruntuleri en uygun şekilde birleştirmek icin Photoshop veya Illustrator gibi programlardan yararlanılmalıdır. Cunku kullanılan resimlerin yukseklik ve genişliğini tam olarak biliyor olmanız gerekir. Bunun dışında resimler arasında boşluk bulunmamasına dikkat edilmesi gerekir.