CSS Sprite Tekniği

Web sayfalarının daha hızlı açılması için geliştirilen bir teknik olan CSS sprite tekniği veya CSS sprite yöntemi ile ilgili bilgiler yer alıyor.

Site tasarlarken birden fazla resim kullanabiliriz. Tasarımda fazla kullanılan resimler sitenin açılmasında uzun zaman alabilir. Çünkü her farklı resim dosyası için tarayıcılar sunucuya tekrar istek gönderecektir.

CSS sprite tekniği sunucu istek sayısını azaltarak sitenin daha hızlı açılmasını arama motorlarında üst sıralara çıkmasını ve daha az bant genişliği kullanılmasını sağlayacaktır.

Nasıl oluşturulur?

CSS Sprite dosyası oluşturmak için photoshop, fireworks, gimp gib grafik düzenleyicileri kullanabiliriz.

Dosyayı oluşturmak için öncelikle arka planı şeffaf/transparent bir dosya oluşturuyoruz. Daha sonra kullanacağımızı resimleri bu dosyaya dahil ediyoruz.

Daha hızlı oluşturmak için aşağıdaki siteleri de kullanabilirsiniz.

https://spritegen.website-performance.org/

https://css.spritegen.com/

Dosya şöyle bir görünümde olacaktır.

Nasıl Yapılır?

CSS sprite yöntemini uygulamak için ilk olarak kullanacağımız resmin dosya üzerindeki konumunu bulmamız gerekiyor.

Grafik düzenleyicilerle bulacağımız gibi yukarıda verdiğim siteler üzerinden oluşturduğumuzda bize konumlarını ve CSS kodlarını verecektir.

Grafik düzenleyicisinde bulmak.

Telefon simgesini kullandığımızı varsayarsak

Sağ taraftan konumu 107px;

Yukardan konumu 80px;

Ve son olarak ikonun boyutunu bulmamız gerekiyor.

Kullanacağımız ikon 18px genişlik, 18px yüksekliğe sahip

Gerekli olan değerleri aldıktan sonra değerleri CSS background-position, width, height özelliklerine yazdığımızda işlem tamamdır.

<a href="tel:333 555 666 777" class="telefon"></a>

.telefon {
    display: block;
    background-image: url('google-css-sprite.png');
    background-repeat: no-repeat ;
    background-position: -107px -80px;
    width: 18px;
    height: 18px;
}

CSS kodlarını dikkatli incelediğinizde;

background-position değerlerinin -107px sağ taraftan negatif konumu ve -80px yukardan negatif konumu olduğunu,

width ve height değerlerinin ikon boyutu değeri olduğuna dikkat edin…

Hayırlı günler dilerim.