Kompresor Sprite Gambar

• Kompresi sprite gambar instan di browser: kompres lembar sprite CSS secara instan di browser Anda menggunakan kuantisasi palet warna median-cut: tanpa unggah ke server, tanpa pemrosesan cloud, dan tanpa menunggu. Kompresor sprite gambar memproses PNG Anda sepenuhnya di perangkat Anda dalam hitungan detik.
• Kompresor sprite gambar online yang aman: lembar sprite Anda tidak pernah meninggalkan perangkat. Kompresor sprite gambar berjalan sepenuhnya di browser Anda: tanpa unggah ke server, tanpa transmisi data, dan 100% privat. Aman untuk aset UI milik sendiri, kumpulan ikon, dan lembar sprite produksi.
• 5 pilihan ukuran palet untuk kontrol yang presisi: kompresor sprite gambar menawarkan lima ukuran palet dari 16 hingga 256 warna, untuk memilih keseimbangan yang tepat antara ukuran file dan kualitas visual. Lembar sprite CSS dengan ikon datar biasanya tampak identik pada 64–128 warna dengan pengurangan ukuran 30–60%.
• Kompresor sprite gambar online tanpa instalasi: kompres lembar sprite CSS langsung di browser Anda, tanpa unduhan perangkat lunak, tanpa plugin, dan tanpa akun. Berfungsi di browser modern apa pun pada Windows, macOS, dan Linux.

• Optimasi performa situs web lama: kompres lembar sprite CSS yang digunakan di situs web lama untuk mengurangi ukuran payload permintaan HTTP. Kompresor sprite gambar mengurangi ukuran file PNG sprite sebesar 30–60% dengan kuantisasi palet, sehingga meningkatkan waktu muat halaman tanpa mengubah tata letak sprite atau nilai CSS background-position.
• Optimasi sprite tema WordPress: kompres lembar sprite yang digunakan di tema dan plugin WordPress untuk meningkatkan skor PageSpeed Insights. Kompresor sprite gambar berfungsi pada sprite PNG apa pun: unggah sprite, pilih ukuran palet, dan ganti file asli di folder aset tema Anda.
• Kompresi sprite ikon tema Shopify: kurangi ukuran lembar sprite ikon yang digunakan di tema Shopify untuk meningkatkan kecepatan muat toko. Kompresor sprite gambar ideal untuk sprite ikon warna datar: 64 warna biasanya menghasilkan keluaran yang secara visual identik dengan file 40–50% lebih kecil.
• Optimasi aset pustaka komponen UI: kompres lembar sprite ikon yang digunakan di pustaka komponen dan design system sebelum diterbitkan ke npm. Kompresor sprite gambar mengurangi ukuran unduhan aset gambar paket Anda tanpa memerlukan pipeline pemrosesan gambar saat build.
• Kompresi lembar sprite untuk game: kompres lembar sprite untuk game berbasis browser dan aplikasi interaktif untuk mengurangi waktu muat awal. Kompresor sprite gambar mempertahankan transparansi dan dimensi gambar: sprite terkompresi berfungsi sebagai pengganti langsung untuk yang asli.
• Migrasi penyiapan sprite lama: kompres lembar sprite CSS yang ada sebagai bagian dari audit performa sebelum bermigrasi ke ikon SVG atau font ikon. Kompresor sprite gambar membantu Anda mengukur penghematan ukuran yang dapat dicapai dengan pendekatan sprite saat ini dibandingkan upaya migrasi penuh.

Lembar sprite CSS adalah satu gambar PNG yang berisi beberapa gambar lebih kecil (ikon, tombol, elemen UI) yang disusun dalam kisi. Aturan CSS background-position menampilkan sprite individual dengan menggeser gambar latar. Lembar sprite mengurangi permintaan HTTP, tetapi bisa menjadi file PNG berukuran besar. Kompresor sprite gambar kami memperkecil ukuran lembar sprite menggunakan kuantisasi palet warna median-cut: algoritma yang mengurangi jumlah warna unik pada gambar dari jutaan menjadi palet tetap (16–256 warna), lalu mengodekan ulang PNG. Ini adalah teknik yang sama yang digunakan alat seperti pngquant dan ImageOptim, diimplementasikan sepenuhnya di browser Anda menggunakan Canvas API.

1. 1. Unggah lembar sprite Anda: seret dan jatuhkan lembar sprite PNG Anda ke zona unggah atau klik untuk menelusuri. Gambar dimuat ke Canvas API browser: tidak ada data yang dikirim ke server mana pun. Format PNG, GIF, BMP, dan WebP didukung.
2. 2. Pilih ukuran palet dan klik "Kompres Sprite": kompresor mengambil sampel piksel dari gambar, membangun palet warna optimal dengan kuantisasi median-cut, memetakan setiap piksel ke warna palet terdekat, dan mengodekan ulang hasilnya sebagai PNG. Pemrosesan berjalan sepenuhnya di browser Anda.
3. 3. Unduh sprite yang dikompres: PNG terkompresi diunduh secara otomatis. Panel hasil menampilkan ukuran asli, ukuran terkompresi, dan persentase pengurangan. Gunakan "Unduh lagi" jika perlu. Ganti file sprite asli di proyek Anda: tidak ada perubahan CSS yang diperlukan.

• Palet warna: jumlah warna unik dikurangi dari jutaan (PNG 24-bit) menjadi ukuran palet yang dipilih (16–256 warna). Setiap piksel dipetakan ke warna palet terdekat menggunakan jarak Euclidean di ruang RGB.
• Pengodean PNG: PNG yang dikodekan ulang menggunakan mode warna terindeks (berbasis palet) alih-alih warna sebenarnya, yang jauh lebih baik dikompres dengan DEFLATE: algoritma kompresi yang digunakan di dalam file PNG.
• Transparansi dipertahankan: nilai kanal alfa dipertahankan selama kuantisasi: piksel transparan dan semitransparan pada sprite asli tetap dipertahankan pada keluaran terkompresi.
• Dimensi tidak berubah: lebar dan tinggi gambar identik dengan aslinya: sprite terkompresi adalah pengganti langsung yang berfungsi dengan aturan CSS background-position yang ada tanpa perubahan apa pun.

Untuk sprite ikon warna datar (ikon UI, ikon navigasi, ikon media sosial), 64 warna biasanya menghasilkan keluaran yang secara visual identik dengan file 40–50% lebih kecil. Untuk sprite dengan gradien atau berbasis foto, gunakan 128 atau 256 warna untuk menghindari pita warna yang terlihat. Jika Anda melihat artefak warna pada keluaran terkompresi, tingkatkan ukuran palet. Kompresor sprite gambar menampilkan penghematan byte yang persis untuk setiap ukuran palet, sehingga Anda dapat menemukan pengaturan optimal untuk lembar sprite spesifik Anda.