CSS Sprite, internet sitelerinin çoğunda kullanılan SEO açısından çok önemli bir etmendir. Biraz açmak gerekirse bazı resimleri bir resim haline getirip CSS'sinize background-position ve background-image ile çağırıyorsunuz. Tek resim diğer resimlerin hafızasından daha küçük oluyor. Örneğin 10 resim 1 Mb ise CSS Sprite'den sonra oluşacak resim 900 Kb olabilir. Tabii bu boyutlar resim sayısına veya boyutuna göre değişebilir. Yani boyutu düşük resimler hem SEO'nuzu yükseltir hem de sitenize hızlı bir açılış sağlar. Hepimiz sitemizin hızlı açılması ve SEO'u için neler yapmıyoruz. Hadi bu konuyu sonuna kadar okuyun. Kesinlikle yararlı olacaktır.

Oluşturma

Öncelikle benim size önereceğim ve sıklıkla kullandığım http://csssprites.com/ sitesine girelim. Birleştirmek istediğimiz resimlerimizi bilgisayarımızdan seçelim. Eğer 3 taneden fazla ise NEED MORE? butonuna basabilirsiniz. Ben burada daha iyi anlamanız için aşağıdaki zar ve yapı malzemeleri resmini kullanacağım.

Yukarıdaki 2 resmin toplam boyutu 27 Kb'tır. CSS Sprite sitesinde resimlerinizi seçtikten sonra GENERATE! butonuna basın ve bekleyin. Sayfa yüklendikten sonra DOWNLOAD SPRİTE PNG butonuna basın ve birleşmiş resminizi alın. Benim kullandığım 2 resmin yeni boyutu düştü.Şimdi sayfayı kapatmayın ve bir sonraki adımı okuyun.

Varsayılan CSS aşağıdaki gibidir.

#sprite1 {
background-image:url(https://lh5.googleusercontent.com/-fgVAM19VaUs/USfkcBPVX5I/AAAAAAAAD7g/t3xVb7Wynuw/s128/css_sprite_2.png);
width:128px;
height:128px;
}

#sprite2 {
background-image:url(https://lh5.googleusercontent.com/-cjHLqzB7gnQ/USfkdRW0EVI/AAAAAAAAD7o/JrNxt7aG_NY/s128/css_sprite_1.png);
width:128px;
height:128px;
}

CSS'ye Çağırma

CSS Sprite sitesinde oluşturduktan sonra size bir resim ve bir CSS kod verecektir. Resmi; background:url(RESİM); olarak ekleyin ve alt satıra background-position: Xpx Xpx; gibi olan kodu ekleyin.