Ce sunt sprite-urile CSS?

Sprite-urile CSS sunt o metodă de optimizare care permite combinarea mai multor imagini într-o singură imagine mare. În loc să încarce fiecare imagine separat, browser-ul încarcă un fișier mare și apoi folosește proprietățile CSS background-image, background-position și width/height pentru a afișa partea necesară a acestei imagini.

Avantajele utilizării sprite-urilor CSS:

• Reducerea numărului de solicitări HTTP: Încărcarea unui singur fișier în loc de mai multe reduce sarcina pe server și accelerează timpul de randare al paginii.
• Cache: O imagine mare este stocată în cache de browser, ceea ce îmbunătățește performanța la vizitele repetate.
• Reducerea dimensiunii fișierului: În unele cazuri, combinarea imaginilor poate duce la o ușoară reducere a dimensiunii totale a fișierelor datorită optimizării compresiei.

Exemplu de utilizare (HTML):

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

Exemplu de utilizare (CSS):

.icon {
  width: 32px; /* Lățimea pictogramei */
  height: 32px; /* Înălțimea pictogramei */
  background-image: url('sprites.png'); /* Calea către fișierul sprite */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Poziția pictogramei "home" în sprite */
}

.icon.settings {
  background-position: -32px 0; /* Poziția pictogramei "settings" în sprite */
}

În acest exemplu, sprites.png este fișierul care conține pictogramele "home" și "settings". Proprietatea background-position stabilește decalajul pentru afișarea pictogramei dorite.