CSS Sprite Nedir? Nasıl Kullanılır? (1 kişi okuyor)

Hakan' Alıntı:

CSS Sprite Nedir?, web sitelerindeki küçük ikon, düğme gibi çok sayıda görseli tek bir büyük görsel dosyasında birleştirme tekniğidir. CSS'in background-position özelliği sayesinde bu birleşik görselin istenen kısımları, ilgili HTML elemanlarının arka planı olarak görüntülenir.

CSS Sprite Amacı: Web sitesi performansını artırmak ve sayfa yüklenme süresini kısaltmaktır.

CSS Sprite Nasıl Kullanılır?

1. Görsel Birleştirme: Küçük boyutlu görseller (ikon, buton vb.), grafik düzenleme yazılımları veya çevrimiçi araçlarla tek bir büyük görsel dosyasına (genellikle PNG) yerleştirilir.
2. CSS ile Konumlandırma: Her bir küçük görselin büyük görseldeki (x, y) koordinatları belirlenir. CSS'te ilgili HTML elemanının background-image özelliği birleşik görselin yolunu gösterirken, background-position özelliği ile de görüntülenmek istenen küçük görselin koordinatları belirtilir. width ve height özellikleri ile görünür alanın boyutu ayarlanır.
3. CSS'te Tanımla:
   • background-image ile bu büyük görseli ilgili HTML elemanına arka plan yap.
   • background-repeat: no-repeat; ile tekrarı engelle.
   • width ve height ile görünür alanı ayarla.
   • background-position ile büyük görselin hangi kısmının görüneceğini (x ve y koordinatlarıyla) belirt.

CSS Sprite Kullanma: Tek görsel yükle, CSS ile doğru bölümünü göster.

CSS Sprite Avantajları Nelerdir?:

• Azaltılmış Sunucu İstekleri: Tarayıcı, her bir küçük görsel için ayrı ayrı HTTP isteği göndermek yerine tek bir istek ile tüm görselleri yükler, bu da sunucu yükünü ve sayfa yüklenme süresini azaltır.
• Geliştirilmiş Performans: Daha az sunucu isteği, sayfanın daha hızlı yüklenmesini sağlayarak kullanıcı deneyimini iyileştirir.
• Bant Genişliği Tasarrufu: Daha az HTTP isteği, daha az veri transferi anlamına gelir.
• Azalan Titreme (Flicker): Sayfa geçişlerinde veya etkileşimlerde ayrı ayrı yüklenen görsellerin neden olabileceği görsel titremeyi azaltır.

CSS Sprite Kullanım Alanları:

CSS Sprite genellikle şu tür statik ve sık kullanılan görseller için idealdir:

• Küçük ikonlar
• Düğmeler
• Sosyal medya ikonları
• Navigasyon elemanları

CSS Sprite, birden çok küçük görseli tek bir görselde birleştirerek web sitesi performansını optimize etmek için kullanılan etkili bir yöntemdir.

Ekli dosyayı görüntüle 1962

Genişletmek için tıkla ...