Čo sú CSS sprite-ové?

CSS sprite sú technikou optimalizácie webových stránok, pri ktorej sa niekoľko malých obrázkov spojí do jedného veľkého obrázka. Následne sa pomocou vlastností CSS background-image a background-position zobrazí len potrebná časť tohto veľkého obrázka na stránke.

Výhody používania CSS sprite:

• Zníženie počtu HTTP požiadaviek: Namiesto načítania každého obrázka zvlášť, pre načítanie sprite sa vykoná len jedna požiadavka. To výrazne zrýchli načítanie stránky.
• Ukladanie do vyrovnávacej pamäte: Prehliadač cache-uje sprite, a pri ďalších požiadavkách na obrázky z tohto sprite, nie je potrebné ich znovu načítať.
• Zrýchlenie vykresľovania: Keďže všetky obrázky sú už načítané v jednom súbore, prehliadač ich môže ľahšie zobraziť.

Príklad použitia:

/* CSS pre prvok, ktorý používa sprite */
.icon {
  background-image: url('sprites.png'); /* Cesta k vášmu sprite */
  width: 32px; /* Šírka zobrazovanej časti */
  height: 32px; /* Výška zobrazovanej časti */
}

/* Pozicionovanie pre konkrétny obrázok v sprite */
.icon-home {
  background-position: 0 0; /* Súradnice ľavého horného rohu obrázka "home" */
}

.icon-settings {
  background-position: -32px 0; /* Súradnice ľavého horného rohu obrázka "settings" */
}

Struktúra sprite (obrázok sprites.png):

Obrázok	Pozícia
icon-home	0 0
icon-settings	-32px 0

Nevýhody:

• Zložitosť údržby: Zmena jedného obrázka v sprite vyžaduje prebudovanie celého sprite a aktualizáciu CSS.
• Prístupnosť: Nesprávne použitie môže negatívne ovplyvniť prístupnosť pre používateľov s obmedzeniami (napríklad, ak sú ikony jediným spôsobom prenášania informácií).
• Veľkosť súboru: Ak sprite obsahuje veľa obrázkov, celková veľkosť súboru môže byť veľká.

Napriek niektorým nedostatkom zostávajú CSS sprite efektívnou metódou optimalizácie v určitých scenároch, najmä pre ikony a malé grafické prvky. V poslednom čase sa ako alternatívy stali SVG sprite a ikony fontov.