Kako se implementiraju CSS sprite-ovi na stranici ili sajtu?

CSS sprite-ovi su tehnika za kombinovanje više slika u jednu veliku sliku. Implementira se pomoću CSS-a, kontrolišući vidljivost potrebnog fragmenta velike slike putem svojstava background-image, background-position i background-repeat.

Prednosti:

• Smanjenje broja HTTP zahteva. Umesto učitavanja više malih slika, učitava se jedna velika.
• Ubrzanje učitavanja stranice. Manje zahteva ka serveru, brže renderovanje.
• Ušteda u saobraćaju. Ukupna veličina fajla je često manja od sume pojedinačnih slika.

Implementacija:

1. Kreiranje sprite-a: Spajanje slika pomoću grafičkih editora ili specijalnih online alata/kompajlera (npr. Webpack sa plugin-om css-spritesmith-plugin).

2. CSS: Za elemente koji koriste slike iz sprite-a, primenjuju se sledeći stilovi:

   .icon {
     background-image: url('path/to/sprite.png'); /* Putanja do fajla sprite */
     background-repeat: no-repeat; /* Slika se ne ponavlja */
     display: block; /* ili inline-block, u zavisnosti od elementa */
     width: 32px; /* Širina potrebne ikone */
     height: 32px; /* Visina potrebne ikone */
   }
   
   .icon-home {
     background-position: 0 0; /* Pozicija potrebnog fragmenta ikone "Početna" */
   }
   
   .icon-settings {
     background-position: -32px 0; /* Pozicija potrebnog fragmenta ikone "Podešavanja" */
   }
   

U datom CSS kodu, .icon definiše opšte osobine za sve elemente koji koriste sprite. Klase poput .icon-home i .icon-settings određuju specifičnu poziciju potrebne slike unutar sprite-a pomoću background-position.