Pembuat Gambar Sprite

Klik untuk mengunggah gambar

Format yang didukung: PNG, JPG, WebP

Tata Letak

Jarak Gambar: 10px

050

Unggah gambar untuk pratinjau sprite

Gabungkan banyak ikon kecil menjadi lembar sprite CSS secara online. Diproses secara lokal di peramban tanpa perlu mengirim ke server, kode CSS dengan background-position dihasilkan otomatis untuk tata letak horizontal, vertikal, dan kisi.

Rekomendasi Terkait

Generator ICO

Kompres Gambar

Ubah Gambar

Ubah Ukuran Gambar

Potong Gambar

Putar dan Balik Gambar

Apa itu gambar sprite (CSS Sprite)?

Gambar sprite (CSS Sprite) adalah teknik menggabungkan banyak gambar kecil menjadi satu gambar besar, lalu menampilkan ikon individual lewat background-position. Istilah «sprite» berasal dari konsol game awal, ketika banyak frame animasi dikemas dalam satu gambar besar dan diganti dengan cepat. Frontend web meminjam ide ini untuk memuat banyak ikon kecil dalam satu permintaan.

**Mengapa sprite dibutuhkan?** Di era HTTP/1.1, setiap berkas gambar memicu satu permintaan HTTP dengan jabat tangan TCP, jabat tangan TLS, dan overhead header. 100 ikon = 100 permintaan. Sprite menaruh semua ikon dalam satu gambar dan menyelesaikan pemuatan dengan satu permintaan, sehingga render pertama jauh lebih cepat. Multiplexing HTTP/2 memang mengurangi sebagian keunggulan ini, tetapi sprite tetap bernilai untuk cache CDN, kompresi gzip, dan kompatibilitas HTTP/1.1.

**Prinsip dasar:** Bayangkan sprite 200×60 berisi tiga ikon 60×60 berjajar. Untuk menampilkan ikon pertama, atur pada elemen 60×60: `background: url(sprite.png); background-position: 0 0;`. Untuk ikon kedua gunakan -60px 0, dan -120px 0 untuk ikon ketiga. Alat kami secara otomatis menghasilkan koordinat-koordinat tersebut.

**Alternatif modern:** SVG + use/symbol (disarankan, vektor, warna dapat diubah, animasi), Icon Font (kompatibilitas luas, lintas platform), HTTP/2 Server Push, ikon web font. Tiap cara memiliki skenario tersendiri — pilih berdasarkan kebutuhan nyata proyek Anda.

Kasus penggunaan

Proyek web dengan banyak ikon kecil yang perlu digabung menjadi sprite untuk mengurangi permintaan HTTP dan mempercepat pemuatan pertama
Pengembang frontend ingin mengelola aset ikon proyek secara terpusat dan otomatis menghasilkan kode CSS background-position
Setelah aset ikon siap, hasilkan sprite + kode CSS sekaligus untuk diserahkan langsung ke tim integrator
Setelah digabung, jalankan gambar melalui [alat kompres](/image/compress/) untuk memperkecil total ukuran dan meningkatkan metrik LCP
Aplikasi, Electron, atau klien desktop yang mengemas aset ikon statis menjadi satu berkas dalam build
Template HTML email atau blog statis yang membutuhkan banyak ikon namun terkendala kompatibilitas klien email
Desainer menyerahkan ikon dalam bentuk sprite agar insinyur frontend dapat mengintegrasikannya dengan cepat
Sprite khusus resolusi 2x untuk layar Retina, disesuaikan ke layar 1x dan 2x melalui background-size

Cara Penggunaan

Klik area unggah atau tarik dan lepas banyak gambar (mendukung JPG / PNG / WebP / GIF, dll.)
Di daftar kiri, atur urutan ikon dengan gagang seret atau tombol atas/bawah
Pilih salah satu tata letak «Horizontal», «Vertikal», atau «Kisi» di area kiri
Atur jarak piksel antar ikon dengan slider (disarankan 1-5 px)
Pratinjau sprite secara langsung di sisi kanan, lalu klik «Unduh» untuk menyimpan PNG dan «Salin» untuk memasukkan kode CSS ke proyek

Fitur

Gabung banyak gambar satu klik: unggah beberapa ikon atau gambar kecil, otomatis menjadi satu sprite
Tiga mode tata letak: horizontal, vertikal, dan kisi dapat diganti bebas untuk berbagai skenario
Jarak dapat diatur: slider piksel 0-50 px mengendalikan jarak antar ikon secara fleksibel
Susun ulang dengan seret: tarik ikon di daftar untuk mengubah urutan penggabungan, koordinat CSS otomatis diperbarui
Susun ulang di ponsel: tombol atas/bawah untuk mengubah urutan, mudah dipakai di peramban mobile
Generasi CSS otomatis: background-position, lebar, dan tinggi untuk tiap sub-gambar dihasilkan lengkap
Pratinjau langsung: sprite dibangun ulang seketika saat gambar atau parameter berubah
Salin CSS satu klik: tombol salin bawaan memindahkan stylesheet lengkap ke papan klip
Unduh PNG satu klik: gambar hasil gabungan disimpan lokal dengan nama berkas sprite.png tetap
Pemrosesan di peramban lokal: penggabungan lewat Canvas API tanpa unggah ke server
Dukungan banyak format: JPG, PNG, WebP, GIF dan format gambar populer lainnya
Pertahankan latar transparan: output PNG menjaga kanal alfa ikon asli, cocok untuk penggabungan

Best Practices

Kompatibilitas Retina 2x: buat sprite dari sumber 2x

Jika pengguna target memakai layar Retina (Mac, iPhone, HiDPI Windows), gunakan sumber beresolusi 2x (misal ikon 32×32) untuk membuat sprite, lalu nyatakan background-size: 32px auto di CSS untuk memperkecil ke 16×16. Dengan satu kali pembuatan, layar 1x dan 2x tampil tajam dan kompatibel di semua perangkat.

Sprite tetap bernilai di proyek HTTP/2

Multiplexing HTTP/2 memang mengurangi masalah jumlah permintaan, tapi sprite masih unggul di empat skenario: pakai ulang cache CDN, rasio kompresi gzip/Brotli tinggi, tembus proxy intranet, dan kompatibilitas fallback HTTP/1.1. Jaringan perusahaan, sistem pemerintah dan perbankan, serta template HTML email masih banyak mengandalkan HTTP/1.1, tempat sprite tidak tergantikan.

Pemilihan PNG-8 vs PNG-24: ikon pakai PNG-8, gradasi pakai PNG-24

Alat selalu menghasilkan PNG, tetapi kedalaman bit sumber Anda yang memilih. Ikon datar atau satu warna sebaiknya disimpan dalam PNG-8 (transparan lossless, 60-80% lebih kecil dari PNG-24). Ikon dengan gradasi, bayangan, dan highlight butuh PNG-24. Alat menerima semua format, jadi optimalkan sumber dengan kompresor PNG sebelum digabung.

Strategi cache CDN: tambahkan hash pada nama berkas

Jangan biarkan sprite.png memakai nama statis setelah dibuat. Ganti namanya dengan hash konten (misal sprite.a3f2b1.png) dan atur Cache-Control: max-age=31536000 untuk cache permanen. Peramban mengunduh berkas satu kali, permintaan berikutnya dilayani dari cache lokal, menghemat lebih banyak lalu lintas dibanding hanya mengandalkan HTTP/2. Alat kami menghasilkan berkas dengan nama sprite.png, jadi ganti namanya secara manual setelah diunduh.

Kompresi gzip / Brotli membuat sprite lebih ringkas

Gambar yang digabung memiliki kontinuitas piksel yang lebih tinggi, sehingga gzip/Brotli mengompres jauh lebih efektif dibanding kumpulan gambar kecil yang tersebar. Nginx + gzip level 1 mengecilkan sprite 60-80%, Brotli lebih dari 85%. Saat Content-Encoding aktif, sprite 1 MB pada praktiknya terkirim hanya 200-300 KB, ini adalah keunggulan sprite yang paling kurang dihargai.

Kompatibilitas CSS Modules / Vue scoped: bungkus dengan :global()

Jika proyek memakai CSS Modules atau Vue scoped CSS, nama kelas .icon-home dan .sprite yang dihasilkan alat akan di-hash secara lokal dan tidak berfungsi. Bungkus kelas bersama dengan :global(.sprite) { ... } di .module.css dan panggil di luar blok scoped. Alternatifnya, tinggalkan CSS Modules dan kelola dengan konvensi penamaan BEM.

Gabungkan dengan Icon Font: ikon inti di font, ikon rumit di sprite

Pendekatan paling stabil di produksi adalah kombinasi keduanya. Ikon UI serba guna (pengaturan, tutup, cari, pengguna) buat dengan Icon Font (warna dapat diubah, vektor, lintas platform). Ikon warna yang rumit (logo produk, ikon banner operasional) simpan di sprite. Kekuatan keduanya saling melengkapi dan menghindari biaya pemeliharaan satu arah secara total.

Proyek rekayasa pakai spritesmith, prototipe pakai alat kami

Untuk proyek dengan pemeliharaan jangka panjang, integrasikan spritesmith (Webpack) atau gulp.spritesmith ke alur build: perubahan sumber memicu pembangunan ulang otomatis, hasilkan nama berkas dengan hash, dan variabel SCSS/LESS dibuat otomatis. Alat kami cocok untuk prototipe cepat dan pengiriman proyek kecil tanpa dependensi, sedangkan untuk pipeline CI/CD plugin build lebih sesuai.

Proyek modern dapat bermigrasi dari sprite ke SVG symbol

Jika proyek mendukung peramban modern (Chrome / Safari / Firefox / Edge lengkap, termasuk IE 11+), pertimbangkan migrasi dari sprite ke SVG symbol: satu berkas mengelola semua ikon, CSS mengatur warna dan animasi, tidak perlu merawat koordinat background-position. Sprite dari alat kami menjadi aset sekali pakai dan cocok sebagai solusi transisi sebelum migrasi.

Pertanyaan Umum

Apa itu gambar sprite dan mengapa menggabungkan banyak gambar menjadi satu?

Gambar sprite (CSS Sprite) adalah teknik menggabungkan banyak gambar kecil menjadi satu gambar besar dan menampilkan ikon individual lewat background-position. Setelah digabung, semua ikon dimuat dengan satu permintaan HTTP, sehingga jumlah permintaan berkurang drastis dan render pertama lebih cepat dibanding memuat puluhan berkas terpisah. Ini adalah teknik klasik optimasi frontend.

Bagaimana menggabungkan banyak ikon menjadi sprite secara online?

Unggah gambar dan alat akan otomatis menggabungkannya dalam tata letak yang Anda pilih dengan pratinjau langsung. Bersamaan itu, di sisi kanan otomatis dihasilkan kode CSS background-position (beserta lebar dan tinggi) untuk setiap sub-gambar, siap disalin ke stylesheet. Sprite yang dihasilkan berformat PNG dan dapat diunduh dengan satu klik.

Bagaimana cara menggunakan kode CSS yang dihasilkan?

Letakkan sprite.png yang diunduh di direktori proyek (misal /img/sprite.png) dan tempelkan CSS yang dihasilkan alat ke stylesheet. Tambahkan kelas .sprite dan kelas .icon-xxx yang sesuai pada elemen yang ingin menampilkan ikon, contoh: <i class="sprite icon-home"></i>. Nama kelas dihasilkan otomatis dari nama berkas asli.

Tata letak apa saja yang didukung?

Tiga mode didukung: horizontal (ikon dalam satu baris dari kiri ke kanan), vertikal (ikon dalam satu kolom dari atas ke bawah), dan kisi (ikon otomatis membentuk matriks persegi, jumlah kolom adalah akar kuadrat dibulatkan ke atas). Ganti mode di panel kiri untuk melihat pratinjau.

Bisakah mengatur jarak antar ikon?

Bisa. Di panel kiri tersedia slider jarak piksel 0-50 px, disarankan 1-5 px. Jarak yang sesuai mencegah interferensi piksel tepi saat penempatan CSS, tetapi tidak memengaruhi penggunaan akhir: jarak berada di dalam sprite, sementara saat CSS dipanggil hanya digunakan koordinat tepat dari background-position.

Bisakah mengubah urutan ikon?

Bisa. Tiap item di daftar kiri dapat diseret dengan gagang, dan di perangkat mobile tersedia tombol atas/bawah untuk mengubah urutan. Setelah diubah, sprite dibangun ulang dengan urutan baru dan koordinat CSS ikut diperbarui secara serempak.

Format gambar apa saja yang didukung?

Semua format umum seperti JPG, PNG, WebP, GIF dan lain-lain didukung sebagai input. Output selalu berformat PNG (dengan latar belakang transparan yang dipertahankan). Untuk ikon, input PNG disarankan: kanal transparan PNG tetap terjaga dengan baik setelah digabung ke dalam sprite.

Apakah sprite masih dibutuhkan di proyek modern?

Setelah HTTP/2 tersebar, multiplexing memang mengurangi sebagian keunggulan sprite, tetapi sprite tetap bernilai dari sisi cache CDN, kompresi gzip, dan pemuatan cepat ikon kritis di layar pertama. Jika jumlah ikon sedikit (kurang dari 10) atau butuh perubahan warna dan animasi, disarankan bermigrasi ke SVG symbol atau Icon Font. Untuk kumpulan besar ikon PNG statis, sprite tetap menjadi pilihan yang stabil dan tepercaya.

Apakah sprite menjadi buram di layar Retina? Bagaimana solusinya?

Bisa menjadi buram. Layar Retina (Mac, iPhone, HiDPI Windows) memiliki piksel fisik 2-3 kali lipat dari piksel CSS, sehingga sprite 1x biasa teregang ke 2x dan tepinya menjadi buram. Solusinya: buat sprite dari sumber beresolusi 2x (32×32, bukan 16×16) dan nyatakan background-size: 32px auto di CSS untuk memperkecil kembali ke 16×16.

Apakah penggabungan ikon menurunkan kualitas gambar?

Kualitas tidak menurun. Proses penggabungan hanya meletakkan gambar di posisi tertentu pada kanvas besar, tanpa resampling, kompresi, atau koreksi warna. Output PNG mempertahankan kualitas asli. Jika ingin memperkecil ukuran lebih lanjut, setelah mengunduh gunakan [alat kompres gambar](/image/compress/).

Apakah gambar sprite dikirim ke server? Apakah aman?

Tidak dikirim. Semua penggabungan dilakukan di peramban lokal Anda melalui Canvas API, berkas tidak diunggah ke server mana pun dan dihapus setelah diproses. Ikon internal yang sensitif dan desain logo yang belum dipublikasikan dapat diproses dengan tenang.

Bagaimana cara mengunduh sprite yang sudah dibuat?

Setelah gambar diunggah, alat otomatis membuat pratinjau. Klik tombol «Unduh» di sebelah kiri untuk menyimpan sprite.png secara lokal. Jika membutuhkan kode CSS, alat otomatis menghasilkan CSS lengkap, tombol «Salin» memindahkannya ke papan klip.

Bisakah mengatur sendiri nama kelas?

Pada versi saat ini, nama kelas dihasilkan otomatis oleh alat dari nama berkas asli dengan awalan .icon-. Contohnya home.png menjadi .icon-home. Gunakan huruf Latin, angka, dan tanda hubung pada nama berkas untuk mendapatkan nama kelas CSS yang lebih rapi.

Sprite, Icon Font, atau SVG Symbol — mana yang harus dipilih?

Tergantung skenario. Banyak ikon PNG statis atau butuh kompatibilitas IE lama, gunakan sprite. Ikon UI serba guna yang butuh perubahan warna dan lintas platform, gunakan Icon Font. Proyek modern dengan kebutuhan perubahan warna, animasi, dan manajemen satu berkas, SVG Symbol adalah pilihan pertama. Pada praktiknya keduanya sering dikombinasikan: ikon UI inti di Icon Font, ikon warna rumit di sprite.

Bisakah sprite yang digabung diperkecil lagi dengan [alat kompres](/image/compress/)?

Bisa. Alat kami menghasilkan PNG lossless sehingga berkas bisa berukuran besar. Alur yang disarankan: buat sprite di sini, lalu kecilkan ukuran PNG atau konversi ke JPG (jika tidak butuh transparansi) dengan [alat kompres](/image/compress/), dan bila perlu konversi ke WebP lewat [alat konversi](/image/convert/). Menggabungkan beberapa alat akan memaksimalkan performa pemuatan.

Glosarium

Gambar sprite (CSS Sprite): Teknik menggabungkan banyak gambar kecil menjadi satu gambar besar dan menampilkan ikon individual lewat background-position. Teknik optimasi performa klasik frontend web.
background-position: Properti CSS yang menetapkan koordinat awal gambar latar. Sprite menggunakan nilai negatif untuk menggeser latar ke kiri atau ke atas menuju posisi ikon yang diinginkan. Contoh: background-position: -60px 0 menampilkan ikon pada offset 60 px.
background-size: Properti CSS yang menetapkan ukuran tampilan gambar latar. Kunci untuk kompatibilitas Retina: setelah sprite dibuat dari sumber 2x, gunakan background-size: 32px auto di CSS untuk kembali ke ukuran 1x; layar 1x dan 2x tetap tajam.
Tata letak kisi (Grid Layout): Mode kisi pada alat secara otomatis menghitung jumlah kolom sebagai akar kuadrat dari jumlah ikon (dibulatkan ke atas) dan menata ikon berdasarkan baris ke dalam matriks persegi. Contoh: 9 ikon menjadi kisi 3×3.
Jarak ikon (Padding): Jarak piksel antara sub-gambar di dalam sprite. Disarankan 1-5 px untuk mencegah interferensi piksel tepi saat penempatan CSS. Jarak berada di dalam sprite, sementara saat pemanggilan CSS hanya koordinat tepat yang digunakan.
Kanal transparansi PNG: Format PNG mendukung kanal alfa sehingga latar belakang ikon dapat dibuat transparan. Sprite mempertahankan format PNG, sehingga ikon transparan tetap tampil baik setelah digabung.
Multiplexing HTTP/2: Protokol HTTP/2 memproses banyak permintaan secara paralel dalam satu koneksi, mengurangi sebagian keunggulan sprite. Namun HTTP/2 masih kalah dari gambar besar yang digabung dalam hal konfigurasi CDN, kompatibilitas peramban lama, dan tingkat kompresi gzip.
SVG Symbol: Elemen <symbol> pada SVG beserta referensi <use> menggabungkan semua ikon dalam satu berkas SVG, dan CSS mengatur fill, stroke, serta animasi. Pengganti pertama sprite pada proyek modern.
DPR (Rasio Piksel Perangkat): Device Pixel Ratio, rasio antara piksel fisik dan piksel CSS. Layar Retina memiliki DPR = 2, sehingga ikon 16×16 di CSS memerlukan 32×32 piksel fisik. DPR adalah parameter kunci untuk kompatibilitas sprite pada layar Retina.

Perbandingan tiga mode tata letak sprite

Mode tata letak	Aturan penempatan	Penggunaan umum
Horizontal	Ikon dalam satu baris dari kiri ke kanan	Navigasi, tombol Tab, bilah alat horizontal
Vertikal	Ikon dalam satu kolom dari atas ke bawah	Menu vertikal, awalan daftar, struktur atas-bawah
Kisi	Otomatis membentuk matriks persegi sesuai jumlah ikon	Serba guna, pilihan terbaik saat jumlah belum pasti

Nilai Padding yang disarankan untuk sprite

Jarak (px)	Skenario	Saran
`0px`	Tepi ikon bersih, punya padding transparan sendiri	Sepadat mungkin, bisa terjadi interferensi piksel tepi
`1-2px`	Ikon berkualitas tinggi, margin keamanan minimum	Nilai yang disarankan, keseimbangan kerapatan dan stabilitas
`3-5px`	Ikon biasa berbayang atau bertepi	Jarak aman, pilihan umum
`6-10px`	Ikon dengan perbedaan ukuran besar, bertepi	Ikon besar tidak menutupi ikon kecil
`10-50px`	Debugging, pengelompokan visual	Hanya untuk pratinjau, bukan untuk produksi

Parameter kompatibilitas sprite 2x untuk layar Retina

DPR layar	Ukuran CSS	Ukuran sumber	background-size
`1x`	`16×16`	`16×16`	`auto`
`2x`	`16×16`	`32×32`	`32px auto`
`3x`	`16×16`	`48×48`	`48px auto`
`2x`	`24×24`	`48×48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Menerapkan sprite gambar di CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> dan <use>
ReferenceWeb.dev - Mengganti gambar dengan sprite CSS
ReferenceWikipedia - Sprite (grafika komputer)