Creation
Sprite sheet-generator
Kombiner flere billeder til et sprite sheet med CSS, JSON og SCSS-output til udviklere.
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 Sprite sheet-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="Sprite sheet-generator by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix Sprite sheet-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 Sprite sheet-generator
Last updated: May 2026
OptiPix Sprite Sheet Generator kombinerer flere billeder til et enkelt optimeret sprite sheet, med klar-til-indsæt CSS, JSON-koordinater og SCSS-variabler. Vælg et layout: vandret stribe, lodret stribe, gitter (brugerdefineret antal kolonner) eller pakket (bin-pakket for minimalt spildt plads). Indstil afstand mellem sprites for at forhindre kantblødning. Outputtet er et enkelt PNG sprite sheet plus genereret CSS for hver sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), et JSON-koordinatkort og SCSS-variabler. Retina @1x og @2x skalering understøttes. Hver sprite navngives efter dens kildefilnavn. Alt kører lokalt - dine billeder forlader aldrig din enhed. Bygget til spiludviklere, webudviklere der bruger CSS sprites, og alle der ønsker at samle små ikoner i en enkelt netværksanmodning.
How It Works
Hvert inputbillede indlæses i hukommelsen; den valgte layoutalgoritme (stribe, gitter eller shelf bin-pack) beregner (x, y, w, h) koordinater pr. sprite; sprite sheetet renderes på et canvas; CSS / JSON / SCSS genereres fra det samme koordinatkort.
Use Cases
- •Saml UI-ikoner i et enkelt PNG + CSS sprite sheet
- •Opret en sprite-atlas til et 2D-spil i Phaser eller Pixi
- •Kombiner sociale medie-ikoner til en enkelt CSS sprite for en hurtigere side
- •Pak karakteranimationsrammer i en vandret stribe
- •Byg et retina-klar @2x sprite sheet fra kildebilleder
You Might Also Like
If you find Sprite sheet-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
Hvilket layout skal jeg bruge?
Hvad er bin-packing?
Kan jeg eksportere CSS / JSON / SCSS?
Hvorfor bruge et sprite sheet?
Bliver mine billeder uploadet?
Related Tools
Billedbeskæring
Beskær til ethvert billedformat eller form – cirkel, hjerte, stjerne, sekskant – med rotation og ligeudretning.
Billedstørrelsesjustering
Tilpas billedstørrelser til Instagram, Twitter, LinkedIn og mere.
Formatkonverter
Konverter billeder mellem JPEG, PNG, WebP og mere.
Favicon-generator
Generer alle favicon-størrelser + ICO-fil + webmanifest fra ethvert billede, tekst eller emoji.