Čo sú CSS sprite-y?

CSS sprite-ov sú optimalizačná metóda, ktorá umožňuje spojiť viacero obrázkov do jedného veľkého obrázka. Namiesto načítania každého obrázka samostatne, prehliadač načíta jeden veľký súbor a potom pomocou vlastností CSS background-image, background-position a width/height zobrazí požadovanú časť tohto obrázka.

Výhody používania CSS sprite-ov:

• Zníženie počtu HTTP požiadaviek: Načítanie jedného súboru namiesto mnohých znižuje záťaž na server a zrýchľuje čas vykreslenia stránky.
• Cache: Veľký obrázok je uložený v cache prehliadača, čo zlepšuje výkon pri opakovaných návštevách.
• Zníženie veľkosti súboru: V niektorých prípadoch môže spojenie obrázkov viesť k miernemu zníženiu celkovej veľkosti súborov vďaka optimalizácii kompresie.

Príklad použitia (HTML):

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

Príklad použitia (CSS):

.icon {
  width: 32px; /* Šírka ikony */
  height: 32px; /* Výška ikony */
  background-image: url('sprites.png'); /* Cesta k sprite súboru */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Pozícia "home" ikony v sprite */
}

.icon.settings {
  background-position: -32px 0; /* Pozícia "settings" ikony v sprite */
}

V tomto príklade je sprites.png súbor obsahujúci ikony "home" a "settings". Vlastnosť background-position určuje posun, aby sa zobrazila požadovaná ikona.