CSS-sprite-generator

Slik lager du et sprite-ark

1. Slipp bildene dine i dropsonen, eller klikk på den for å velge dem. PNG, SVG, WebP, JPG og de andre formatene nettleseren din kan lese, godtas, opptil 500 bilder. Hver fil vises i listen Bilder med størrelsen sin. Knappen × fjerner ett bilde, og Fjern alle bilder tømmer listen.
2. Velg et Oppsett: Rutenett, Pakket (minste ark), Vannrett stripe eller Loddrett stripe. Med Rutenett bestemmer Kolonner (0 = automatisk) antall kolonner.
3. Sett Mellomrom (px) mellom spritene (2 som standard), og huk av for Toerpotensstørrelse (256, 512, 1024 …) hvis spillmotoren eller GPU-en din krever det.
4. Velg Datafil: CSS (background-position-klasser), JSON (rutekart) eller CSS og JSON. Juster Filnavn og CSS-klasseprefiks (begge «sprite» som standard).
5. Sjekk forhåndsvisningen, Arkstørrelse og Utnyttet plass, og klikk på Last ned ZIP (PNG + data) eller Last ned bare PNG. Generert kode kan også kopieres direkte.

Bildene dekodes i nettleseren din, og ingenting lastes opp. En SVG uten egen bredde og høyde rasteriseres med den lengste siden på 256 px.

Velg oppsett

• Rutenett gir hvert bilde en celle på størrelse med det største bildet. Med automatiske kolonner blir rutenettet omtrent kvadratisk. Det er enkelt og forutsigbart, og ideelt når alle spritene har samme størrelse, som i et sett med fliser.
• Pakket (minste ark) bruker hylle-pakking: bildene sorteres med de høyeste først og plasseres fra venstre mot høyre i rader. Verktøyet prøver mange arkbredder og beholder den med minst areal, med hensyn til avrunding til toerpotens når det valget er på. Best for ikoner i ulike størrelser.
• Vannrett stripe og Loddrett stripe legger bildene i én rad eller én kolonne i den rekkefølgen du la dem til. Det er det mange animasjonsspillere forventer for ruter.

Arket kan ikke overstige 16 384 px per side eller omtrent 16,7 megapiksler, som er grensen nettlesere kan tegne.

Slik bruker du CSS-en

CSS-en inneholder en basisklasse med arket som background-image og no-repeat, deretter én klasse per sprite oppkalt etter filen: home.png blir sprite-home. Navnene gjøres om til små bokstaver, aksenter fjernes, andre tegn blir bindestreker, og duplikater får -2, -3.

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

Hver sprite-klasse setter width, height og en background-position med negative forskyvninger. En sprite ved x = 40, y = 20 får background-position: -40px -20px: hele arket flyttes 40 px mot venstre og 20 px oppover inni elementet, så bare den spriten vises gjennom elementets boks. Mellomrommet hindrer at nabosprites siver inn når siden zoomes eller en tekstur filtreres.

Skjermer med høy tetthet: tegn bildene dine i dobbel visningsstørrelse, generer arket, legg deretter til background-size satt til halvparten av arkstørrelsen i basisklassen, og halver bredder, høyder og forskyvninger. Verktøyet genererer ikke dette: det er en manuell justering.

Er sprites fortsatt nyttige med HTTP/2?

Sprites ble funnet opp for å spare HTTP-forespørsler. Med multipleksing i HTTP/2 lastes mange små filer nesten like raskt som én, så gevinsten for nettsteder er mye mindre, og SVG-ikoner eller ikonskrifter er ofte bedre for skalerbare ikoner. Sprite-ark er fortsatt standarden for 2D-spill og animasjonsruter: én tekstur betyr færre teksturbytter på GPU-en og én fil å laste.