What does the Image Compare Slider do?

Place two images side-by-side and drag a vertical handle left or right to reveal more of the 'before' or 'after' image. Useful for visualizing the result of image compression, resizing, color correction, or AI super-resolution.

Are my images uploaded anywhere?

No. Both images stay in your browser via object URLs created with URL.createObjectURL(). Nothing is sent to a server.

What image formats are supported?

Anything the browser can render — PNG, JPEG, GIF, WebP, SVG, AVIF (in modern browsers). Both images don't need to be the same format, but they should ideally have the same dimensions for the most useful comparison.

Slider Perbandingan Gambar

Beforechoose file…Afterchoose file…

Upload a 'before' and 'after' image to start comparing.

Detail teknis

Cara Kerja Slider Perbandingan Gambar

Apa yang Dilakukan Alat Ini

Slider Perbandingan Gambar menumpuk dua gambar dan hanya menampilkan bagian yang ingin Anda lihat dengan menyeret pegangan vertikal. Saat Anda menggeser ke kiri dan ke kanan, lebih banyak gambar 'sebelum' atau 'sesudah' akan terlihat, sehingga perbedaan visual berdampingan langsung tampak jelas. Ukuran file dan persentase perubahan ditampilkan agar Anda juga dapat melihat dampaknya hingga tingkat byte.

Kasus Penggunaan Umum untuk Developer

Engineer yang memverifikasi kompresi gambar lossy membandingkan versi JPEG vs. WebP dari sumber yang sama. Desainer meninjau perubahan tone-mapping, retouching, atau color-correction antara draf dan versi final. Engineer ML/AI memvisualisasikan hasil super-resolution, denoise, atau style-transfer dibandingkan dengan inputnya. Tim pemasaran membuat demo sebelum/sesudah yang dramatis untuk landing page.

Format Data, Tipe, atau Varian

Menerima format gambar apa pun yang dapat dirender browser — PNG, JPEG, WebP, AVIF, GIF, SVG. Gambar tetap berada di browser Anda melalui object URL (URL.createObjectURL), jadi tidak ada yang diunggah. Untuk perbandingan yang paling berguna, kedua gambar sebaiknya memiliki dimensi dan rasio aspek yang sama; jika berbeda, keduanya dirender dengan object-fit: contain sehingga tidak ada yang terpotong.

Kesalahan Umum dan Kasus Tepi

Membandingkan gambar dengan rasio aspek yang berbeda menghasilkan bilah letterbox di salah satu sisi. Gambar yang sangat besar (>50 MB) dapat memperlambat interaksi geser di browser lama. Slider menampilkan seluruh gambar 'sesudah' — jika kedua file memiliki transparansi, posisikan slider di atas area yang opak atau Anda akan melihat latar belakang halaman tembus melalui kedua panel.

Kapan Menggunakan Alat Ini vs Kode

Gunakan alat browser untuk perbandingan ad-hoc selama pengembangan atau untuk demo cepat kepada pemangku kepentingan. Pada situs web produksi, integrasikan library khusus seperti react-compare-slider atau img-comparison-slider untuk aksesibilitas, lazy loading, dan dukungan SSR; untuk pemeriksaan kualitas otomatis secara batch pada ratusan gambar, gunakan alat berbasis SSIM/PSNR seperti ImageMagick `compare` atau pixelmatch.