CSS Sprite

CSS sprite web site performansını hızlandırmak için birden çok resim dosyasını tek bir dosyada birleştirerek css dosyamızdan çağırmaktır.

sprite.png dosyası hazırlanır ve resimler ilgili öğelere background-position: width, height değerleri ile eşleştirilir.

Örnek sprite.png

sprite birleşik büyük grafik ve haraketli grafik anlamına gelir.
Örnek olarak yukarıdaki sprite.png dosyamız 5 adet birleşik grafiği içermektedir.
sprite yaparak birleştirdiğimiz için web tarayıcıları 5 adet ayrı resim yüklemek yerine tek bir resim yükleyerek diğer 5 resmi de görüntülemiş olacaktır.

Sprite Uygulama HTML Kodları

<div class="browser-wrapper">
    <div class="chrome"></div>
    <div class="firefox"></div>
    <div class="safari"></div>
    <div class="opera"></div>
    <div class="edge"></div>
</div>
                        

Sprite Uygulama CSS Kodları

.browser-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .chrome,
  .firefox,
  .safari,
  .opera,
  .edge {
    background: url("../img/browser.png") no-repeat;
    width: 108px;
    height: 109px;
  }
  .chrome {
    background-position: 0px 0px;
  }
  .safari {
    background-position: -108px 0px;
  }
  .opera {
    background-position: -216px 0px;
  }
  .edge {
    background-position: -324px 0px;
  }
  .firefox {
    background-position: -433px 0px;
  }
                        

Sonuç

 

 

 

 

 

Yukarıdaki örnekte farkettiğiniz gibi x-eksenleri için negatif değerler kullanılmıştır. Örnek background-position: -108px 0px; yukarıdaki resimde belirtildiği gibi sprite.png içerisindeki bir resmi çekmek için 0-noktasından sola ya da aşağı gitmek gerekiyor ise sprite.png resminin negatif yönlerde götürülmesi gerekir. Bu yüzden yukarıda .chrome hariç(0,0 noktasında olduğu için) tüm öğeleri arka planlarını getirmek için background-position: -px 0; olarak yazıldı.