Jak vytvořit CSS sprite za pár okamžiků

Čtvrtek, 3. Květen 2012

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.

Nabízíme vám širokou škálu zdravotnických potřeb.
V sortimentu www.dentimedshop.cz máme například inkontinenční pomůcky, zdravotní kompresní punčochy nebo ortézy. Pomůžeme vám s výběrem.

{ Komentáře k článku }

Jan

Hezký nástroj. Dostat obrázky do sprite mi zabralo jen chvilku. Je to hračka. Jen ses měl víc nerozepsat o tom, jak prohlížeč zobrazí tu správnou část obrázku a jak to udělat.

Na sjednocování jsem na svém Macu doteď používal placený TexturePacker.

Tomáš Erlich

TexturePacker znám, ale stojí 500,- tak jsem ho nekupoval.

Tenhle generátor zvládá stejnou práci a zadarmo. Jen poradím… mezery mezi obrázky nastav co možná nejmenší, aby sprite nebyl zaplněný prázdným prostorem (takzvané „bílé místo“).

Ke komprimaci hotového obrázku pak můžeš použít Kraken.io. Ušetříš tak pár dalších kB.

U některých obrázků je to dost znát. Třeba obrázek u fontů ke stažení se smrsknul na polovinu (při zachování kvality).

CrazyDog

Nějak jsem nepochopil oč jde… a v čem bych to měl vůbec využit. Zvláště, když mám pevný layout skládaný vlastnosti float.

Tomáš Erlich

Jsem rád, že jsi se tu stavil :). Myslíš si, že je článek příliš strohý? Vždycky napíšu článek a pak z něj vyházím vše, co není důležité. Tady jsem to pročistil o cirka 30 % textu. Chtěl jsem, aby to bylo strohé a jasné.

Co jsi konkrétně na článku nepochopil? Abych měl šanci na tom zapracovat a vysvětlit ti to…

Jinak CSS sprite bych opravdu využil jen na opakující se a malé obrázky. Konkrétně třeba na tlačítka (když na ně najedeš tak se načte jiný obrázek). Ukázku mám tady na svém blogu, když najedeš dolu do postranního menu.

Stejnou věc používá třeba Google na svém webu. Nejlepší příklad je asi, když si otevřeš výsledky vyhledávání a najedeš dolů na text Gooooooogle. Je to o tom, že to O je vlastně jeden obrázek, který se dokola opakuje. Chápeš?

Zkrátka se nacpe více menších obrázků do jednoho, aby se šetřily požadavky na server. Nejlepší asi bude, když se podíváš rovnou na obrázky, které Google používá (tady a tady).

Sprite se taky používá v počítačové grafice. Když máš ve hře více malých 2D obrázků tak se prostě nacpou do jednoho velkého. Takže z třiceti malých obrázků (třeba předmětů ve hře) se stane jeden.

Arxeiss

To s layoutem nemá nic společného.
Uvedu zde špatný příklad, kde jsem Sprite nepoužil, i když bych měl.

(nefunkční odkaz byl již smazán)

Je tam menu, a každá položka má jako pozadí obrázek, pokud najedeš na položku, a máš dost pomalý net, tak chvíli trvá, než se ten obrázek načte (možná si toho všimneš i tak).
Přesně zde by se měl využít Sprite, protože bych měl obrázek 2x vyšší nebo širší (záleží na tobě) a v něm by byly oba obrázky, jak ten vybraný tak nevybraný, a když bych na menu najel, pouze by se posunul… k žádné prodlevě by nedošlo.
Dále se podívej třeba na TinyMCE, tam všechny ty ikonky jsou taktéž v jednom obrázku a pouze se posouvají. Je to protože načítat tisíce malých obrázků je mnohem časově náročnější, než načítat jeden ale velký, není tam žádná prodleva.

CrazyDog

Tohle používám již od pradávna, jen jsem nevěděl že je to sprite. Pro je svinstvo nechat při najeti myši čekat na načtení změny… ale o tom ten článek nebyl (aspoň myslím).

Podle vysvětlení Tomáše jsem pochopil, že se to perfektně hodí např. na formátovací tlačítka (B,S,U…) čí smajlíky. Tím pádem nemusím mít 30 malých obrázku, ale stačí mi jeden. Při dalším webu použiji.

Nikdy mě to takhle nenapadlo… a jelikož si ikonky vytvářím sám, tak ani nepotřebují generátor, ale vytvořím si je rovnou jeden vedle druhého :).

w1k

Ja css sprity pouzivam roky rokuce a neviem si to vynachvalit.
Skratka v css staci nastavit jednu classu pre obrazok, tu classu potom len pouzivat inde len s inymi poziciami.

Aldík

Načítání obrázků je s použitím css-sprite fakt rychlejší. Já na své grafice převedením ušetřil 10 kB. Vyrobit sprite je díky generátoru jednoduché, ale nebaví mě se s tím v css dělat. Je to otrava vše přepisovat.

Kdybych to už neměl hotové, použil bych data URI. Zdá se mi to jednoduší.

Tomáš Erlich

Jen bych rád řekl, že hlavním účelem této metody není urychlení načítání stránek, ale spíše snížení počtu požadavků. Lépe řečeno alespoň to druhé je důležitější.

Na zrychlení webu je totiž plno dalších praktik, ale na snížení počtu požadavků toho zas tolik není.

Ale taky mě css sprite nebaví. Velké obrázky se dají kešovat a optimalizovat, ty malé využívat co možná nejméně a ty nejmenší převést prostě na data URI. Tím se redukuje požadavek a je klid.

Ovšem pro úplnost jsem tento článek raději napsal.

Komentáře jsou pro tento článek již uzavřeny.

Předchozí příspěvek:

Následující příspěvek:

Tato stránka již není udržována. Děkuji za pochopení.