Creation
Penjana Helaian Sprite
Gabungkan berbilang imej ke dalam helaian sprite dengan output CSS, JSON dan SCSS untuk pembangun.
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 Penjana Helaian Sprite 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="Penjana Helaian Sprite by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix Penjana Helaian Sprite</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 Penjana Helaian Sprite
Last updated: May 2026
OptiPix Sprite Sheet Generator menggabungkan berbilang imej menjadi satu helaian sprite yang dioptimumkan, dengan CSS, koordinat JSON, dan pembolehubah SCSS sedia untuk tampal. Pilih susun atur: jalur mendatar, jalur menegak, grid (bilangan lajur tersuai), atau pek (pek bin untuk ruang terbazir minimum). Tetapkan jarak antara sprite untuk mengelakkan kebocoran tepi. Outputnya ialah satu helaian sprite PNG ditambah CSS yang dijana untuk setiap sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), peta koordinat JSON, dan pembolehubah SCSS. Penskalaan @1x dan @2x Retina disokong. Setiap sprite dinamakan mengikut nama fail sumbernya. Semuanya berjalan secara tempatan - imej anda tidak pernah meninggalkan peranti anda. Dibina untuk pembangun permainan, pembangun web yang menggunakan sprite CSS, dan sesiapa sahaja yang ingin membundel ikon kecil ke dalam satu permintaan rangkaian.
How It Works
Setiap imej input dimuatkan ke dalam memori; algoritma susun atur yang dipilih (jalur, grid, atau pek bin rak) mengira koordinat per-sprite (x, y, w, h); helaian sprite dirender pada kanvas; CSS / JSON / SCSS dijana daripada peta koordinat yang sama.
Use Cases
- •Bundel ikon UI ke dalam satu helaian sprite PNG + CSS
- •Cipta atlas sprite untuk permainan 2D dalam Phaser atau Pixi
- •Gabungkan ikon media sosial ke dalam satu sprite CSS untuk tapak yang lebih pantas
- •Pek bingkai animasi watak ke dalam jalur mendatar
- •Bina helaian sprite @2x sedia retina daripada imej sumber
You Might Also Like
If you find Penjana Helaian Sprite 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
Susun atur mana yang patut saya gunakan?
Apa itu pek bin?
Bolehkah saya mengeksport CSS / JSON / SCSS?
Mengapa menggunakan helaian sprite?
Adakah imej saya dimuat naik?
Related Tools
Pemangkas Imej
Pangkas kepada mana-mana nisbah aspek atau bentuk - bulatan, hati, bintang, heksagon - dengan putaran dan pelurusan.
Penyusun Semula Imej
Ubah saiz imej untuk Instagram, Twitter, LinkedIn dan banyak lagi.
Penukar Format
Tukar imej antara JPEG, PNG, WebP dan banyak lagi.
Penjana Favicon
Hasilkan setiap saiz favicon + fail ICO + manifest web daripada mana-mana imej, teks atau emoji.