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.

Bildjämförelsereglage

Beforechoose file…Afterchoose file…

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

Tekniska detaljer

Så fungerar bildjämförelsereglaget

Vad verktyget gör

Bildjämförelsereglaget lägger två bilder ovanpå varandra och visar bara den del du vill se genom att dra i ett vertikalt handtag. När du drar åt vänster och höger avslöjas mer av "före"- eller "efter"-bilden, vilket gör visuella skillnader sida vid sida omedelbart tydliga. Filstorlekar och procentuell förändring visas så att du även kan se påverkan på byte-nivå.

Vanliga användningsfall för utvecklare

Ingenjörer som verifierar förstörande bildkomprimering jämför en JPEG- med en WebP-version av samma källa. Designers granskar tone mapping, retuschering eller färgkorrigering mellan ett utkast och en slutlig version. ML/AI-ingenjörer visualiserar superupplösning, brusreducering eller style transfer-resultat mot sina indata. Marknadsföringsteam skapar dramatiska före/efter-demonstrationer för landningssidor.

Dataformat, typer eller varianter

Accepterar alla bildformat som webbläsaren kan rendera — PNG, JPEG, WebP, AVIF, GIF, SVG. Bilderna stannar i din webbläsare via objekt-URL:er (URL.createObjectURL), så inget laddas upp. För den mest användbara jämförelsen bör de två bilderna ha matchande dimensioner och bildförhållande; om de skiljer sig renderas båda med object-fit: contain så att ingen beskärs.

Vanliga fallgropar och specialfall

Att jämföra bilder med olika bildförhållanden ger letterbox-balkar på ena sidan. Mycket stora bilder (>50 MB) kan göra draginteraktionen långsammare i äldre webbläsare. Reglaget visar hela "efter"-bilden — om båda filerna har transparens, placera reglaget över ett opakt område annars ser du sidans bakgrund lysa igenom i båda panelerna.

När du ska använda det här verktyget jämfört med kod

Använd webbläsarverktyget för ad-hoc-jämförelser under utveckling eller för snabba demos för intressenter. På produktionswebbplatser, integrera dedikerade bibliotek som react-compare-slider eller img-comparison-slider för tillgänglighet, lat laddning och SSR-stöd; för automatiserade kvalitetskontroller i batch över hundratals bilder, använd SSIM/PSNR-baserade verktyg som ImageMagick `compare` eller pixelmatch.