CSS Sprite Nedir? 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.

• 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.

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

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 ...

CaNn' Alıntı:

Elinize sağlık hocam faydalı bir konu olmuş

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