Sitemize kolayca css Sprite tekniğini uygulayalım


Sitemize kolayca css sprite uygulayalım

Css sprite ın ne olduğu konusunda örnekli anlatımı Buradaki sayfamızda yapmıştık , kısaca hatırlayacak olursak , HTTP sorgu sayısını ve buna paralel yüklenen resim boyutunu düşürmeye yarayan bir

teknikti , gel gelelim sitemizin css sprite e ihtiyacı varmı bunu nasıl anlarız ? varsa sitemizde bu tekniği nasıl uygularız konularına değinmemiştik , gelin adım adım sitemize css sprite tekniğini uygulayalım

1. Sitemizin css sprite ihtiyacı varmı bulalım

gtmetrix

Site yüklenme analizi yapan birçok sitede kriter olarak bu css sprite artı bir puan olarak hanemize yazar , ben ölçüm sitesi olarak gtmetrix sitesini tercih ettim , örnek uygulamayı da sordum.net üzerinde yapacağım , öncelikle Buradaki linkten gtmetrix sitesine giriş yapıp boşluğa site adresimizi yazalım ve analiz ettirelim , sordum.net inki aşağıda burada bakmamız gereken kısım Page speed altında yeralmakatadır , kırmızı ile verdikleri sitede yapılması tavsiye edilen optimizasyonlardır mesela css sprite ile olanına tıkladığımda bana tek tek resim linklerini vermiş ve bunları css sprite tekniği ile birleştir demiş

gtmetrix tavsiye

2. Css sprite tekniğini en kolay şekilde uygulayalım

üstte Gtmetrix bize sitende şu resimlerin css sprite e ihtiyacı var dedi – iyi güzelde ben css den falan anlamam nasıl olacak bu iş diye düşünüyorsanız işte nasılı , öncelikle bu işi bizim için yapacak online bir site bulacağız , biz sizler için bulduk ismi : spriteme.org gelelim bu site ile nasıl css sprite tekniğini uygulayacağımıza:

1. spriteme.org Sitesi açıkken bunu favorilerimize (yer işaretleri) ekleyelim , eğer chrome kullanıyorsanız direkt adres barındaki ismi Yer işaretleri çubuğuna sürükleyip bırakın (Aşağıdaki resim)

sprite me adres barına ekle

2. Css sprite uygulayacağımız sitemizi açalım (örneğimizde sordum.net) ve demin yer işaretleri çubuğuna eklediğimiz SpreiteMe linkine tıklayalım , bu bir javascript çalıştıracak ve sayfadaki resimlerin css sprite ye uygun bir şablonunu oluşturacaktır , Sağ köşede aşağı doğru bir pencere açılmış olması gerek burada make sprite linkine tıklayalım (Aşağıdaki resim)

make sprite

3. Bize sitedeki uygun resimlerimizin birarada olduğu bir şablon hazırladı , aşağıdaki kırmızı ile işaretli yere (1 numara) tıklayıp bu şablonu indirelim (spriteme1.png)

Spriteme1 indirelim

4. İndirdiğimiz spriteme1.png dosyasını hostumuzda bulunan (eğer WordPress kullanıyorsanız) aşağıdaki yere atalım

wp-content/themes/tema isminiz/images

NOT: tema isminiz yerine sizdeki tema ismi gelecektir

5. Üstteki resimde 2 numara ile işaretli yere tıklayalım ve bize hangi css dosyamızda hangi değişiklikleri yapmamız gerektiğini içeren talimatları verecektir

export css - css sprite

Talimatta diyorki WordPress tema klasörünüzün içerisinde yeralan style.css yi indirip bir metin editörü ile açın ve nesela #layouttop {   ile başlayan kısmın altında yeralan headertop3.png yerine (üstünü çizmiş) Spriteme1.png yazın ve yine altında bulunan  background-position: kısmını background-position: -10px -10px; şekline getirin sonrasında aynı işlemi sırası ile aşağı doğru uygulayın ve son olarak style.css dosyanızı kaydedip ftp den hostunuza aynı yerine atın. işlem bukadar.



Yorum Ekle

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

CAPTCHA