Generator Sprite Sheet

Gabungkan beberapa gambar menjadi satu sprite sheet dan hasilkan kode CSS.

Membagikan:

Seret & Letakkan Gambar di sini

atau klik untuk mengunggah beberapa file

Mengapa Menggunakan Alat Ini?

Utilitas Efisiensi Tinggi untuk Optimasi Frontend

Reduce HTTP requests and speed up loading.

Generasi Koordinat Otomatis

Kami menghitung matematikanya. Dapatkan koordinat X dan Y yang tepat untuk setiap gambar individual secara instan.

Algoritma Pengemasan Grid Cerdas

Mesin kami mengatur gambar berbagai ukuran menjadi grid paling efisien, meminimalkan ruang kosong.

Kelas CSS Siap Pakai

Menghasilkan blok CSS bersih dengan kelas individual untuk setiap aset, termasuk properti background-position dan dimensi.

Mode Tata Letak Kustom

Pilih antara strip Vertikal, Horizontal, atau mode 'Grid' paling efisien.

Kontrol Padding dan Spacing

Tambahkan jarak kustom antar sprite untuk mencegah 'pixel bleeding'.

Pemrosesan Memori Lokal

Aset UI Anda adalah milik Anda. Semua pengemasan dan generasi kode terjadi di browser Anda.

Panduan Penggunaan Generator

Create sprites in minimal steps.

Kumpulkan Aset Kecil

Kumpulkan semua ikon, tombol, atau frame animasi yang ingin Anda gabungkan. Pastikan format berkualitas tinggi seperti PNG.

Unggah Batch ke Alat

Pilih semua file sekaligus dan unggah. Alat langsung membuat pratinjau visual pengemasan.

Konfigurasi Optimasi

Sesuaikan 'Padding' jika khawatir tentang tepi retina, atau pilih tata letak 'Vertikal'.

Tinjau Pratinjau Sprite

Periksa sheet yang dihasilkan. Pastikan setiap item terlihat dan grid efisien.

Unduh Gambar Atlas

Klik 'Unduh Sprite Sheet' untuk menyimpan file gambar yang digabungkan.

FAQ Pembuatan Sprite Sheet

Apakah sprite sheet masih relevan dengan HTTP/2?

Ya! Meskipun HTTP/2 menangani banyak permintaan lebih baik, sprite sheet tetap lebih cepat karena mengurangi total metadata dan overhead kompresi.

Bagaimana jika gambar saya berukuran berbeda?

Algoritma grid cerdas kami dirancang untuk ini! Ia mengatur gambar berbagai ukuran menjadi persegi panjang paling kompak.

Haruskah menggunakan JPG atau PNG?

Kami sangat merekomendasikan PNG. PNG menangani tepi tajam ikon lebih baik dan mendukung transparansi.

Apakah ada batasan jumlah gambar?

Secara teknis tidak. Namun, kami merekomendasikan 50-100 gambar per sheet agar ukuran file tetap terkendali.

Apa itu 'Pixel Bleeding'?

Ini terjadi ketika rendering sub-piksel menunjukkan sepotong gambar berikutnya. Tambahkan 1-2 piksel 'Padding' untuk mencegahnya.

Apakah alat ini mendukung SVG?

Alat ini untuk sprite raster (PNG/JPG). Untuk SVG, gunakan pendekatan 'SVG Sprite' yang berbeda.

Bagaimana memperbarui sprite sheet nanti?

Cukup unggah ulang ikon asli plus yang baru. Alat kami memberikan sheet dan CSS baru dalam hitungan detik.

Apakah gratis untuk pengembang game?

Ya! Generator kami 100% gratis tanpa batasan komersial.

Bisakah browser meng-cache sprite sheet?

Ya! Ini salah satu manfaat terbesar. Browser hanya perlu meng-cache satu file untuk semua ikon di situs.

Apakah data ikon saya aman?

Tentu saja. File diproses secara lokal di browser Anda, desain Anda tidak pernah diunggah ke sistem kami.