Generator CSS sprite sheetova

Kako napraviti sprite sheet

1. Povuci slike na zonu za ispuštanje ili klikni na nju za odabir. Prihvaćaju se PNG, SVG, WebP, JPG i ostali formati koje tvoj preglednik može pročitati, do 500 slika. Svaka se datoteka pojavljuje na popisu Slike sa svojom veličinom; gumb × uklanja jednu sliku, a Ukloni sve slike briše cijeli popis.
2. Odaberi Raspored: Mreža, Zbijeno (najmanji sheet), Vodoravna traka ili Okomita traka. Uz Mreža polje Stupci (0 = automatski) određuje broj stupaca.
3. Postavi Razmak (px) između spriteova (zadano 2) i označi Veličina potencije broja 2 (256, 512, 1024…) ako to traži tvoj pogon ili grafički procesor.
4. Odaberi Datoteka s podacima: CSS (klase s background-position), JSON (mapa okvira) ili CSS i JSON. Prilagodi Ime datoteke i Prefiks CSS klasa (oboje je zadano „sprite“).
5. Provjeri pregled, Veličina sheeta i Iskorišten prostor, zatim klikni Preuzmi ZIP (PNG + podaci) ili Preuzmi samo PNG. Generirani kôd možeš i izravno kopirati.

Slike se dekodiraju u tvom pregledniku i ništa se ne šalje na poslužitelj. SVG bez vlastite širine i visine rasterizira se s dužom stranom od 256 px.

Odabir rasporeda

• Mreža daje svakoj slici ćeliju veličine najveće slike. Uz automatske stupce mreža je otprilike kvadratna. Jednostavna je i predvidljiva, a idealna kad su svi spriteovi iste veličine, poput skupa pločica.
• Zbijeno (najmanji sheet) koristi slaganje po policama: slike se razvrstavaju od najviše prema najnižoj i postavljaju slijeva nadesno u redove. Alat isprobava mnogo širina sheeta i zadržava onu s najmanjom površinom, uzimajući u obzir zaokruživanje na potenciju broja 2 kad je ta opcija uključena. Najbolje za ikone različitih veličina.
• Vodoravna traka i Okomita traka stavljaju slike u jedan red ili stupac redoslijedom kojim si ih dodao. To očekuju mnogi playeri animacija za kadrove.

Sheet ne može premašiti 16 384 px po stranici ili oko 16,7 megapiksela, što je granica koju preglednici mogu iscrtati.

Korištenje CSS-a

CSS sadrži osnovnu klasu sa sheetom kao background-image i no-repeat, a zatim po jednu klasu za svaki sprite imenovanu prema njegovoj datoteci: home.png postaje sprite-home. Imena se pretvaraju u mala slova, dijakritici se uklanjaju, ostali znakovi postaju crtice, a duplikati dobivaju -2, -3.

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

Svaka klasa spritea postavlja width, height i background-position s negativnim pomacima. Sprite na x = 40, y = 20 dobiva background-position: -40px -20px: cijeli se sheet unutar elementa pomiče 40 px ulijevo i 20 px prema gore, pa kroz okvir elementa prolazi samo taj sprite. Razmak sprječava da susjedni spriteovi prodiru kad se stranica poveća ili se tekstura filtrira.

Zasloni visoke gustoće piksela: nacrtaj slike u dvostruko većoj veličini od prikazane, generiraj sheet, zatim osnovnoj klasi dodaj background-size postavljen na polovicu veličine sheeta te prepolovi širine, visine i pomake. Alat to ne generira; to je ručno podešavanje.

Jesu li spriteovi još korisni uz HTTP/2?

Spriteovi su izmišljeni da uštede HTTP zahtjeve. Uz HTTP/2 multipleksiranje mnogo malih datoteka učitava se gotovo jednako brzo kao jedna, pa je dobitak za web-stranice mnogo manji, a SVG ikone ili fontovi s ikonama često su bolji za skalabilne ikone. Sprite sheetovi ostaju standard za 2D igre i kadrove animacija: jedna tekstura znači manje prebacivanja tekstura na grafičkom procesoru i jednu datoteku za učitavanje.