Generátor CSS sprite sheetů

Jak vytvořit sprite sheet

1. Přetáhni obrázky do vyznačené oblasti, nebo na ni klikni a vyber je. Přijímají se PNG, SVG, WebP, JPG a další formáty, které prohlížeč umí číst, až 500 obrázků. Každý soubor se objeví v seznamu Obrázky se svou velikostí; tlačítko × odebere jeden obrázek a Odebrat všechny obrázky vymaže celý seznam.
2. Vyber Rozvržení: Mřížka, Úsporné (nejmenší plocha), Vodorovný pás nebo Svislý pás. U Mřížky určuje počet sloupců pole Sloupce (0 = automaticky).
3. Nastav Odsazení (px) mezi sprity (výchozí je 2) a zaškrtni Velikost mocniny dvou (256, 512, 1024…), pokud to vyžaduje tvůj engine nebo GPU.
4. Zvol Datový soubor: CSS (třídy s background-position), JSON (mapa snímků) nebo CSS a JSON. Uprav Název souboru a Předponu tříd CSS (obojí je výchozí „sprite“).
5. Zkontroluj náhled, Velikost sheetu a Využité místo, pak klikni na Stáhnout ZIP (PNG + data) nebo Stáhnout jen PNG. Vygenerovaný kód lze také rovnou zkopírovat.

Obrázky se dekódují ve tvém prohlížeči a nic se nenahrává. SVG bez vlastní šířky a výšky se rastruje tak, aby jeho delší strana měla 256 px.

Výběr rozvržení

• Mřížka dá každému obrázku buňku o velikosti největšího obrázku. Při automatickém počtu sloupců je mřížka zhruba čtvercová. Je jednoduchá a předvídatelná a ideální, když mají všechny sprity stejnou velikost, například sada dlaždic.
• Úsporné (nejmenší plocha) používá policové skládání: obrázky se seřadí od nejvyššího a umístí zleva doprava do řad. Nástroj zkouší mnoho šířek sheetu a ponechá tu s nejmenší plochou, přičemž při zapnuté volbě zohlední zaokrouhlení na mocninu dvou. Nejlepší pro ikony různých velikostí.
• Vodorovný pás a Svislý pás vloží obrázky do jedné řady nebo sloupce v pořadí, v jakém jsi je přidal(a). To očekává mnoho přehrávačů animací pro snímky.

Sheet nemůže přesáhnout 16 384 px na stranu ani asi 16,7 megapixelu, což je limit, který prohlížeče dokážou vykreslit.

Použití CSS

CSS obsahuje základní třídu se sheetem jako background-image a no-repeat, pak jednu třídu pro každý sprite pojmenovanou podle souboru: home.png se stane sprite-home. Názvy se převedou na malá písmena, odstraní se diakritika, ostatní znaky se změní na pomlčky a duplicity dostanou -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Každá třída spritu nastavuje width, height a background-position se zápornými posuny. Sprite na x = 40, y = 20 dostane background-position: -40px -20px: celý sheet se uvnitř prvku posune o 40 px doleva a o 20 px nahoru, takže skrz rámeček prvku prosvítá jen tento sprite. Odsazení brání tomu, aby se sousední sprity prolínaly při zvětšení stránky nebo filtrování textury.

Displeje s vysokým DPI: nakresli obrázky ve dvojnásobné zobrazované velikosti, vygeneruj sheet, pak do základní třídy přidej background-size nastavené na polovinu velikosti sheetu a zmenši na polovinu šířky, výšky i posuny. Nástroj to negeneruje; jde o ruční úpravu.

Jsou sprity s HTTP/2 stále užitečné?

Sprity vznikly, aby šetřily požadavky HTTP. S multiplexováním v HTTP/2 se mnoho malých souborů načte téměř stejně rychle jako jeden, takže přínos pro weby je mnohem menší a pro škálovatelné ikony jsou často lepší ikony SVG nebo ikonová písma. Sprite sheety zůstávají standardem pro 2D hry a snímky animací: jedna textura znamená méně přepínání textur na GPU a jeden soubor k načtení.