Global ToolBox

Alat Pembanding Gambar

Bandingkan dua gambar piksel demi piksel dan langsung lihat apa yang berubah, dengan gambar perbedaan yang disorot dan ringkasan persentase — semuanya diproses secara lokal di browser Anda.

🔒 Diproses secara lokal di browser Anda

Loading…

Cara menggunakan

  1. Seret dan lepas (atau klik untuk memilih) gambar asli Anda ke area "Sebelum".
  2. Seret dan lepas (atau klik untuk memilih) gambar yang ingin Anda bandingkan ke area "Sesudah".
  3. Klik "Bandingkan Gambar" — kedua gambar dibandingkan piksel demi piksel sepenuhnya di browser Anda.
  4. Tinjau gambar perbedaan yang disorot dan persentase piksel yang berbeda, lalu unduh gambar perbedaan jika diperlukan.

Fitur

  • Perbandingan tingkat piksel menggunakan pustaka open-source pixelmatch
  • Menyorot setiap piksel yang berbeda dengan latar belakang yang diredupkan agar perubahan mudah dikenali
  • Menampilkan jumlah dan persentase piksel yang berbeda secara akurat
  • Menandai dengan jelas gambar berdimensi tidak cocok alih-alih membandingkannya secara salah
  • 100% berjalan di sisi klien — gambar Anda tidak pernah diunggah ke server

Pertanyaan yang sering diajukan

Untuk apa alat ini berguna?

Alat ini sangat berguna untuk pengujian regresi visual (memastikan UI tidak berubah secara tak terduga antar build), membandingkan dua versi desain atau tangkapan layar, mendeteksi perubahan halus pada foto, atau memverifikasi bahwa gambar telah dikompresi ulang tanpa penurunan kualitas yang terlihat.

Mengapa kedua gambar saya harus memiliki dimensi yang sama?

Perbandingan bekerja piksel demi piksel, mencocokkan setiap piksel pada gambar pertama dengan piksel di posisi yang sama pada gambar kedua. Jika gambar memiliki ukuran berbeda, tidak ada pemetaan 1:1 yang bermakna, sehingga alat ini menampilkan pesan error yang jelas alih-alih membandingkan data yang tidak cocok.

Bagaimana gambar perbedaan dihasilkan?

Alat ini menggunakan pixelmatch, pustaka open-source untuk perbandingan piksel. Area yang cocok akan diredupkan, dan piksel yang berbeda melampaui ambang batas kecil yang memperhitungkan anti-aliasing akan disorot dengan warna terang agar langsung terlihat.

Apakah gambar saya diunggah ke suatu tempat?

Tidak. Kedua gambar dimuat dan dibandingkan sepenuhnya di dalam browser Anda menggunakan Canvas API. Tidak ada data yang dikirim ke server.

Mengapa dua gambar yang tampak identik secara visual masih bisa menunjukkan beberapa piksel yang berbeda?

Perbedaan kecil dalam kompresi, profil warna, atau pengodean ulang dapat sedikit mengubah nilai piksel tertentu meskipun gambar terlihat identik oleh mata. Persentase piksel berbeda yang sangat kecil biasanya menunjukkan jenis noise ini, bukan perubahan visual yang nyata.

Alat terkait