Generator CSS sprite sheeta

Kako napraviti sprite sheet

1. Prevuci slike na polje za unos ili klikni na njega da ih odabereš. Prihvataju se PNG, SVG, WebP, JPG i drugi formati koje tvoj preglednik može čitati, do 500 slika. Svaka datoteka se pojavljuje na listi Slike sa svojom veličinom; dugme × uklanja jednu sliku, a Ukloni sve slike briše listu.
2. Odaberi Raspored: Mreža, Zbijeno (najmanja ploča), Vodoravna traka ili Okomita traka. Uz Mreža polje Kolone (0 = automatski) određuje broj kolona.
3. Postavi Razmak (px) između spriteova (zadano 2) i označi Veličina kao stepen broja dva (256, 512, 1024…) ako to traži tvoj engine ili GPU.
4. Odaberi Datoteku s podacima: CSS (klase background-position), JSON (mapa kadrova) ili CSS i JSON. Podesi Naziv datoteke i Prefiks CSS klase (oboje je zadano „sprite“).
5. Provjeri pregled, Veličinu ploče i Iskorišteni prostor, zatim klikni Preuzmi ZIP (PNG + podaci) ili Preuzmi samo PNG. Generisani kod možeš i direktno kopirati.

Slike se dekodiraju u tvom pregledniku i ništa se ne šalje na server. SVG bez vlastite širine i visine rasterizuje se tako da mu je duža stranica 256 px.

Odabir rasporeda

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

Ploča ne može premašiti 16.384 px po stranici ili oko 16,7 megapiksela, što je granica koju preglednici mogu nacrtati.

Korištenje CSS-a

CSS sadrži osnovnu klasu s pločom kao background-image i no-repeat, zatim po jednu klasu za svaki sprite, imenovanu prema njegovoj datoteci: home.png postaje sprite-home. Nazivi se pišu malim slovima, dijakritici se uklanjaju, ostali znakovi postaju crtice, a duplikati dobijaju -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 dobija background-position: -40px -20px: cijela ploča se unutar elementa pomjera 40 px ulijevo i 20 px nagore, pa kroz okvir elementa prolazi samo taj sprite. Razmak sprječava da se susjedni spriteovi prelijevaju kada se stranica uveća ili se tekstura filtrira.

Ekrani visoke gustoće: nacrtaj slike u dvostruko većoj veličini od prikaza, generiši ploču, zatim osnovnoj klasi dodaj background-size postavljen na pola veličine ploče i prepolovi širine, visine i pomake. Alat to ne generiše; to je ručna korekcija.

Jesu li spriteovi još uvijek korisni uz HTTP/2?

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