Kaip CSS sprite'ai įgyvendinami puslapyje ar…

CSS sprite'ai yra technika, leidžianti sujungti kelis vaizdus į vieną didelį vaizdą. Tai įgyvendinama naudojant CSS, kontroliuojant reikalingo didelio vaizdo fragmento matomumą per background-image, background-position ir background-repeat savybes.

Privalumai:

HTTP užklausų skaičiaus sumažinimas. Vietoje kelių mažų vaizdų įkėlimo, įkeliamas vienas didelis vaizdas.
Puslapio įkėlimo greičio didinimas. Mažiau užklausų į serverį, greitesnis atvaizdavimas.
Srauto taupymas. Bendra failo dydis dažnai mažesnis nei atskirų vaizdų suma.

Įgyvendinimas:

Sprite sukūrimas: Vaizdų sujungimas naudojant grafinius redaktorius arba specialius internetinius įrankius/kompiliatorius (pavyzdžiui, Webpack su css-spritesmith-plugin).

CSS: Elementams, naudojantiems sprite vaizdus, taikomi šie stiliai:

.icon {
  background-image: url('path/to/sprite.png'); /* Nuoroda į sprite failą */
  background-repeat: no-repeat; /* Vaizdas nesikartoja */
  display: block; /* arba inline-block, priklausomai nuo elemento */
  width: 32px; /* Reikalingo piktogramos plotis */
  height: 32px; /* Reikalingo piktogramos aukštis */
}

.icon-home {
  background-position: 0 0; /* Reikalingos "Pradžia" ikonos dalies pozicija */
}

.icon-settings {
  background-position: -32px 0; /* Reikalingos "Nustatymai" ikonos dalies pozicija */
}

Pateiktame CSS kode .icon nustato bendras savybes visiems elementams, naudojantiems sprite. Klasės kaip .icon-home ir .icon-settings nurodo konkrečią reikalingos vaizdo vietą sprite viduje naudodamos background-position.

Kaip CSS sprite'ai įgyvendinami puslapyje ar svetainėje?