Mis on CSS sprite?

CSS sprite'id on optimeerimismeetod, mis võimaldab ühendada mitu pilti üheks suureks pildiks. Selle asemel, et iga pilti eraldi laadida, laadib brauser ühe suure faili ja kasutab seejärel CSS omadusi background-image, background-position ja width/height, et näidata selle pildi vajalikku osa.

CSS sprite'ide kasutamise eelised:

• HTTP-päringute arvu vähendamine: Ühe faili laadimine vähendab serveri koormust ja kiirendab lehe renderdamist.
• Puhverdamine: Suur pilt salvestatakse brauseri vahemällu, mis parandab jõudlust korduvate külastuste puhul.
• Faili suuruse vähendamine: Mõnel juhul võib piltide ühendamine viia kogu failide suuruse väiksemaks, tänu optimeeritud tihendamisele.

Näide kasutamisest (HTML):

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

Näide kasutamisest (CSS):

.icon {
  width: 32px; /* Ikoni laius */
  height: 32px; /* Ikoni kõrgus */
  background-image: url('sprites.png'); /* Tee sprite-failile */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* "home"-ikoni asukoht sprite'is */
}

.icon.settings {
  background-position: -32px 0; /* "settings"-ikoni asukoht sprite'is */
}

Selles näites on sprites.png fail, mis sisaldab "home" ja "settings" ikoone. background-position omadus määrab nihke, et näidata soovitud ikooni.