Cum se implementează sprite-urile CSS pe o pagină sau…

Sprite-urile CSS sunt o metodă de combinare a mai multor imagini într-una singură mare. Se implementează cu ajutorul CSS, controlând vizibilitatea fragmentului necesar din imaginea mare prin proprietățile background-image, background-position și background-repeat.

Avantaje:

Reducerea numărului de solicitări HTTP. În loc să se încarce mai multe imagini mici, se încarcă una mare.
Accelerarea încărcării paginii. Mai puține solicitări către server, randare mai rapidă.
Economisirea traficului. Dimensiunea totală a fișierului este adesea mai mică decât suma imaginilor separate.

Implementare:

Crearea sprite-ului: Combinarea imaginilor folosind editoare grafice sau instrumente online/compilatoare speciale (de exemplu, Webpack cu plugin-ul css-spritesmith-plugin).

CSS: Pentru elementele care utilizează imagini din sprite, se aplică următoarele stiluri:

.icon {
  background-image: url('path/to/sprite.png'); /* Calea către fișierul sprite */
  background-repeat: no-repeat; /* Imaginea nu se repetă */
  display: block; /* sau inline-block, în funcție de element */
  width: 32px; /* Lățimea iconiței necesare */
  height: 32px; /* Înălțimea iconiței necesare */
}

.icon-home {
  background-position: 0 0; /* Poziția fragmentului necesar al iconiței "Acasă" */
}

.icon-settings {
  background-position: -32px 0; /* Poziția fragmentului necesar al iconiței "Setări" */
}

În codul CSS furnizat, .icon stabilește proprietățile generale pentru toate elementele care utilizează sprite-ul. Clasele precum .icon-home și .icon-settings determină poziția specifică a imaginii necesare în interiorul sprite-ului folosind background-position.

Cum se implementează sprite-urile CSS pe o pagină sau site?