Kas ir CSS sprite?

CSS sprite ir metode ir optimizācija, kas ļauj apvienot vairākus attēlus vienā lielā attēlā. Tā vietā, lai katru attēlu ielādētu atsevišķi, pārlūkprogramma ielādē vienu lielu failu un pēc tam izmanto CSS īpašības background-image, background-position un width/height, lai parādītu nepieciešamo šī attēla daļu.

CSS sprite izmantošanas priekšrocības:

• HTTP pieprasījumu skaita samazināšana: Ielādējot vienu failu vietā daudziem, samazinās servera slodze un paātrina lapas attēlošanu.
• Kešatmiņa: Liels attēls tiek saglabāts pārlūkprogrammas kešā, kas uzlabo veiktspēju atkārtotās apmeklējumu reizēs.
• Faila izmēra samazināšana: Dažos gadījumos attēlu apvienošana var nedaudz samazināt kopējo failu izmēru, izmantojot saspiešanas optimizāciju.

Piemērs lietošanai (HTML):

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

Piemērs lietošanai (CSS):

.icon {
  width: 32px; /* Ikonas platums */
  height: 32px; /* Ikonas augstums */
  background-image: url('sprites.png'); /* Ceļš uz sprite failu */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* "home" ikonas pozīcija sprite */
}

.icon.settings {
  background-position: -32px 0; /* "settings" ikonas pozīcija sprite */
}

Šajā piemērā, sprites.png ir fails, kas satur "home" un "settings" ikonas. background-position īpašība nosaka pārvietojumu, lai parādītu vēlamo ikonu.