Sprite Sheet Generator

Kombinera flera bilder till ett enda sprite-ark och generera CSS-kod.

Dela:

Dra och släpp bilder här

eller klicka för att ladda upp flera filer

Varför använda detta verktyg?

Högeffektiva verktyg för frontend-optimering

Reduce HTTP requests and speed up loading.

Automatisk koordinatgenerering

Vi gör matematiken så att du slipper. Få omedelbart exakta X- och Y-koordinater för varje enskild bild i ditt konsoliderade sprite-ark.

Smart-Grid Packningsalgoritm

Vår motor ordnar intelligent bilder av olika storlekar i det mest effektiva rutnätet som möjligt, vilket minimerar tomt utrymme och minskar den slutliga filstorleken.

Klara-att-använda CSS-klasser

Genererar ett rent, kopieringsbart CSS-block med individuella klasser för varje tillgång, inklusive egenskaper för background-position och dimensioner.

Anpassningsbara layoutlägen

Välj mellan vertikala remsor, horisontella remsor eller det mest effektiva 'Rutnät'-läget baserat på behoven i din specifika projektarkitektur.

Stoppning och avståndskontroll

Lägg till anpassat avstånd mellan sprites för att förhindra 'pixelblödning' – där delar av den intilliggande ikonen av misstag syns i ditt UI.

Lokal minnesbearbetningsskydd

Dina UI-tillgångar är din egendom. All packning och kodgenerering sker direkt i din webbläsare, vilket säkerställer att ingen data någonsin lämnar din enhet.

En guide till höghastighetstillgångar: Hur man använder generatorn

Create sprites in minimal steps.

Samla dina små tillgångar

Samla alla små ikoner, knappar eller ramar av en animation som du vill kombinera. Se till att de är i ett format av hög kvalitet som PNG.

Batchuppladdning till verktyget

Välj alla filer samtidigt och ladda upp dem. Verktyget skapar omedelbart en visuell förhandsgranskning av hur de kan packas tillsammans.

Konfigurera optimeringen

Justera 'Stoppning' om du är orolig för att kanter ska visas på retinaskärmar, eller välj en 'Vertikal' layout om du bygger en sidomeny eller filmremsa.

Granska Sprite-förhandsgranskningen

Kontrollera det genererade arket. Se till att varje objekt är synligt och att rutnätet är tätt och effektivt utan slösat utrymme.

Ladda ner Atlas-bilden

Klicka på knappen 'Ladda ner Sprite Sheet' för att spara den konsoliderade bildfilen i ditt projekts tillgångsmapp.

Sprite Sheet Mästerskap: Hemligheter för skapande av speltillgångar

Är sprite sheets fortfarande relevanta med HTTP/2?

Ja! Även om HTTP/2 hanterar flera förfrågningar bättre, är sprite sheets fortfarande snabbare eftersom de minskar den totala mängden metadata och komprimeringsoverhead.

Vad händer om jag har bilder av olika storlekar?

Vår smart-grid-algoritm är designad för detta! Den kommer att ordna dina bilder av alla former och storlekar i den mest kompakta rektangeln som möjligt.

Ska jag använda JPG eller PNG för mitt sprite-ark?

Vi rekommenderar starkt PNG. Det hanterar ikonernas 'skarpa kanter' bättre och stöder transparens, vilket är viktigt för de flesta webb-UI-arbeten.

Finns det en gräns för hur många bilder jag kan inkludera?

Tekniskt sett nej. Vi rekommenderar dock att hålla sig till cirka 50-100 bilder per ark för att förhindra att fildimensionerna blir överväldigande stora.

Vad är 'Pixelblödning'?

Detta inträffar när sub-pixelrendering visar en flisa av nästa bild i arket. Lägg till 1-2 pixlar 'Stoppning' i vårt verktyg för att förhindra detta.

Stöder detta verktyg SVG?

Detta verktyg är för rastersprites (PNG/JPG). För SVG:er bör du använda en 'SVG Sprite'-metod som hanteras annorlunda i moderna webbläsare.

Hur uppdaterar jag ett sprite-ark senare?

Ladda bara upp originalikonerna plus den nya. Vårt verktyg ger dig ett nytt ark och ny CSS på några sekunder.

Är detta verktyg gratis för spelutvecklare?

Ja! Oavsett om du gör en webbplats eller ett mobilspel är vår generator 100% gratis utan kommersiella begränsningar.

Kan webbläsare cacha sprite-ark?

Ja! Detta är en av de största fördelarna. Webbläsaren behöver bara cacha en fil för att ha varje ikon redo för alla sidor på din webbplats.

Är mina proprietära ikondata säkra?

Absolut. Eftersom dina filer bearbetas lokalt i din webbläsare, laddas dina mönster aldrig upp, lagras eller visas av vårt system.