Dnešní návod věnuji metodě CSS sprite. Rozeberu, co vůbec sprite znamená a napíšu o použití této metody. Přesněji její omezení, kde je užití přínosné a podobně. Článek jsem také obohatil praktickým CSS sprite generátorem. Věřím, že při tvorbě sprite obrázků ušetří plno času.

Co je to CSS sprite a k čemu slouží?

CSS sprite je způsob, jak snížit počet požadavků sloučením několika obrázků do jednoho.

Snad každý prohlížeč stahuje současně maximálně 6 prvků z jedné stránky (a asi 60 celkově). Takže pokud máte na stránce 20 obrázků, je to problém a stránky se zbytečně stahují dlouho. Když návštěvník načítá jen jednu stránku tak to není tak znát, ale cirka 70 % lidí chodí přes vyhledávače. Ve výsledcích si otevře stránek 10 a pak je rychlost načtení díky zatížení prohlížeče velmi rozdílná.

Tato metoda se tudíž používá ke zvýšení rychlosti stránky. Díky sníženému počtu požadavků na stránce dovolíme prohlížeči stahovat obrázky svižněji. Nebude docházet ke zpoždění stahování dalších souborů a stránky budou rychlejší. Tolik asi k tomu, proč sprite používat.

Jak a které obrázky vzájemně pospojovat?

Do sprite se hodí vložit různé vlaječky států, u e-shopů třeba malé obrázky značek či grafické prvky stránky (jako tlačítka, ikonky, zakulacené prvky). Jen pro zajímavost, sprite metoda není jen o webových stránkách, ale toto pospojování obrázků se používá například i u počítačových her. A jak tedy jednoduše kombinovat snímky do jednoho a udělat sprite obrázek?

Použijte CSS sprite generátor – svižný a zdarma

Běžné online generátory dělají obrázky naprosto šílený a nepoužitelný, ale tento ne. Autorem je webový vývojář Matthew Cobbs a já se postaral o překlad. Je to výborný nástroj, který velmi usnadňuje tvorbu CSS sprite.

Sprite generátor si můžete vyzkoušet na této speciální adrese. Stačí vybrat obrázky a kliknout na vygenerovat. Nástroj sám vytvoří sprite obrázky a potřebné CSS styly dle požadavků, které si nastavíte.

Tímto nástrojem snadno uděláte kompletní CSS sprite za pár minut vteřin. Předpokládám, že CSS ovládáte a tak zde nebudu popisovat návod, jak data z generátoru aplikovat. Obrázek nahrajte na server a pomocí vygenerovaného CSS napolohujete jednotlivé obrázky.

Pro dotazy a řešení překážek pak použijte komentáře. Mimochodem, pro určení souřadnic již hotových obrázků nemusíte používat nutně Photoshop (F8), ale existují i webový pomocníci, kteří to zvládají mnohem efektivněji.

Jaké jsou úskalí a omezení této metody?

Není nic, co by mělo jen pozitiva. CSS sprite se prostě moc nekamarádí s opakovanou grafikou / obrázkem. Taky nejde použít u prvků u kterých již máte nastavené rozměry (width, height), protože pak nemůžete říct, jak velká část sprite obrázku se má zobrazit aniž byste rozměry nezměnily.

Podobné to je s vlastností Background-position. Ta nám slouží k zadání souřadnic k části obrázku, kterou chceme ve velkém sprite obrázku na konkrétním místě zobrazit. Jestliže máte původní obrázek polohován třeba přes procenta v background-position, nebudete to mít lehké.

Není lepší použít data URI místo CSS sprite?

Data URI jsou takové dlouhé nudle znaků, které nahradí obrázek. Tímto způsobem se úplně vyloučí HTTP požadavek. O metodě jsem již psal a vřele ji doporučuji. Pokud máte s CSS sprite problémy, jděte do data URI. Osobně mám tuto variantu raději, protože aplikace je snadná.

Vezmete obrázek, vygenerujete si textovou alternativu a tu vložíte do CSS namísto adresy k obrázku. Vyloučíte naprosto HTTP požadavek na obrázek a je to práce na dvě minutky. Rozhodně je to šetrnější než v Photoshopu spojovat všechny obrázky do jednoho, hledat souřadnice a podobně. Každá metoda má své, ale pokud se vám do tvorby CSS sprite nechce, máte tu přinejmenším zajímavou alternativu, která nesežere tolik času.

Co dodat k článku závěrem?

CSS sprite není tak univerzální jako kešování či gzip komprese, ale své uplatnění určitě má. V mnohém pomůže snížit jinak mraky požadavků a já doufám, že budete generátor používat a ušetří plno času. Zkuste mi také napsat jaký na metodu máte názor a zda ji užijete. Díky.