Sprite Sheet Generator

Kombiner flere billeder til et enkelt sprite sheet og generer CSS-kode.

Dele:

Træk & slip billeder her

eller klik for at uploade flere filer

Why Use This Tool?

Højeffektive værktøjer til frontend-optimering

Reduce HTTP requests and speed up loading.

1

Automatisk koordinatgenerering

Vi laver matematikken, så du ikke behøver det. Få øjeblikkeligt præcise X- og Y-koordinater for hvert individuelt billede i dit konsoliderede sprite sheet.

2

Smart-gitter pakkealgoritme

Vores motor arrangerer intelligent billeder af varierende størrelser i det mest effektive gitter muligt, minimerer tomt rum og reducerer den endelige filstørrelse.

3

Klar-til-brug CSS-klasser

Genererer en ren, kopi-indsæt CSS-blok med individuelle klasser for hvert aktiv, inklusive background-position og dimensionsegenskaber.

4

Tilpasselige layouttilstande

Vælg mellem vertikale striber, horisontale striber eller den mest effektive 'Gitter'-tilstand baseret på dit specifikke projekts behov.

5

Afstands- og mellemrumskontrol

Tilføj tilpasset afstand mellem sprites for at forhindre 'pixelblødning' – hvor dele af det tilstødende ikon ved et uheld vises i din UI.

6

Lokal hukommelsesbehandlingsbeskyttelse

Dine UI-aktiver er din ejendom. Al pakning og kodegenerering sker direkte i din browser og sikrer, at ingen data nogensinde forlader din enhed.

En guide til højhastighedsaktiver: Sådan bruger du generatoren

Create sprites in minimal steps.

1

Saml dine små aktiver

Saml alle de små ikoner, knapper eller frames af en animation, du vil kombinere. Sørg for, at de er i et højkvalitetsformat som PNG.

2

Batchupload til værktøjet

Vælg alle filer på én gang og upload dem. Værktøjet opretter straks en visuel forhåndsvisning af, hvordan de kan pakkes sammen.

3

Konfigurer optimeringen

Juster 'Afstand', hvis du er bekymret for, at kanter vises på retinaskærme, eller vælg et 'Vertikalt' layout, hvis du bygger en sidemenu eller filmstribe.

4

Gennemgå sprite-forhåndsvisningen

Tjek det genererede ark. Sørg for, at hvert element er synligt, og at gitteret er tæt og effektivt uden spildplads.

5

Download atlas-billedet

Klik på knappen 'Download sprite sheet' for at gemme den konsoliderede billedfil i dit projekts aktivmappe.

Sprite Sheet mestring: Hemmeligheder bag spilaaktivoprettelse

Er sprite sheets stadig relevante med HTTP/2?
Ja! Selvom HTTP/2 håndterer flere forespørgsler bedre, er sprite sheets stadig hurtigere, fordi de reducerer den samlede mængde metadata og komprimeringsoverhead.
Hvad sker der, hvis jeg har billeder i forskellige størrelser?
Vores smart-gitter algoritme er designet til dette! Den arrangerer dine billeder af alle former og størrelser i det mest kompakte rektangel muligt.
Skal jeg bruge JPG eller PNG til mit sprite sheet?
Vi anbefaler stærkt PNG. Det håndterer 'skarpe kanter' af ikoner bedre og understøtter gennemsigtighed, som er essentiel for de fleste web-UI arbejder.
Er der en grænse for, hvor mange billeder jeg kan inkludere?
Teknisk set nej. Vi anbefaler dog at holde sig til omkring 50-100 billeder per ark for at forhindre, at fildimensionerne bliver overvældende store.
Hvad er 'pixelblødning'?
Dette opstår, når sub-pixel rendering viser en stribe af det næste billede i arket. Tilføj 1-2 pixels 'Afstand' i vores værktøj for at forhindre dette.
Understøtter dette værktøj SVG?
Dette værktøj er til raster-sprites (PNG/JPG). Til SVG'er bør du bruge en 'SVG Sprite'-tilgang, som håndteres anderledes i moderne browsere.
Hvordan opdaterer jeg et sprite sheet senere?
Upload blot de originale ikoner plus det nye. Vores værktøj giver dig et nyt ark og ny CSS på sekunder.
Er dette værktøj gratis for spiludviklere?
Ja! Uanset om du laver en hjemmeside eller et mobilspil, er vores generator 100% gratis uden kommercielle begrænsninger.
Kan browsere cache sprite sheets?
Ja! Det er en af de største fordele. Browseren behøver kun at cache én fil for at have hvert ikon klar til alle sider på din side.
Er mine proprietære ikondata sikre?
Absolut. Fordi dine filer behandles lokalt i din browser, uploades, gemmes eller ses dine designs aldrig af vores system.