Creation
Generator Lembar Sprite
Gabungkan beberapa gambar menjadi lembar sprite dengan output CSS, JSON, dan SCSS untuk pengembang.
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 Generator Lembar 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="Generator Lembar Sprite by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix Generator Lembar 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 Generator Lembar Sprite
Last updated: May 2026
OptiPix Sprite Sheet Generator menggabungkan beberapa gambar menjadi satu sprite sheet yang dioptimalkan, dengan CSS siap pakai, koordinat JSON, dan variabel SCSS. Pilih tata letak: strip horizontal, strip vertikal, grid (jumlah kolom kustom), atau packed (dikemas dalam bin untuk meminimalkan ruang terbuang). Atur padding antar sprite untuk mencegah kebocoran tepi. Hasilnya adalah satu sprite sheet PNG ditambah CSS yang dihasilkan untuk setiap sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), peta koordinat JSON, dan variabel SCSS. Penskalaan Retina @1x dan @2x didukung. Setiap sprite diberi nama sesuai nama file sumbernya. Semuanya berjalan secara lokal - gambar Anda tidak pernah meninggalkan perangkat Anda. Dibuat untuk pengembang game, pengembang web yang menggunakan CSS sprite, dan siapa pun yang ingin menggabungkan ikon kecil menjadi satu permintaan jaringan.
How It Works
Setiap gambar masukan dimuat ke dalam memori; algoritma tata letak yang dipilih (strip, grid, atau shelf bin-pack) menghitung koordinat per-sprite (x, y, w, h); sprite sheet dirender ke kanvas; CSS / JSON / SCSS dihasilkan dari peta koordinat yang sama.
Use Cases
- •Gabungkan ikon UI menjadi satu sprite sheet PNG + CSS
- •Buat atlas sprite untuk game 2D di Phaser atau Pixi
- •Gabungkan ikon media sosial menjadi satu sprite CSS untuk situs yang lebih cepat
- •Kemasi frame animasi karakter ke dalam strip horizontal
- •Buat sprite sheet @2x siap Retina dari gambar sumber
You Might Also Like
If you find Generator Lembar 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
Tata letak mana yang harus saya gunakan?
Apa itu bin-packing?
Bisakah saya mengekspor CSS / JSON / SCSS?
Mengapa menggunakan sprite sheet?
Apakah gambar saya diunggah?
Related Tools
Potong Gambar
Potong ke rasio aspek atau bentuk apa pun - lingkaran, hati, bintang, heksagon - dengan putar dan luruskan.
Pengubah Ukuran Gambar
Ubah ukuran gambar untuk Instagram, Twitter, LinkedIn, dan lainnya.
Konverter Format
Konversi gambar antara JPEG, PNG, WebP, dan lainnya.
Generator Favicon
Hasilkan setiap ukuran favicon + file ICO + manifes web dari gambar, teks, atau emoji apa pun.