Šta su CSS sprite-ovi?

CSS sprite-ovi su metoda optimizacije koja omogućava kombinovanje više slika u jednu veliku sliku. Umesto da učitava svaku sliku posebno, pregledač učitava jedan veliki fajl, a zatim koristi CSS svojstva background-image, background-position i width/height za prikazivanje potrebnog dela te slike.

Prednosti korišćenja CSS sprite-ova:

• Smanjenje broja HTTP zahteva: Učitavanje jednog fajla umesto više smanjuje opterećenje servera i ubrzava vreme prikaza stranice.
• Keširanje: Velika slika se kešira u pregledaču, što poboljšava performanse pri ponovnim posetama.
• Smanjenje veličine fajla: U nekim slučajevima, spajanje slika može dovesti do blagog smanjenja ukupne veličine fajlova zahvaljujući optimizaciji kompresije.

Primer upotrebe (HTML):

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

Primer upotrebe (CSS):

.icon {
  width: 32px; /* Širina ikone */
  height: 32px; /* Visina ikone */
  background-image: url('sprites.png'); /* Putanja do sprite fajla */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Pozicija "home" ikone u sprite-u */
}

.icon.settings {
  background-position: -32px 0; /* Pozicija "settings" ikone u sprite-u */
}

U ovom primeru, sprites.png je fajl koji sadrži ikone "home" i "settings". Svojstvo background-position određuje pomeranje za prikaz željene ikone.