Co jsou to CSS sprite?

CSS sprite je technika optimalizace webových stránek, při které je několik malých obrázků sloučeno do jednoho velkého obrázku. Poté se pomocí vlastností CSS background-image a background-position zobrazí pouze potřebná část tohoto velkého obrázku na stránce.

Výhody použití CSS sprite:

• Snížení počtu HTTP požadavků: Místo načítání každého obrázku zvlášť, pro načtení sprite se provede pouze jeden požadavek. To výrazně urychlí načítání stránky.
• Ukládání do mezipaměti: Prohlížeč uloží sprite do cache a při dalších požadavcích na obrázky z tohoto sprite již není nutné je znovu načítat.
• Zrychlení vykreslování: Vzhledem k tomu, že všechny obrázky jsou již načteny v jednom souboru, je pro prohlížeč jednodušší je zobrazit.

Příklad použití:

/* CSS pro prvek používající sprite */
.icon {
  background-image: url('sprites.png'); /* Cesta k vašemu sprite */
  width: 32px; /* Šířka zobrazované části */
  height: 32px; /* Výška zobrazované části */
}

/* Pozicování pro konkrétní obrázek ve sprite */
.icon-home {
  background-position: 0 0; /* Souřadnice levého horního rohu obrázku "home" */
}

.icon-settings {
  background-position: -32px 0; /* Souřadnice levého horního rohu obrázku "settings" */
}

Struktura sprite (obrázek sprites.png):

Obrázek	Pozice
icon-home	0 0
icon-settings	-32px 0

Nevýhody:

• Složitost údržby: Změna jednoho obrázku ve sprite vyžaduje převedení celého sprite a aktualizaci CSS.
• Dostupnost: Nesprávné použití může negativně ovlivnit přístupnost pro uživatele s omezenými schopnostmi (například pokud jsou ikony jediným způsobem přenosu informací).
• Velikost souboru: Pokud sprite obsahuje mnoho obrázků, celková velikost souboru může být velká.

Přes některé nevýhody zůstávají CSS sprite efektivní metodou optimalizace v určitých scénářích, zejména pro ikony a malé grafické prvky. V poslední době se jako alternativy staly SVG sprite a ikony fonty.