Creation
Sprite sheet generator
Combineer meerdere afbeeldingen tot een sprite sheet met CSS-, JSON- en SCSS-uitvoer voor ontwikkelaars.
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 combineert meerdere afbeeldingen tot één geoptimaliseerde sprite sheet, met kant-en-klare CSS, JSON-coördinaten en SCSS-variabelen. Kies een indeling: horizontale strook, verticale strook, raster (aangepast aantal kolommen) of gepakt (bin-packed voor minimale verspilde ruimte). Stel de vulling tussen sprites in om randbloeding te voorkomen. De uitvoer is één enkele PNG sprite sheet plus gegenereerde CSS voor elke sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), een JSON-coördinatenkaart en SCSS-variabelen. Retina @1x en @2x schaling ondersteund. Elke sprite wordt vernoemd naar de bestandsnaam van de bron. Alles draait lokaal - uw afbeeldingen verlaten nooit uw apparaat. Gebouwd voor game-ontwikkelaars, webontwikkelaars die CSS-sprites gebruiken, en iedereen die kleine pictogrammen wil bundelen in één netwerkverzoek.
How It Works
Elke invoerafbeelding wordt in het geheugen geladen; het gekozen lay-outalgoritme (strook, raster of shelf bin-pack) berekent coördinaten per sprite (x, y, w, h); de sprite sheet wordt op een canvas gerenderd; CSS / JSON / SCSS worden gegenereerd uit dezelfde coördinatenkaart.
Use Cases
- •Bundel UI-pictogrammen in één PNG + CSS sprite sheet
- •Maak een sprite-atlas voor een 2D-game in Phaser of Pixi
- •Combineer social media-pictogrammen in één CSS-sprite voor een snellere site
- •Verpak frames van karakteranimaties in een horizontale strook
- •Bouw een retina-klare @2x sprite sheet van bronafbeeldingen
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
Welke indeling moet ik gebruiken?
Wat is bin-packing?
Kan ik CSS / JSON / SCSS exporteren?
Waarom een sprite sheet gebruiken?
Worden mijn afbeeldingen geüpload?
Related Tools
Afbeeldingsbijsnijder
Snijd bij tot elke beeldverhouding of vorm – cirkel, hart, ster, zeshoek – met roteren en rechtzetten.
Afbeeldingsresizer
Wijzig de grootte van afbeeldingen voor Instagram, Twitter, LinkedIn en meer.
Formaatconverter
Converteer afbeeldingen tussen JPEG, PNG, WebP en meer.
Favicon-generator
Genereer elke favicon-grootte + ICO-bestand + webmanifest van elke afbeelding, tekst of emoji.