Css Sprite Nedir,Nasıl Kullanılır?

Css Sprite ile E-ticaret sitenizin ana sayfasında bulunan resimleri zaman zaman değiştirme gereği duyarsınız.Ancak kalıcı ya da uzun zaman kullandıktan sonra değiştireceğiniz  resimlerde olabilir. İşte bu resimleri, tek bir alanda toplayarak, aşırı kod kalabalığı ve sorgu sayısından kurtulursunuz. Bu sayede, sitenizin daha hızlı açılmasını ve resimlerin görüntülenebilmesi için geçen sürenin azaltılmasını sağlayabilirsiniz.

Css Sprite Nedir

Css sprite, e-ticaret sitenize giriş yaptığınız zaman sitenize çağrılmakta olan bütün resimleri tek bir resim dosyasında bir araya getirerek tek bir resim üzerinden çağırılmalarını sağlayan çok önemli bir kodlama dili ve tekniğidir. CSS Sprite temanızda kullandığınız bütün resimlerin tek bir resim dosyası içerisinde sıralanarak, birleştirip kullanılmasıdır. Yani temanızın resim klasöründe diyelim ki 10 tane resim var, bu 10 resmi tek bir resim dosyasında birleştirip, bu resimleri CSS kodları yardımıyla bu dosyadan sitenize ekliyorsunuz.Bu sayede sunucuyu ayrı ayrı meşgul etmeden bütün resimlerin daha hızlı yüklenmesini ve sitenizin daha hızlı açılmasını ve dolayısıyla arama motoru optimizasyonunuzdan daha yüksek performans almasını sağlar.

Css Sprite Nasıl Kullanılır?

Ana sayfanızda kullandığınız resim sayısı çok fazla olduğu zaman, arama motorları ve ya da başka kanallar ile sitenize giriş yapan kullanıcılar beklemek zorunda kalırlar.

Bu da kullanıcıların bekleme süresinin uzunluğu nedeniyle beklemeden sitenizden ayrılırlar. Bu nedenle sitenizden ayrılan kullanıcılar başka bir siteye yönelir ve bu durum size müşteri kaybı gibi olumsuzlukları getirir bu gibi olumsuzlukları ortadan kaldırmak için sitenizde Css Sprite ile resimlerinizi tek bir dosyada toplamalısınız.

CSS Sprite oluşturmak için iki yol var; bunlardan biri, photoshop proğramıyla görselleri alt alta veya yana birleştirerek dizdiğimiz bu görsellerin piksel bazında koordinatlarını hesaplamak.

Diğer bir yol ise, görselleri ayrı ayrı imaj haline getirip bu imajları CSS Sprites Genarator gibi online servislere yükleyip bu servislerin bize gönderdiği kodları sitemizde kullanarak birden fazla görseli tek dosyada toplayabiliriz. İkinci verdiğim örnek birinci verdiğim örneğe göre daha koloaydır

Nemutlu Yazılım ve Danışmanlık