Bir sayfa veya web sitesinde CSS sprite'ları nasıl…

CSS sprite'lar, birkaç resmi tek büyük bir resme birleştirme yöntemidir. Bu, CSS kullanılarak gerçekleştirilir ve büyük resmin gerekli parçasının görünürlüğü background-image, background-position ve background-repeat özellikleriyle kontrol edilir.

Avantajlar:

HTTP isteği sayısının azaltılması. Birden fazla küçük resim yerine, tek büyük bir resim yüklenir.
Sayfa yükleme hızının artırılması. Daha az istek, daha hızlı render.
Veri tasarrufu. Toplam dosya boyutu, genellikle ayrı resimlerin toplamından küçüktür.

Uygulama:

Sprite oluşturma: Resimleri grafik düzenleyiciler veya özel çevrimiçi araçlar/derleyiciler (örneğin, Webpack ile css-spritesmith-plugin eklentisi) kullanarak birleştirme.

CSS: Sprite'tan resim kullanan öğeler için aşağıdaki stiller uygulanır:

.icon {
  background-image: url('path/to/sprite.png'); /* Sprite dosyasının yolu */
  background-repeat: no-repeat; /* Resim tekrar edilmez */
  display: block; /* veya inline-block, öğeye bağlı olarak */
  width: 32px; /* Gerekli ikon genişliği */
  height: 32px; /* Gerekli ikon yüksekliği */
}

.icon-home {
  background-position: 0 0; /* "Ev" ikonunun gerekli parçasının konumu */
}

.icon-settings {
  background-position: -32px 0; /* "Ayarlar" ikonunun gerekli parçasının konumu */
}

Verilen CSS kodunda .icon, sprite'ı kullanan tüm öğeler için genel özellikleri belirler. .icon-home ve .icon-settings gibi sınıflar, background-position kullanarak sprite içindeki gerekli görüntünün konumunu belirler.

Bir sayfa veya web sitesinde CSS sprite'ları nasıl uygulanır?