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.

Bildesammenligning med skyveknapp

Beforechoose file…Afterchoose file…

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

Tekniske detaljer

Slik fungerer bilde-sammenligningsskyveren

Hva verktøyet gjør

Bilde-sammenligningsskyveren legger to bilder oppå hverandre og viser bare den delen du vil se ved å dra i et vertikalt håndtak. Når du skyver til venstre og høyre, avdekkes mer av «før»- eller «etter»-bildet, noe som gjør visuelle forskjeller side om side umiddelbart tydelige. Filstørrelser og prosentvis endring vises også, slik at du kan se effekten helt ned på byte-nivå.

Vanlige bruksområder for utviklere

Ingeniører som verifiserer tapsbasert bildekomprimering, sammenligner en JPEG- med en WebP-versjon av samme kilde. Designere vurderer tone-mapping, retusjering eller fargekorrigering mellom en kladd og en endelig versjon. ML/AI-ingeniører visualiserer superoppløsning, støyreduksjon eller style-transfer-resultater opp mot inputene sine. Markedsføringsteam lager dramatiske før/etter-demoer for landingssider.

Dataformater, typer eller varianter

Godtar alle bildeformater som nettleseren kan gjengi — PNG, JPEG, WebP, AVIF, GIF, SVG. Bildene blir i nettleseren din via objekt-URL-er (URL.createObjectURL), så ingenting lastes opp. For den mest nyttige sammenligningen bør de to bildene ha samsvarende dimensjoner og sideforhold; hvis de avviker, gjengis begge med object-fit: contain slik at ingen blir beskåret.

Vanlige fallgruver og kanttilfeller

Å sammenligne bilder med ulike sideforhold gir letterbox-felt på den ene siden. Svært store bilder (>50 MB) kan gjøre dra-interaksjonen treg i eldre nettlesere. Glideren viser hele «etter»-bildet — hvis begge filene har gjennomsiktighet, plasser glideren over et ugjennomsiktig område, ellers vil du se sidebakgrunnen skinne gjennom i begge panelene.

Når du bør bruke dette verktøyet vs. kode

Bruk nettleserverktøyet for ad hoc-sammenligning under utvikling eller for raske demoer for interessenter. På produksjonsnettsteder bør du integrere dedikerte biblioteker som react-compare-slider eller img-comparison-slider for tilgjengelighet, lat lasting og SSR-støtte; for automatiserte kvalitetskontroller i batch på tvers av hundrevis av bilder, bruk SSIM/PSNR-baserte verktøy som ImageMagick `compare` eller pixelmatch.