Hürkal adlı üyeden alıntı

1.


2. Sitenizde kullandığınız tüm resimleri tek bir resim dosyasında topluyorsunuz. Böylece tek seferde hepsi elde ediliyor. Ardından resimlerin kullanılacağı alanlarda CSS kodlarıyla büyük resmin başlangıç koordinatlarını x ve y cinsinden giriyorsunuz, resmin kullanacağınız kısmını da söz konusu alanın genişlik ve yüksekliği olarak belirtiyorsunuz.


Hocam dediğiniz gibi @import olan .css leri düzenledim. seo analizinde hala sorun görünüyor fakat çok acayip birşey oldu. bu kodları yazınca sitenin açılış hızı inanılmaz arttı. şöyle ki @import varken seo analizinde açılış hızı 6,99sn iken sizin verdiğiniz kodları girdiğimde bu açılış hızı 2.52sn'ye düştü :D birkaç kez test ettim farklı bir şey yüzünden mi oldu diye @import lu kodu girince açılış hızı 6,99sn lere geliyor kodu silip sizin verdiğiniz kodu girince 2.50sn civarına geliyor. ne mübarek kodmuş :D ama @import hatası hala gitmedi. belki bir süre beklemek lazım. şimdi css sprite için uğraşacağım umarım yapabilirim.

Ek Olarak:

StRonK adlı üyeden alıntı

aslında pek de bi bilgi gerekmiyor ben çata pata bişiler diyeim css sprite hakkında
http://tr.spritegen.website-performance.org/
yukarıda siteye girin zip dosyasına attığınız 3-5-10 resim dosyasını zipteki max boyut 1mb olacak

Daha sonra Tümleşik Resim Üretim Seçenekleri altında
Yatay Aralık: 5px
Dikey Aralık:5px
Diye ayarlayın

CSS Üretim Seçenekleri burada seçeneklerde sprite- silin gitsin sonrada Tümleşik Resim Dosyasını & CSS Kodlarını Üret ürete tıklayın tamamdır resim dosyasın indirip ftpye atmayı unutmuyoruz :D

gelelim eklemeye

orda nasıl olacağinida açıklıyor aslında



.deneme {
background: url(csg-5053b527745da.png) no-repeat;
background-position: 0 -62px; width: 15px; height: 12px;
}

cevabınız için teşekkür ederim. deneyeyim bakalım umarım yapabilirim.

Ek Olarak: @StRonK hocam bu sprite i yapamadım kafamda karıştı. şimdi önce images klasörünü zip yapıp dediğiniz gibi siteye yükledim. bana tek bir resim dosyası ve kodları verdi. Şimdi ben bu kodları css dosyasına nasıl yerleştireceğim örnek verecek olursak;

voteinfo adlı bir resmi ele alalım. bu resim blocks.css adlı dosyanın içinde duruyor ve kodları şöyle

.bvote p {
background:#f6fafd url(../images/voteinfo.png) no-repeat 100% 0;
border:1px solid #d8e3ea;
color:#466f9d;
padding:5px 18px 5px 8px;
}

bana verilen kod ise şu şekilde;
.voteinfo{ background-position: -5258px -176px; width: 12px; height: 12px; }

şimdi bunu nasıl düzenleyeceğiz? Ben şu şekilde denedim ama olmadı. sprite resmin adını spriteimages olarak değiştirip images klasörüne attım ve kodları şu şekilde değiştirdim.

#container li {
background: url(../images/spriteimages.png) no-repeat top left;
}
{ background-position: -5258px -176px; width: 12px; height: 12px; }

hata nerde?