Öncelikle konu alıntı değildir,bizzat tarafımca hazırlanmıştır.Nedense bu konuda işbilir arkadaşlar çok ticari düşündükleri için hayrına paylaşan olmamış.O nedenle bu işi ben üstlenmiş bulundum.Aslında bu kadar blogger ipuçları paylaşan arkadaş varken bu işin benim gibi sinema blogu yazarı birine kalması biraz garip.
Css Sprite tekniği nedir ?Css Sprite tekniği ile blog sitenizdeki resimler tek kaynakta birleştirilerek,site açılışı esnasında pek çok resmi ayrı ayrı çağırmak yerine tek kaynaktan resimler istendiği için fark edilir derecede hız artışı sağlanır.Bu konuda google örnek gösterilebilir.
Şimdi demo bir blog üzerinden resimli anlatıma geçeyim.Adım adım yapmanız gerekenler;
1)
GTmetrix | Website Speed and Performance Optimization sitesine giderek site açılış hızımızı hesaplatıyoruz.Kısa bir tarama sürecinin ardından değerler ekrana yansıyor.
2)Kırmızı çerçeve içerisine aldığım Combine images using css sprites bölümünü genişletiyoruz.Altta listelenen linklerdeki resimleri birleştirerek site açılış hızımızı arttıracağız.Şimdi sırasıyla linkleri yeni sekmelerde açarak,resimleri masaüstünde oluşturduğunuz bir klasörün içerisine toplayın.
)Az önce resimleri indirerek bir klasör içerisine toplamıştık.(temsili olarak anlatımın kısa sürmesi için bir kısmını indirip klasörde topladım.)
4)Şimdi
CSS Sprites - Online CSS Sprite Builder / Generator sitesine gidiyoruz.Browse bölümünden resimleri topladığımız klasörü gösteriyoruz.Klasör içerisindeki tüm resimleri seçtikten sonra (Ctrl+A) altta bulunan Create
Css Sprite butonu ile kodlar üretiliyor.
5)Bu adım önemli !
a)Resimde 1 numara ile işaretlediğim css sprite ile üretilen png uzantılı resmi,masaüstümüze farklı kaydedip ardından hostumuza upload ediyoruz.(Blogger kullananlar için picassa web albümü gibi)
b)2 numara ile işaretlediğim kısımdaki css kodlarını blog şablonumuzdaki ]]></b:skin> kodunun hemen üzerine ekliyoruz.Şöyle bir görüntü oluşacak;
Kod:
.sprites {
background-image : url(https://lh4.googleusercontent.com/-PfL_Ht8w5a0/T4LpfTuAkuI/AAAAAAAAFZc/6c1av6IOPaY/s125/sprites.png);
background-color : transparent;
background-repeat : no-repeat;
display:inline-block;
}
#postauthoriconffy_png {
height : 25px;
width : 25px;
background-position : -0px -0px;
}
#postcommentsiconam_png {
height : 25px;
width : 25px;
background-position : -25px -0px;
}
#postdateicongc_png {
height : 25px;
width : 25px;
background-position : -50px -0px;
}
#posttagiconcv_png {
height : 25px;
width : 25px;
background-position : -75px -0px;
}
#postheadericonuw_png {
height : 25px;
width : 25px;
background-position : -100px -0px;
}
]]></b:skin> Burada dikkat etmeniz gereken kırmızı ile belirtilen (/your/image/url.png)bölümünü hostunuza yüklediğiniz png resmin url si ile değiştirmek olmalı.İkincisi ise display:inline-block; kodunu eklemek.
c)3 numaralı kısımdaki div class html kodlarını ise şu şekilde blog şablonumuza ekliyoruz.Örneğin birinci kod için Ctrl+F yardımı ile postheadericonuw kelimesini arıyoruz;(siz tabii kendi resimlerinizin adı ile arama yapacaksınız)
Mesela şablonumuz içerisinde(Widget şablonlarını genişleterek) şu şekilde bulmuş olalım.
Kod:
<data:post.timestamp/> | <img src="http://img600.imageshack.us/img600/7413/postheadericonuw.png" width="32" height="32" alt="" />
<data:authorLabel/> <data:post.author/>
Şimdi kırmızı olarak işaretlediğim bölümü,üstteki resimde 3 nolu bölümde yer alan div class html kodlarından eşi ile değiştiriyoruz.
Kod:
<div class="sprites" id="postheadericonuw_png"></div>
Sonuç olarak şöyle bir görüntü oluşacak;
Kod:
<data:post.timestamp/> | <div class="sprites" id="postheadericonuw_png"></div>
<data:authorLabel/> <data:post.author/>
Bu işlemi css sprite ile üretilen tüm html kodlarını ekleyene dek sürdürüyoruz.Mantık hep aynı.Resmin adını şablon içerisinde aratıp,sonrasında div class etiketleri ile değiştiriyoruz.Kısaca sadece resmin kaynağını değiştirmiş oluyoruz.
Sonuç; yeniden
GTmetrix | Website Speed and Performance Optimization sitesini ziyaret edip site hızımızı hesaplatıyoruz.
Bazı sorular ve cevapları;1)Css sprite yöntemi ile tahmini olarak site hızım ne kadar artar?Sitenizdeki resim optimizasyonuna göre %3-5 arasında bir artış sağlanabilir.
2)Css sprite ile sitemdeki tüm resimleri tek resim haline getirsem olur mu?Öncelikli tavsiyem sadece google pagespeed ve gtmetrix hız hesaplaması sonrasında tavsiye edilen resimleri birleştirmenizdir.Temanızdaki tüm resimleri birleştirmeniz hem zahmetlidir hem de site tasarımınızda sorunlara yol açabilir.Bunun sebebi ise çoğumuzun kullandığı hazır olarak indirilmiş custom temalardır.Resimleri birleştiriyim derken bu sefer de kullanılmayan css miktarını arttımış olursunuz.(radius,border vs ..)Yani hız olarak verimli değildir.
Ancak kendi temalarını tasarlayan birisi tüm resimleri css sprite ile birleştirip kullanıma sunabilir.Zaten geçen gün tema sitesi açmayı düşünen bi arkadaşa da bunu önermiştim.
3)Sadece blogger için mi?wordpress de kullanılabilir mi?Anlatım sadece blogger platformu içindir.Wordpress'e hakim değilim o nedenle yardımcı olamayacağım.
4)Css sprite ile yaptığımız işlemin mantığı nedir?Css Sprite ile sitemizdeki farklı resimleri tek kaynak üzerinde birleştirerek açılış esnasında ayrı ayrı resimlerin yüklenmesi yerine,tek kaynaktan birleştirilmiş resmin yüklenmesini sağlamış oluruz.Bu sayede site açılış hızımızda gözlenir bir artış gerçekleşir.İşin anatomisi;
--------------------------------------------------------------------------
Mesajdaki bilgiler işinize yaradıysa,(ki doğru yaptıysanız mutlaka yarayacak)destek olmak için sinema blog sitemi (After Dark Horror Movies) friend connect yoluyla ya da sosyal paylaşım butonları ile imlerseniz sevinirim.Zamanla yine blogger ipuçları ağırlıklı sitelerde nadiren bulabileceğiniz,faydalı css ağırlıklı paylaşımlar yapacağım.
