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.

Klizač za poređenje slika

Beforechoose file…Afterchoose file…

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

Tehnički detalji

Kako funkcioniše klizač za poređenje slika

Šta alat radi

Klizač za poređenje slika preklapa dve slike i otkriva samo deo koji želite da vidite prevlačenjem vertikalne ručice. Kako klizite levo i desno, otkriva se više „pre“ ili „posle“ slike, pa su vizuelne razlike jedna pored druge odmah očigledne. Prikazuju se i veličine fajlova i procentualna promena, tako da možete da vidite i uticaj na nivou bajtova.

Uobičajeni slučajevi upotrebe za programere

Inženjeri koji proveravaju kompresiju slika sa gubicima porede JPEG i WebP verziju istog izvora. Dizajneri pregledaju promene u mapiranju tonova, retuširanju ili korekciji boja između nacrta i finalne verzije. ML/AI inženjeri vizualizuju rezultate super-rezolucije, uklanjanja šuma ili prenosa stila u odnosu na ulazne podatke. Marketinški timovi prave upečatljive „pre/posle“ demonstracije za odredišne stranice.

Formati podataka, tipovi ili varijante

Prihvata bilo koji format slike koji pregledač može da prikaže — PNG, JPEG, WebP, AVIF, GIF, SVG. Slike ostaju u vašem pregledaču putem object URL-ova (URL.createObjectURL), tako da se ništa ne otprema. Za najkorisnije poređenje, dve slike treba da imaju iste dimenzije i odnos stranica; ako se razlikuju, obe se prikazuju sa object-fit: contain kako nijedna ne bi bila odsečena.

Uobičajene greške i rubni slučajevi

Poređenje slika različitih odnosa stranica stvara letterbox trake sa jedne strane. Veoma velike slike (>50 MB) mogu usporiti prevlačenje u starijim pregledačima. Klizač otkriva celu „posle“ sliku — ako obe datoteke imaju providnost, postavite klizač preko neprovidnog dela ili ćete videti kako pozadina stranice probija kroz oba panela.

Kada koristiti ovaj alat umesto koda

Koristite alat u pregledaču za ad-hoc poređenje tokom razvoja ili za brze demo prikaze zainteresovanim stranama. Na produkcionim veb-sajtovima, integrišite namensku biblioteku kao što su react-compare-slider ili img-comparison-slider radi pristupačnosti, lenjeg učitavanja i SSR podrške; za serijske automatizovane provere kvaliteta kroz stotine slika, koristite alate zasnovane na SSIM/PSNR kao što su ImageMagick `compare` ili pixelmatch.