Creation
Sprite lap generátor
Több kép kombinálása egy sprite lappá CSS, JSON és SCSS kimenettel fejlesztőknek.
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 lap generátor 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 lap generátor by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix Sprite lap generátor</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 lap generátor
Last updated: May 2026
Az OptiPix Sprite Sheet Generator több képet egyesít egyetlen optimalizált sprite lapon, készen álló CSS, JSON koordinátákkal és SCSS változókkal. Válasszon elrendezést: vízszintes csík, függőleges csík, rács (egyéni oszlopszám) vagy csomagolt (minimális pazarló helyet eredményező bin-packing). Állítsa be a sprite-ok közötti párnázást az élek kifolyásának megakadályozására. A kimenet egyetlen PNG sprite lap, plusz generált CSS minden sprite-hoz ('.sprite-icon-home { background-position: -0px -0px; … }'), egy JSON koordinátatérkép és SCSS változók. Retina @1x és @2x skálázás támogatott. Minden sprite a forrásfájl neve után kap nevet. Minden helyben fut – a képek soha nem hagyják el az eszközt. Játékfejlesztőknek, CSS sprite-okat használó webfejlesztőknek és bárkinek, aki kis ikonokat szeretne egyetlen hálózati kérésbe csomagolni.
How It Works
Minden bemeneti kép memóriába töltődik; a választott elrendezési algoritmus (csík, rács vagy polcos bin-pack) kiszámítja a sprite-onkénti (x, y, w, h) koordinátákat; a sprite lap egy canvas-ra renderelődik; a CSS / JSON / SCSS ugyanazból a koordinátatérképről generálódik.
Use Cases
- •UI ikonok csomagolása egyetlen PNG + CSS sprite lapba
- •Sprite atlasz létrehozása egy 2D játékhoz Phaserben vagy Pixiben
- •Közösségi média ikonok egyesítése egyetlen CSS sprite-ba a gyorsabb webhely érdekében
- •Karakter animációs képkockák csomagolása egy vízszintes csíkba
- •Retina-ready @2x sprite lap építése forrásképekből
You Might Also Like
If you find Sprite lap generátor 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
Milyen elrendezést használjak?
Mi az a bin-packing?
Exportálhatok CSS / JSON / SCSS fájlokat?
Miért használjak sprite lapot?
Feltöltődnek a képeim?
Related Tools
Kép vágó
Vágás bármilyen képarányra vagy formára – kör, szív, csillag, hatszög – forgatással és kiegyenesítéssel.
Kép átméretező
Képek átméretezése Instagram, Twitter, LinkedIn és más platformokhoz.
Formátum konverter
Képek konvertálása JPEG, PNG, WebP és más formátumok között.
Favicon generátor
Minden favicon méret + ICO fájl + web manifest generálása bármilyen képből, szövegből vagy emojiból.