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 usporedbu slika

Beforechoose file…Afterchoose file…

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

Tehnički detalji

Kako radi klizač za usporedbu slika

Što alat radi

Klizač za usporedbu slika preklapa dvije slike i otkriva samo dio koji želite vidjeti povlačenjem okomite ručke. Dok klizite lijevo i desno, otkriva se više slike 'prije' ili 'poslije', pa su vizualne razlike jedna uz drugu odmah očite. Prikazuju se veličine datoteka i postotna promjena kako biste vidjeli i utjecaj na razini bajtova.

Uobičajeni slučajevi upotrebe za razvojne programere

Inženjeri koji provjeravaju gubitnu kompresiju slika uspoređuju JPEG i WebP verziju istog izvora. Dizajneri pregledavaju promjene u mapiranju tonova, retuširanju ili korekciji boja između nacrta i konačne verzije. ML/AI inženjeri vizualiziraju rezultate super-rezolucije, uklanjanja šuma ili prijenosa stila u odnosu na ulazne podatke. Marketinški timovi izrađuju dojmljive demonstracije prije/poslije za odredišne stranice.

Formati podataka, vrste ili varijante

Prihvaća bilo koji format slike koji preglednik može prikazati — PNG, JPEG, WebP, AVIF, GIF, SVG. Slike ostaju u vašem pregledniku putem object URL-ova (URL.createObjectURL), tako da se ništa ne učitava. Za najkorisniju usporedbu dvije bi slike trebale imati iste dimenzije i omjer stranica; ako se razlikuju, obje se prikazuju s object-fit: contain kako se nijedna ne bi izrezala.

Uobičajene zamke i rubni slučajevi

Usporedba slika različitih omjera stranica stvara letterbox trake s jedne strane. Vrlo velike slike (>50 MB) mogu usporiti interakciju povlačenja u starijim preglednicima. Klizač otkriva cijelu "after" sliku — ako obje datoteke imaju prozirnost, postavite klizač preko neprozirnog područja ili ćete vidjeti kako pozadina stranice probija kroz oba panela.

Kada koristiti ovaj alat umjesto koda

Koristite alat u pregledniku za ad-hoc usporedbu tijekom razvoja ili za brze demo prikaze dionicima. Na produkcijskim web-stranicama integrirajte namjenske biblioteke poput react-compare-slider ili img-comparison-slider radi pristupačnosti, lijenog učitavanja i SSR podrške; za skupne automatizirane provjere kvalitete na stotinama slika koristite alate temeljene na SSIM/PSNR, poput ImageMagick `compare` ili pixelmatch.