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.

Kuvien vertailuliukusäädin

Beforechoose file…Afterchoose file…

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

Tekniset tiedot

Miten kuvien vertailuliukusäädin toimii

Mitä työkalu tekee

Kuvien vertailuliukusäädin asettaa kaksi kuvaa päällekkäin ja näyttää vain sen osan, jonka haluat nähdä, vetämällä pystysuuntaista kahvaa. Kun liu'utat vasemmalle ja oikealle, esiin paljastuu enemmän 'ennen'- tai 'jälkeen'-kuvaa, jolloin vierekkäiset visuaaliset erot käyvät heti ilmeisiksi. Myös tiedostokoot ja prosentuaalinen muutos näytetään, jotta näet vaikutuksen tavutasolla.

Yleiset kehittäjien käyttötapaukset

Häviöllistä kuvanpakkausta varmistavat insinöörit vertaavat saman lähteen JPEG- ja WebP-versioita. Suunnittelijat tarkastelevat sävykartoituksen, retusoinnin tai värikorjauksen muutoksia luonnoksen ja lopullisen version välillä. ML/AI-insinöörit havainnollistavat superresoluution, kohinanpoiston tai tyylinsiirron tuloksia suhteessa syötteisiinsä. Markkinointitiimit tuottavat näyttäviä ennen/jälkeen-demoja laskeutumissivuille.

Tietomuodot, tyypit tai variantit

Hyväksyy minkä tahansa kuvatiedostomuodon, jonka selain pystyy renderöimään — PNG, JPEG, WebP, AVIF, GIF, SVG. Kuvat pysyvät selaimessasi object URL -osoitteiden kautta (URL.createObjectURL), joten mitään ei ladata palvelimeen. Hyödyllisintä vertailua varten kahdella kuvalla tulisi olla samat mitat ja kuvasuhde; jos ne poikkeavat, molemmat renderöidään object-fit: contain -asetuksella, jotta kumpaakaan ei rajata.

Yleiset sudenkuopat ja reunatapaukset

Eri kuvasuhteisten kuvien vertailu tuottaa letterbox-palkit toiselle puolelle. Erittäin suuret kuvat (>50 MB) voivat hidastaa vetämistä vanhemmissa selaimissa. Liukusäädin paljastaa koko 'after'-kuvan — jos molemmissa tiedostoissa on läpinäkyvyyttä, aseta liukusäädin peittävän alueen päälle, tai näet sivun taustan kuultavan läpi molemmista paneeleista.

Milloin käyttää tätä työkalua vs. koodia

Käytä selaintyökalua ad hoc -vertailuun kehityksen aikana tai nopeisiin sidosryhmädemoihin. Tuotantosivustoilla integroi erillisiä kirjastoja, kuten react-compare-slider tai img-comparison-slider, saavutettavuuden, laiskan latauksen ja SSR-tuen vuoksi; satojen kuvien eräajettuihin automaattisiin laatutarkistuksiin käytä SSIM/PSNR-pohjaisia työkaluja, kuten ImageMagick `compare` tai pixelmatch.