Lembar Sprite Gambar Gabungkan beberapa gambar menjadi satu lembar sprite dengan kolom dan spasi yang dapat dikonfigurasi.

🖼️

Lembar Sprite Gambar

Gabungkan beberapa gambar menjadi satu lembar sprite dengan kolom dan spasi yang dapat dikonfigurasi.

Unggah Gambar

Tarik dan lepaskan atau pilih beberapa gambar (ikon, bingkai) untuk lembar sprite.

Konfigurasikan Tata Letak

Tentukan jumlah kolom dan jarak antara sprite.

Buat & Unduh

Buat gambar lembar sprite dan salin koordinat CSS.

Loading tool...

What Is Lembar Sprite Gambar?

Sebuah generator sheet sprite yang menggabungkan beberapa gambar menjadi satu gambar komposit yang disusun dalam grid, bersama dengan koordinat CSS background-position untuk setiap sprite. Penting untuk optimasi kinerja web, animasi sprite game, dan set ikon. Unggah gambar individual Anda, atur jumlah kolom dan padding, dan tool akan menghasilkan komposit PNG dan potongan kode CSS.

Why Use Lembar Sprite Gambar?

Menghasilkan gambar lembar sprite + koordinat CSS
Kolom dan jarak yang dapat dikonfigurasikan
Mengurangi permintaan HTTP untuk kinerja web yang lebih baik
Ideal untuk set ikon dan sprite game

Common Use Cases

Kinerja Web

Gabungkan ikon menjadi satu lembar sprite untuk mengurangi permintaan HTTP.

Pengembangan Game

Buat lembar sprite animasi dari gambar bingkai individual.

Set Ikon

Paket beberapa ikon menjadi satu gambar sprite yang efisien.

CSS Sprites

Buat lembar sprite yang dioptimalkan dengan kode CSS siap pakai.

Technical Guide

Gambar dimuat dan disusun dalam grid dengan konfigurasi kolom yang dapat diatur. Jumlah baris dihitung sebagai ceil(jumlah gambar/kolom). Dimensi kanvas dihitung dari lebar maksimum per kolom dan tinggi total baris plus padding. Setiap gambar digambar pada posisi grid yang dihitung. Koordinat CSS dihasilkan sebagai nilai background-position negatif untuk setiap sprite.

Tips & Best Practices

1
Gunakan ukuran gambar yang konsisten untuk grid yang rapi
2
Jaga jarak pada 1-2px untuk meminimalkan ruang yang terbuang
3
Berikan nama file yang deskriptif untuk nama kelas CSS yang lebih baik
4
Gunakan pangkat 2 untuk kompatibilitas mesin game

Related Tools

Pengubah Ukuran Gambar

Ubah ukuran gambar dengan dimensi piksel yang tepat atau persentase sambil menjaga rasio aspek.

🖼️ Image Tools

Pembuat Favicon

Buat favicon dalam berbagai ukuran (16x16, 32x32, 48x48 dan lain-lain) dari gambar apa pun.

🖼️ Image Tools

Kolase Gambar

Gabungkan beberapa gambar menjadi satu kolase dengan tata letak dan spasi yang dapat disesuaikan.

🖼️ Image Tools

Pembuat Grid Gambar

Bagi sebuah gambar menjadi grid ubin berukuran sama untuk postingan Instagram dan teka-teki.

🖼️ Image Tools

Frequently Asked Questions

Q Ukuran gambar apa yang paling efektif?

Ukuran yang konsisten menghasilkan sprite yang paling rapi, tetapi ukuran campuran juga didukung.

Q Apakah itu menghasilkan CSS?

Ya - CSS lengkap dengan nilai background-position untuk setiap sprite.

Q Berapa banyak gambar yang dapat saya gabungkan?

Sejumlah gambar dapat digabungkan menjadi satu lembar sprite.

Q Bagaimana dengan tampilan retina?

Gunakan gambar resolusi 2x dan kurangi ukuran latar belakang CSS untuk mendukung tampilan retina.

Q Dapatkah saya menggunakannya untuk sprite game?

Tentu - atur bingkai animasi secara berurutan untuk lembar sprite game.

About This Tool

Lembar Sprite Gambar is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.