Pokud jste o této technice zvyšování výkonu webových stránek nikdy neslyšeli, tak zde zrovna uvádím velice užitečný online nástroj, s jehož pomocí to jistě zvládnete.
Nejprve však co to vlastně jsou CSS spirty. Na webových stránkách přibližně od roku 2007 používá technika označovaná jako CSS sprity. Jde o spojení většího počtu malých ikon do jediného obrázku. Účelem není šetření výkonu procesoru, ale snížení počtu požadavků na WWW server a tudíž zvýšení výkonu webu.
CSS spirty můžou umožnit snížení počet HTTP požadavků na server, které návštěvník stránek vyšle k získání prvků obsažených na stránce, aniž by o tom měl tušení. Principem této techniky je že obrázky na stránce se sloučí do jednoho většího a umístí se na určených X,Y souřadnicích. Pak pomocí CSS atributubackground-positionmůžeme nastavit vzniklý obrázek na pozadí různým elementům stránky a pomocí dalších CSS vlastností umístíme pozadí tak, aby požadovaný jednotlivý obrázek padl do viditelné oblasti elementu na stránce.
Pro použití techniky CSS spirtů také vznikl online nástroj CSS Sprite generátor na adrese http://cs.spritegen.website-performance.org/
Tato technika může být velice efektivní při zvyšování výkonu stránek zejména tam kde jsou na stránce zobrazeny ve velkém počtu obrázky a ikony.
Tento nástroj CSS Sprite generátor automatizuje proces vytváření CSS spritů
Stačí uploadovat ZIP archiv obsahující 2 nebo více obrázků (GIF, PNG or JPG) a bude vygenerován sprite i odpovídající CSS pravidla pro zobrazení jednotlivých obsažených obrázků.
Můžete využít i spostu potřebných nastavení jako je šířka, výška, ignorování duplicitních obrázků, pozadí, rozestupy, barvu pozadí a mnoho dalších.
Generátor podporuje formáty GIF, PNG a JPG. V případě volby GIF nebo PNG lze použít průhledné pozadí. Výchozím formátem je PNG.
Podobný nástroj na generování CSS spritů s názvem CSS Sprites generátor naleznete zde.
Pokud se chcete zabývat touto problematikou hlouběji tak doporučuji web http://css-tricks.com/css-sprites/ . je sice v angličtině, ale rozhodně stojí za to. Naleznete zdenejenom informace o CSS spritech, ale i spoustu užitečných rad pro práci s CSS.
