Generator CSS sprite sheet

Kako narediš sprite sheet

1. Spusti slike na območje za spuščanje ali klikni nanj in jih izberi. Sprejeti so PNG, SVG, WebP, JPG in druge oblike zapisa, ki jih tvoj brskalnik zna prebrati, do 500 slik. Vsaka datoteka se prikaže na seznamu Slike s svojo velikostjo; gumb × odstrani eno sliko, Odstrani vse slike pa izprazni seznam.
2. Izberi Postavitev: Mreža, Strnjeno (najmanjši list), Vodoravni trak ali Navpični trak. Pri Mreži Stolpci (0 = samodejno) določajo število stolpcev.
3. Nastavi Odmik (px) med sličicami (privzeto 2) in obkljukaj Velikost, potenca števila 2 (256, 512, 1024 …), če to zahteva tvoj pogon ali grafični procesor.
4. Izberi Podatkovno datoteko: CSS (razredi background-position), JSON (zemljevid okvirjev) ali CSS in JSON. Prilagodi Ime datoteke in Predpono razreda CSS (oba privzeto »sprite«).
5. Preveri predogled, Velikost lista in Izkoriščen prostor, nato klikni Prenesi ZIP (PNG + podatki) ali Prenesi samo PNG. Ustvarjeno kodo lahko tudi neposredno kopiraš.

Slike se dekodirajo v tvojem brskalniku in nič se ne naloži na strežnik. SVG brez lastne širine in višine se rasterizira z daljšo stranico 256 px.

Izbira postavitve

• Mreža vsaki sliki dodeli celico velikosti največje slike. Pri samodejnih stolpcih je mreža približno kvadratna. Je preprosta in predvidljiva ter idealna, kadar so vse sličice enako velike, na primer pri naboru ploščic.
• Strnjeno (najmanjši list) uporablja polično pakiranje: slike so razvrščene od najvišje in postavljene od leve proti desni v vrstah. Orodje preizkusi veliko širin lista in obdrži tisto z najmanjšo površino, pri čemer upošteva zaokrožanje na potenco števila 2, kadar je ta možnost vklopljena. Najboljše za ikone različnih velikosti.
• Vodoravni trak in Navpični trak postavita slike v eno vrstico ali stolpec v vrstnem redu, v katerem si jih dodal. To pričakuje veliko predvajalnikov animacij za sličice.

List ne sme presegati 16 384 px na stranico ali približno 16,7 megapiksla, kar je meja, ki jo lahko narišejo brskalniki.

Uporaba CSS

CSS vsebuje osnovni razred s listom kot background-image in no-repeat, nato pa po en razred za vsako sličico, poimenovan po njeni datoteki: home.png postane sprite-home. Imena se pretvorijo v male črke, naglasi se odstranijo, drugi znaki postanejo vezaji, dvojniki pa dobijo -2, -3.

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

Vsak razred sličice nastavi width, height in background-position z negativnimi zamiki. Sličica pri x = 40, y = 20 dobi background-position: -40px -20px: celoten list se v elementu premakne za 40 px v levo in 20 px navzgor, tako da skozi okvir elementa vidiš samo to sličico. Odmik preprečuje, da bi sosednje sličice prosevale, ko se stran poveča ali se tekstura filtrira.

Zasloni z visoko gostoto slikovnih pik: nariši slike v dvakratni prikazni velikosti, ustvari list, nato osnovnemu razredu dodaj background-size, nastavljen na polovico velikosti lista, in prepolovi širine, višine in zamike. Orodje tega ne ustvari; gre za ročno prilagoditev.

Ali so sprite sheeti še uporabni s HTTP/2?

Sprite sheeti so bili izumljeni za prihranek zahtev HTTP. Z multipleksiranjem HTTP/2 se veliko majhnih datotek naloži skoraj tako hitro kot ena, zato je pridobitev za spletna mesta precej manjša, za prilagodljive ikone pa so pogosto boljše ikone SVG ali ikonske pisave. Sprite sheeti ostajajo standard za 2D igre in sličice animacij: ena tekstura pomeni manj preklopov tekstur na grafičnem procesorju in eno datoteko za nalaganje.