Kas ir CSS sprite?

CSS sprite — tā ir optimizācijas tehnika, kurā vairāki mazi attēli tiek apvienoti vienā lielā attēlā. Tad, izmantojot CSS īpašības background-image un background-position, tiek parādīta tikai nepieciešamā šī lielā attēla daļa.

CSS sprite lietošanas priekšrocības:

• HTTP pieprasījumu skaita samazināšana: Tā vietā, lai katru attēlu ielādētu atsevišķi, pārlūkprogramma veic tikai vienu pieprasījumu sprite ielādei. Tas ievērojami paātrina lapas ielādes laiku.
• Kešatmiņa: Pārlūkprogramma kešē sprite, un nākamajās pieprasījumos atkārtoti ielādēt to nav nepieciešams.
• Renderēšanas paātrinājums: Tā kā visi attēli jau ir ielādēti vienā failā, pārlūkprogrammai ir vieglāk tos attēlot.

Piemērs lietošanai:

/* CSS elements, kas izmanto sprite */
.icon {
  background-image: url('sprites.png'); /* Jūsu sprite ceļš */
  width: 32px; /* Attēla daļas platums */
  height: 32px; /* Attēla daļas augstums */
}

/* Konkrēta attēla pozicionēšana sprite */
.icon-home {
  background-position: 0 0; /* "home" attēla augšējā kreisā stūra koordinātes */
}

.icon-settings {
  background-position: -32px 0; /* "settings" attēla augšējā kreisā stūra koordinātes */
}

Sprite struktūras piemērs (attēls sprites.png):

Attēls	Pozīcija
icon-home	0 0
icon-settings	-32px 0

Trūkumi:

• Sarežģītība uzturēšanā: Mainot vienu attēlu, ir jāizveido jauns sprite un jāatjaunina CSS.
• Pieejamība: Nepareiza lietošana var negatīvi ietekmēt pieejamību lietotājiem ar ierobežotām iespējām (piemēram, ja ikonas ir vienīgais informācijas nodošanas veids).
• Faila lielums: Ja sprite satur daudz attēlu, kopējais faila lielums var palielināties.

Neskatoties uz dažiem trūkumiem, CSS sprite joprojām ir efektīva optimizācijas metode noteiktās situācijās, īpaši ikonu un nelielu grafisko elementu gadījumā. Pēdējā laikā alternatīvi tiek izmantoti SVG sprite un ikonu fonti.