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.

Drsnik za primerjavo slik

Beforechoose file…Afterchoose file…

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

Tehnične podrobnosti

Kako deluje drsnik za primerjavo slik

Kaj orodje počne

Drsnik za primerjavo slik prekriva dve sliki in z vlečenjem navpičnega ročaja razkrije le del, ki ga želite videti. Ko drsite levo in desno, se razkrije več slike »pred« ali »po«, zato so vizualne razlike takoj očitne. Prikazani so tudi velikosti datotek in odstotna sprememba, da lahko vidite vpliv tudi na ravni bajtov.

Pogosti primeri uporabe za razvijalce

Inženirji, ki preverjajo izgubno stiskanje slik, primerjajo različici JPEG in WebP istega vira. Oblikovalci pregledajo spremembe v preslikavi tonov, retuširanju ali barvni korekciji med osnutkom in končno različico. Inženirji ML/AI vizualizirajo rezultate super-ločljivosti, odstranjevanja šuma ali prenosa sloga v primerjavi z vhodnimi podatki. Marketinške ekipe pripravijo dramatične predstavitve »pred/po« za pristajalne strani.

Podatkovni formati, tipi ali različice

Sprejme katerikoli slikovni format, ki ga brskalnik zna izrisati — PNG, JPEG, WebP, AVIF, GIF, SVG. Slike ostanejo v vašem brskalniku prek objektnih URL-jev (URL.createObjectURL), zato se nič ne nalaga. Za najbolj uporabno primerjavo naj imata obe sliki enake dimenzije in razmerje stranic; če se razlikujeta, se obe izrišeta z object-fit: contain, da se nobena ne obreže.

Pogoste pasti in robni primeri

Primerjanje slik z različnimi razmerji stranic povzroči črne pasove (letterbox) na eni strani. Zelo velike slike (>50 MB) lahko v starejših brskalnikih upočasnijo interakcijo vlečenja. Drsnik razkrije celotno sliko »po« — če imata obe datoteki prosojnost, postavite drsnik nad neprosojno območje, sicer boste videli, kako se ozadje strani prelivá skozi obe plošči.

Kdaj uporabiti to orodje namesto kode

Uporabite orodje v brskalniku za ad-hoc primerjavo med razvojem ali za hitre predstavitve deležnikom. Na produkcijskih spletnih mestih integrirajte namenske knjižnice, kot sta react-compare-slider ali img-comparison-slider, zaradi dostopnosti, lenega nalaganja in podpore za SSR; za paketne avtomatizirane preverbe kakovosti na stotinah slik uporabite orodja na osnovi SSIM/PSNR, kot sta ImageMagick `compare` ali pixelmatch.