Apakah gambar saya diunggah ke server?

Tidak. Segalanya berjalan di browser Anda menggunakan API Canvas. File Anda tidak pernah meninggalkan perangkat Anda.

Berapa banyak gambar yang bisa saya tambahkan ke satu sheet sprite?

Tidak ada batas keras — alat ini mengemas sebanyak gambar yang diizinkan oleh memori browser Anda. Untuk kinerja terbaik, pertahankan ukuran sprite individual secara wajar.

Apa yang dilakukan pengaturan lebar baris maksimum?

Ini membatasi seberapa lebar setiap baris sprite dapat tumbuh sebelum packer memulai baris baru. Nilai yang lebih besar menghasilkan sheet yang lebih lebar; nilai yang lebih kecil menghasilkan sheet yang lebih tinggi dan sempit.

Apakah saya bisa menggunakan CSS yang dihasilkan langsung di proyek saya?

Ya. Setiap kelas sprite mencakup URL background-image (yang mengarah ke PNG yang Anda unduh), background-position, lebar, dan tinggi — tempelkan ke stylesheet apa pun dan terapkan kelas tersebut ke elemen HTML Anda.

Format gambar apa yang bisa saya gunakan sebagai sprite input?

Format apa pun yang dapat didekodekan browser Anda — PNG, JPEG, WebP, GIF, SVG, AVIF, dan lainnya. Sheet sprite output selalu merupakan satu PNG untuk kompatibilitas maksimal.

Apakah alat ini mengunggah data saya?

Tidak. Semuanya berjalan langsung di browser Anda, jadi data Anda tidak pernah meninggalkan perangkat — bahkan tetap bisa dipakai offline setelah halaman dimuat.

🗂️ Pembuat Sprite Sheet

Kemas beberapa gambar menjadi satu sheet sprite PNG yang dioptimalkan dan dapatkan aturan CSS background-position yang siap pakai — gratis, di browser, tanpa perlu mengunggah.

🗂️

Jatuhkan gambar di sini, atau klik untuk memilih beberapa gambar

Dikemas menjadi satu PNG + CSS — di browser Anda, tanpa unggah

Privat sejak awal. Alat ini berjalan sepenuhnya di browser Anda — tidak ada yang Anda masukkan diunggah atau disimpan, dan bisa dipakai offline.

Tentang

Alat ini menggunakan API Canvas browser untuk menata ulang gambar Anda menjadi sheet sprite PNG yang kompak sepenuhnya di perangkat Anda — tidak ada yang diunggah ke server apa pun. Jatuhkan sebanyak gambar yang Anda butuhkan, atur lebar baris maksimum dan padding per sprite, dan packer mengatur mereka baris demi baris untuk meminimalkan ruang yang terbuang. Setelah dihasilkan, Anda dapat mengunduh PNG yang digabungkan dan menyalin potongan CSS, yang berisi kelas per sprite dengan nilai background-image, background-position, lebar, dan tinggi yang benar siap untuk menempelkan ke dalam stylesheet Anda. Karena segalanya berjalan secara lokal di browser Anda, prosesnya instan dan sepenuhnya pribadi.

Cara pakai

Jatuhkan gambar Anda ke area unggah, atau klik untuk menjelajah dan memilih beberapa file sekaligus.
Atur lebar baris maksimum (dalam piksel) dan padding di sekitar setiap sprite untuk mengontrol seberapa rapat mereka dikemas.
Klik Generate Sprite Sheet untuk mengemas semua gambar menjadi satu PNG yang digabungkan, dipreview secara instan di canvas.
Salin CSS yang dihasilkan — setiap sprite mendapatkan kelasnya sendiri dengan nilai background-position, lebar, dan tinggi yang benar.
Unduh sheet sprite PNG dan tempelkan CSS ke stylesheet proyek Anda — selesai.

FAQ

Apakah gambar saya diunggah ke server?: Tidak. Segalanya berjalan di browser Anda menggunakan API Canvas. File Anda tidak pernah meninggalkan perangkat Anda.
Berapa banyak gambar yang bisa saya tambahkan ke satu sheet sprite?: Tidak ada batas keras — alat ini mengemas sebanyak gambar yang diizinkan oleh memori browser Anda. Untuk kinerja terbaik, pertahankan ukuran sprite individual secara wajar.
Apa yang dilakukan pengaturan lebar baris maksimum?: Ini membatasi seberapa lebar setiap baris sprite dapat tumbuh sebelum packer memulai baris baru. Nilai yang lebih besar menghasilkan sheet yang lebih lebar; nilai yang lebih kecil menghasilkan sheet yang lebih tinggi dan sempit.
Apakah saya bisa menggunakan CSS yang dihasilkan langsung di proyek saya?: Ya. Setiap kelas sprite mencakup URL background-image (yang mengarah ke PNG yang Anda unduh), background-position, lebar, dan tinggi — tempelkan ke stylesheet apa pun dan terapkan kelas tersebut ke elemen HTML Anda.
Format gambar apa yang bisa saya gunakan sebagai sprite input?: Format apa pun yang dapat didekodekan browser Anda — PNG, JPEG, WebP, GIF, SVG, AVIF, dan lainnya. Sheet sprite output selalu merupakan satu PNG untuk kompatibilitas maksimal.
Apakah alat ini mengunggah data saya?: Tidak. Semuanya berjalan langsung di browser Anda, jadi data Anda tidak pernah meninggalkan perangkat — bahkan tetap bisa dipakai offline setelah halaman dimuat.