CSS Sprite Nedir?

İnternet sitesi ve daha fazlası ile ilgileniyorsanız kullanabileceğiniz SEO aracının yanı sıra SEO tekniği olan CSS Sprite Nedir?

Teknik olarak internet sitelerinizin hızını artıran ve bununla birlikte arama motorlarında size optimizasyon sağlayacak CSS Sprite bir SEO tekniği olarak geçiyor.

Tam olarak temanızla birlikte kullandığınız resimleri, tek bir resim dosyasına diziyor ve birleştirip kullanma tekniğidir. Açıkça temanızın resim klasöründe 15 resim olduğunu düşünürsek bu 15 resmi de tek bir dosya altında birleştirerek göstermek istediğiniz CSS kodları sayesinde dosyadan çekerek sitede gösteriyor.

CSS Sprite tekniği, ana sayfa üzerinde bulunan resimleri tek bir dosya içerisinde hızlı bir şekilde çağrılmasıdır. Bu sayede veriler için tek tek, uzun uzun kodlar yazmanıza gerek kalmadan tek bir sorgulama yaparak statik bir şekilde sitenizde kullanacağınız resimleri gösterebilirsiniz.

CSS Sprite Nasıl Yapılır?

Öncelikle CSS Sprite tekniğini kullanmak için resimleri iyi seçmeniz gerekiyor. CSS Sprite WordPress de dahil bir çok platformda uygulanabilen bir yöntem, hızlı bir şekilde CSS Sprite Nasıl Yapılır;

.benzer-ikon {background:url(resim/benzer.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;} 

.blog-ikon {background:url(resim/blog.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} 

.film-ikon {background:url(resim/film.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} 

.kitap-ikon {background:url(resim/kitap.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} 

.resim-ikon {background:url(resim/resim.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;}

Kod satırlarını tamamladıktan sonra .zip formatına resimleri arşivliyoruz. Ardından Spritegen adresine giriş yapıyoruz, karşımıza gelen sayfada dosya seç butonuna tıklayarak oluşturduğumuz .zip dosyasını seçiyoruz. Size hazır bir kaç ayar sunan Spritegen, özelleştirme sunmuş olsa da başlangıç ayarları size yetecektir. İşleminizi tamamlamak için sayfanın altında bulunan butona tıklayın ardından yeni CSS kodlarınızı ve dosyalarınız karşınıza çıkacak. Burada metin dosyasının altında bulunan Tümleşik Resim Dosyanızı İndirin butonuna tıklayın, CSS Sprite tekniği için birleştirilen yeni resim dosyasını açın. İndirdiğiniz dosyayı dosyanın tema klasörüne aktarın ve size sunulan CSS kodları yardımıyla CSS Sprite yöntemini temaya uygulayın. Daha önceki kodlarda bulunan resim isimlerinde resim adresleri belirtilmiş, siz bu resim adreslerinin hepsinin adını yeni resim dosyasının adını verin.

.benzer-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;} 

.blog-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} 

.film-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} 

.kitap-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;} 

.resim-ikon {background:url(resim/site.png) #fff;height:36px;width:36px;float:left;position:absolute;margin-top:10px;margin-left:10px;}

Resimlerin ismini değiştirdikten sonra Spritegen tarafından verilen kodlarla istediğimiz resimleri, resim dosyalarının adreslerinden çekerek temada gösterebiliriz. Spritegen tarafından verilen koddaki background-position değerini kopyalayarak kendi css kodları arasındaki satırlar arasına yerleştiriyoruz.

Özet olarak tam olarak bu şekilde CSS Sprite yöntemini uygulayabiliyoruz.

Bunun dışında Photoshop vb gibi programlarla da yapabileceğiniz işlemin kolay yöntemi gösterdiğimiz online yöntemdir.