Kas yra CSS sprite'ai?

CSS sprite'ai yra optimizavimo metodas, leidžiantis sujungti kelis vaizdus į vieną didelį vaizdą. Vietoj to, kad kiekvienas vaizdas būtų įkeltas atskirai, naršyklė įkelia vieną didelį failą ir tada naudoja CSS savybes background-image, background-position ir width/height, kad parodytų reikiamą šio vaizdo dalį.

CSS sprite'ų naudojimo privalumai:

• HTTP užklausų skaičiaus sumažinimas: Vieno failo įkėlimas vietoj daugelio sumažina serverio apkrovą ir pagreitina puslapio atvaizdavimą.
• Talpykla: Didelis vaizdas yra saugomas naršyklės talpykloje, kas pagerina našumą pakartotinių apsilankymų metu.
• Failo dydžio sumažinimas: Kai kuriais atvejais vaizdų sujungimas gali šiek tiek sumažinti bendrą failų dydį, optimizacijos pagalba.

Pavyzdys naudojimo (HTML):

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

Pavyzdys naudojimo (CSS):

.icon {
  width: 32px; /* Ikonos plotis */
  height: 32px; /* Ikonos aukštis */
  background-image: url('sprites.png'); /* Nuoroda į sprite failą */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* "home" ikonos pozicija sprite'e */
}

.icon.settings {
  background-position: -32px 0; /* "settings" ikonos pozicija sprite'e */
}

Šiame pavyzdyje, sprites.png yra failas, kuriame yra "home" ir "settings" ikonų vaizdai. background-position savybė nustato poslinkį, kad būtų rodomas norimas vaizdas.