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.

Gelangsar Perbandingan Imej

Beforechoose file…Afterchoose file…

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

Butiran teknikal

Cara Slider Perbandingan Imej Berfungsi

Apa yang Alat Ini Lakukan

Slider Perbandingan Imej menindih dua imej dan hanya mendedahkan bahagian yang anda mahu lihat dengan menyeret pemegang menegak. Apabila anda meluncur ke kiri dan kanan, lebih banyak imej 'sebelum' atau 'selepas' akan didedahkan, menjadikan perbezaan visual sebelah-menyebelah serta-merta jelas. Saiz fail dan peratus perubahan dipaparkan supaya anda juga boleh melihat impak pada peringkat bait.

Kes Penggunaan Pembangun yang Lazim

Jurutera yang mengesahkan pemampatan imej lossy membandingkan versi JPEG vs. WebP daripada sumber yang sama. Pereka bentuk menyemak perubahan pemetaan tona, retouching, atau pembetulan warna antara draf dan versi akhir. Jurutera ML/AI memvisualkan hasil super-resolution, nyahhingar, atau pemindahan gaya berbanding input mereka. Pasukan pemasaran menghasilkan demo sebelum/selepas yang dramatik untuk halaman pendaratan.

Format Data, Jenis, atau Varian

Menerima sebarang format imej yang boleh dipaparkan oleh pelayar — PNG, JPEG, WebP, AVIF, GIF, SVG. Imej kekal dalam pelayar anda melalui object URL (URL.createObjectURL), jadi tiada apa yang dimuat naik. Untuk perbandingan yang paling berguna, kedua-dua imej sepatutnya mempunyai dimensi dan nisbah aspek yang sepadan; jika berbeza, kedua-duanya dipaparkan dengan object-fit: contain supaya tiada yang dipotong.

Perangkap Lazim dan Kes Tepi

Membandingkan imej dengan nisbah aspek berbeza menghasilkan bar letterbox pada satu sisi. Imej yang sangat besar (>50 MB) mungkin memperlahankan interaksi seret dalam pelayar lama. Peluncur mendedahkan keseluruhan imej 'selepas' — jika kedua-dua fail mempunyai ketelusan, letakkan peluncur di atas kawasan legap atau anda akan melihat latar belakang halaman tembus melalui kedua-dua panel.

Bila Perlu Menggunakan Alat Ini Berbanding Kod

Gunakan alat pelayar untuk perbandingan ad-hoc semasa pembangunan atau untuk demo pantas kepada pihak berkepentingan. Dalam laman web produksi, integrasikan pustaka khusus seperti react-compare-slider atau img-comparison-slider untuk kebolehcapaian, pemuatan malas, dan sokongan SSR; untuk semakan kualiti automatik secara kelompok merentasi ratusan imej, gunakan alat berasaskan SSIM/PSNR seperti ImageMagick `compare` atau pixelmatch.