CSS sprite nedir?

CSS sprite'ları, birden fazla resmi tek büyük bir resimde birleştirmeye olanak tanıyan bir optimizasyon yöntemidir. Her resmi ayrı ayrı yüklemek yerine, tarayıcı tek büyük bir dosya yükler ve sonra CSS özellikleri background-image, background-position ve width/height kullanarak bu resmin gerekli kısmını gösterir.

CSS sprite kullanmanın avantajları:

• HTTP isteği sayısının azaltılması: Bir dosya yüklemek, çok sayıda dosya yüklemekten daha az yük bindirir ve sayfa render süresini hızlandırır.
• Önbellekleme: Büyük bir resim tarayıcı tarafından önbelleğe alınır, bu da tekrar ziyaretlerde performansı artırır.
• Dosya boyutunun azaltılması: Bazı durumlarda, resimlerin birleştirilmesi toplam dosya boyutunu küçük ölçüde azaltabilir, sıkıştırma optimizasyonu sayesinde.

Kullanım örneği (HTML):

<div class="icon home"></div>
<div class="icon settings"></div>

Kullanım örneği (CSS):

.icon {
  width: 32px; /* Simge genişliği */
  height: 32px; /* Simge yüksekliği */
  background-image: url('sprites.png'); /* Sprite dosyasının yolu */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* "home" simgesinin sprite içindeki konumu */
}

.icon.settings {
  background-position: -32px 0; /* "settings" simgesinin sprite içindeki konumu */
}

Bu örnekte, sprites.png "home" ve "settings" ikonlarını içeren sprite dosyasıdır. background-position özelliği, istenen ikonu göstermek için kaydırmayı belirler.