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.

Piltide võrdluse liugur

Beforechoose file…Afterchoose file…

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

Tehnilised üksikasjad

Kuidas piltide võrdluse liugur töötab

Mida tööriist teeb

Piltide võrdluse liugur asetab kaks pilti üksteise peale ja kuvab vertikaalset käepidet lohistades ainult selle osa, mida soovid näha. Vasakule ja paremale liigutades paljastub rohkem „enne” või „pärast” pilti, muutes kõrvuti visuaalsed erinevused kohe selgelt nähtavaks. Kuvatakse ka failisuurused ja protsentuaalne muutus, et näeksid mõju ka baitide tasemel.

Levinud kasutusjuhtumid arendajatele

Insenerid, kes kontrollivad kadudega pilditihendust, võrdlevad sama allika JPEG- ja WebP-versiooni. Disainerid vaatavad üle toonikaardistuse, retušeerimise või värvikorrektsiooni muudatused mustandi ja lõppversiooni vahel. ML/AI-insenerid visualiseerivad super-resolutsiooni, müraeemalduse või stiiliedastuse tulemusi võrreldes sisenditega. Turundustiimid loovad maandumislehtede jaoks efektseid enne/pärast demosid.

Andmevormingud, tüübid või variandid

Aktsepteerib mis tahes pildivormingut, mida brauser suudab renderdada — PNG, JPEG, WebP, AVIF, GIF, SVG. Pildid jäävad sinu brauserisse object URL-ide kaudu (URL.createObjectURL), seega midagi ei laadita üles. Kõige kasulikuma võrdluse jaoks peaksid kahel pildil olema samad mõõtmed ja kuvasuhe; kui need erinevad, renderdatakse mõlemad object-fit: contain abil, et kumbki ei kärbitaks.

Levinud komistuskivid ja erijuhud

Erineva kuvasuhtega piltide võrdlemine tekitab ühele küljele letterbox-ribad. Väga suured pildid (>50 MB) võivad vanemates brauserites lohistamisinteraktsiooni aeglustada. Liugur paljastab kogu 'pärast' pildi — kui mõlemal failil on läbipaistvus, aseta liugur läbipaistmatu ala kohale, muidu näed lehe tausta mõlemast paneelist läbi kumamas.

Millal kasutada seda tööriista vs koodi

Kasuta brauseritööriista arenduse ajal ad-hoc võrdluseks või kiireteks demo'deks sidusrühmadele. Tootmiskeskkonna veebisaitidel integreeri ligipääsetavuse, laisa laadimise ja SSR-toe jaoks spetsiaalsed teegid nagu react-compare-slider või img-comparison-slider; sadade piltide lõikes partiipõhisteks automatiseeritud kvaliteedikontrollideks kasuta SSIM/PSNR-põhiseid tööriistu nagu ImageMagick `compare` või pixelmatch.