Co jsou CSS sprite?

CSS sprite je optimalizační metoda, která umožňuje spojit několik obrázků do jednoho velkého obrázku. Místo načítání každého obrázku zvlášť, načte prohlížeč jeden velký soubor a poté pomocí vlastností CSS background-image, background-position a width/height zobrazí požadovanou část tohoto obrázku.

Výhody používání CSS sprite:

• Snížení počtu HTTP požadavků: Načítání jednoho souboru místo mnoha snižuje zátěž serveru a urychluje vykreslování stránky.
• Cache: Velký obrázek je uložen v cache prohlížeče, což zlepšuje výkon při opakovaných návštěvách.
• Snížení velikosti souboru: V některých případech může spojení obrázků mírně snížit celkovou velikost souborů díky optimalizaci komprese.

Příklad použití (HTML):

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

Příklad použití (CSS):

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

.icon.home {
  background-position: 0 0; /* Pozice ikony "home" ve sprite */
}

.icon.settings {
  background-position: -32px 0; /* Pozice ikony "settings" ve sprite */
}

V tomto příkladu je sprites.png soubor obsahující ikony "home" a "settings". Vlastnost background-position určuje posun, aby se zobrazila požadovaná ikona.