Creation
Spriteark-generator
Kombinera flera bilder till ett spriteark med CSS, JSON och SCSS-utdata för utvecklare.
Your files stay on your device - processed locally via WebAssembly, never uploaded
Drop sprites (PNG, JPEG, WebP)
Drop multiple files at once. Add more anytime.
Embed this tool on your website
Copy this code to add the Spriteark-generator to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/sprite-sheet" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="Spriteark-generator by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix Spriteark-generator</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About Spriteark-generator
Last updated: May 2026
OptiPix Sprite Sheet Generator kombinerar flera bilder till ett enda optimerat sprite sheet, med färdig att klistra in CSS, JSON-koordinater och SCSS-variabler. Välj en layout: horisontell remsa, vertikal remsa, rutnät (anpassat antal kolumner) eller packad (bin-packad för minimalt slöseri med utrymme). Ställ in stoppning mellan sprites för att förhindra kantblödning. Utmatningen är ett enda PNG sprite sheet plus genererad CSS för varje sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), en JSON-koordinatkarta och SCSS-variabler. Retina @1x och @2x skalning stöds. Varje sprite namnges efter dess källfilnamn. Allt körs lokalt - dina bilder lämnar aldrig din enhet. Byggd för spelutvecklare, webbutvecklare som använder CSS sprites, och alla som vill bunta ihop små ikoner till en enda nätverksbegäran.
How It Works
Varje indatabild laddas i minnet; den valda layoutalgoritmen (remsa, rutnät eller shelf bin-pack) beräknar koordinater per sprite (x, y, w, h); sprite sheet renderas på en canvas; CSS / JSON / SCSS genereras från samma koordinatkarta.
Use Cases
- •Buntta ihop UI-ikoner till ett enda PNG + CSS sprite sheet
- •Skapa en sprite-atlas för ett 2D-spel i Phaser eller Pixi
- •Kombinera sociala medie-ikoner till en enda CSS sprite för en snabbare webbplats
- •Packa karaktärsanimeringsramar i en horisontell remsa
- •Bygg ett retina-redo @2x sprite sheet från källbilder
You Might Also Like
If you find Spriteark-generator useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools
Frequently Asked Questions
Vilken layout ska jag använda?
Vad är bin-packing?
Kan jag exportera CSS / JSON / SCSS?
Varför använda ett sprite sheet?
Laddas mina bilder upp?
Related Tools
Bildbeskärare
Beskär till valfritt bildförhållande eller form – cirkel, hjärta, stjärna, hexagon – med rotation och rätning.
Bildstorleksändrare
Ändra storlek på bilder för Instagram, Twitter, LinkedIn och mer.
Formatkonverterare
Konvertera bilder mellan JPEG, PNG, WebP och mer.
Favicon-generator
Generera alla favicon-storlekar + ICO-fil + webbmanifest från valfri bild, text eller emoji.