CSS Sprite Nedir ? Nasıl Uygulanır ?

CSS Sprite Nedir ?

Bir wordpress teması ya da herhangi başka bir yazılımın temasının içerisinde bulunan tüm imaj dosyalarını (iconlar vb.) tek bir imaj dosyası içerisine toplayarak, haritalandırıldıktan sonra web sayfasının açılma hızını arttırabilmek amacı ile yapılan en önemli tekniklerin başında CSS Sprite gelmektedir. CSS Sprite nedir ? sorunuza verilebilecek en sade ve açıklayıcı cevap bu olacaktır.

CSS Sprite Tekniğinin Önemi

Bir web sitesinin açılış hızı önem sırası ile sunucu gücü, sayfanın imaj dosyaları ve css (stil-kod) dosyalarına bağlı olarak değişmektedir. Sunucu bazlı konuları bir kenara atarsak tema bazlı pagespeed çalışmalarının başında css sprite özelliği gelmektedir. Bu özellik ile her bir imaj için kod yazmak yerine tek bir kez kod yazılarak kökten çözüm üretilebilmektedir. Bu sayede hem sayfa yükleme boyutu düşecektir hem de css dosyalarının içerisindeki gereksiz yığımı bir nebzede olsa düşebilecektir.

CSS Sprite Avantajları

• PageSpeed hızı arttırılarak, arama motorlarının ortak kriterlerinden birisi olan sayfa hızı konusunda başarı sağlanmış olunur.
• İmaj dosyalarının daha derli toplu tek bir çatı altına girmiş olmasına olanak sağlar.
• Front-end çalışmasını yapan kişi için iş yükü azaltır.

CSS Sprite Dezavantajları

• Son kullanıcı tema üzerinde değişiklik yapmak isterse ve bu imaj dosyalarının içerisinde bulunursa, css kodlama konusunda yetersiz olduğunu da düşünürsek bu tekniğin üzerinde yapmak istediği revize çalışmalarında problem yaşayabilir.
• Png dosyaları ufaldıkça pixel sorunları çıkabilecek durumlar yaşanabilir.

CSS Sprite Tekniği Nasıl Uygulanır ?

Bu tekniğin uygulanabilmesi için en önemlisi CSS bilginizin olması ve buna bağlı olarak dosyaları tek bir imaj yolunda birleştirebilmek için Adobe Photoshop, Sketch ya da türevi programlara hakim olmanız gerekmektedir. Konu ile alakalı birtema.com üzerinde arama yaparak videolu eğitim dersimizden faydalanabilirsiniz.

Online CSS Sprite Tekniği Uygulama (Yapma)

Aşağıda verdiğimiz web adresine girerek arkaplanını (transparan) olarak belirlediğiniz imaj dosyalarının tamamını girdiğiniz siteye yükleyiniz. Yükleme işlemi bittikten sonra ise nerede kullanmak isterseniz o kısmı sayfanın sağ üstünde bulunan select sprite tuşu aracılığı ile seçin. İşlem sonlandığında otomatik olarak css kodları tarafınıza sayfa üzerinde verilecektir.

spritecow.com

Online CSS Sprite Uygulama (Yapma) Sitesi