CSS Sprite

co je to css sprite

CSS sprite je technika při níž je více jednotlivých obrázků sloučeno do jednoho velkého a pak zpětně pomocí CSS stylu je každý obrázek "vyříznut" a použit samostatně tak jako by se jednolo a jednotlivé obrázky.

k čemu je css sprite dobré

CSS sprite slouží ke snížení požadavků na server. Má výhodu v tom, že je na server odeslán pouze jeden požadavek namísto až několika desítek. Toto jednak ulehčí serveru, ale především umožní rychleji načítat stránky. Pokud je na stránce 20 ikon (v hlavičce, patičce apod.) a požadavek na každou ikonu trvá 200ms. Za předpokladu že jsou všechny umístěny na jednom serveru a tedy se stahují pouze dvě naráz, může celé natažení trvat dvě sekundy. Jeden větší obrázek může být stahován o něco delší dobu, ale čas na vytvoření spojení se serverem je delší. Ušetří se tak více než sekunda. Například Yahoo používá CSS sprite na své titulní stránce hned několikrát.

kde je háček css sprite?

Háčky jsou dva: první je praktický - vytvořit CSS sprite dá práci (i když na to existují i nástroje), přidání další ikony je opět pracnější než přidat běžný obrázek. Druhý háček může být, pokud někdo vypne styly - obrázky se samozřejmě nenačtou. Jenže kdo to dnes dělá? :-)

Především z prvního důvodu je doporučováno používat CSS sprite hlavně u víceméně statického obsahu, který je načítán s každou stránkou (hlavička, patička, menu apod.). Zde má totiž i pracnější optimalizace smysl a velmi dobře splní svůj účel.