Css

CSS İleri Düzey – CSS Sprite Tekniği (Image Sprites)

CSS İleri Düzey – CSS Sprite (Image Sprites)

Sprite, tanımlanmış X ve Y koordinatlarında küçük görüntüleri daha büyük bir görüntüde birleştirmekten oluşan iki boyutlu görüntülerdir. Sayfamızda ki görsellerin (ikonlar vb.) tümünü veya bir kısmını tek bir görselde birleştirip “background-position” özelliği ile pozisyonlarını ayarlayıp tek bir görselmiş gibi göstermeye “Sprite Tekniği” denilir. Sayfamızdaki her görselin ayrı ayrı yüklenmesi fazla zaman alır ve sunucuya her bir görsel için istek gider. Sprite tekniği sunucu isteklerinin sayısını azaltır ve bant genişliği tasarrufu sağlar. Sprite tekniği ile tüm görseller tek seferde ve hızlı bir şekilde yüklenmiş olur.

CSS Image Sprite Kullanmanın Avantajı

Çok sayıda resme, özellikle de simgeler, düğmeler vb. Birçok küçük resme sahip bir web sayfasının yüklenmesi ve birden çok sunucu isteğinin oluşturulması uzun zaman alabilir.

Ayrı görüntüler yerine görüntü sprite’larının kullanılması, bir tarayıcının sunucuya yaptığı HTTP isteklerinin sayısını önemli ölçüde azaltır; bu, web sayfalarının yüklenme süresini ve genel site performansını geliştirmek için çok etkili olabilir.

Not: HTTP isteklerinin sayısının azaltılması, web sayfasını kullanıcı için daha duyarlı hale getiren yanıt süresini azaltmada büyük etkiye sahiptir.

Aşağıda örnek bir Sprite görseli bulunuyor, sizde görsellerinizi isterseniz alt alta istersenizde yan yana birleştirebilirsiniz.

Sprite

Sprite

Örneğin açıklaması:
  • “tamam” ve “iptal” class’larımıza “background-image” özelliği ile arkaplanlarda “ornek-sprite.png” adlı görselimizi kullan dedik.
  • Görselin yatay ve dikey yönde tekrar etmesini istemediğimiz için “background-repeat” özelliğine “no-repeat” dedik.
  • “tamam” class’ımıza “background-position” özelliği ile kullanacağımız ikonun nerede olduğunu söyledik.
  • “iptal” class’ımıza da “background-position” özelliği ile kullanacağımız ikonun nerede olduğunu söyledik.

Yazar Hakkında

Beytullah Toprak

Genç girişimci olarak web sitemde siz değerli okuyucularımıza elimden geldiğince bilgi aktarmak hem öğrenmek , hem sizlere öğretmek amaçlamaktayız.

Yorum Yap