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.

Billedsammenligningsslider

Beforechoose file…Afterchoose file…

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

Tekniske detaljer

Sådan fungerer skyderen til billedsammenligning

Hvad værktøjet gør

Skyderen til billedsammenligning lægger to billeder oven på hinanden og viser kun den del, du vil se, ved at trække i et lodret håndtag. Når du skubber til venstre og højre, afsløres mere af 'før'- eller 'efter'-billedet, hvilket gør visuelle forskelle side om side straks tydelige. Filstørrelser og procentvis ændring vises også, så du kan se effekten helt ned på byte-niveau.

Almindelige anvendelsestilfælde for udviklere

Ingeniører, der verificerer tabsgivende billedkomprimering, sammenligner en JPEG- med en WebP-version af den samme kilde. Designere gennemgår tone mapping-, retouchering- eller farvekorrektionsændringer mellem en kladde og den endelige version. ML/AI-ingeniører visualiserer superopløsning, støjreduktion eller style transfer-resultater op imod deres input. Marketingteams laver dramatiske før/efter-demoer til landingssider.

Dataformater, typer eller varianter

Accepterer ethvert billedformat, som browseren kan gengive — PNG, JPEG, WebP, AVIF, GIF, SVG. Billederne bliver i din browser via objekt-URL'er (URL.createObjectURL), så intet uploades. For den mest nyttige sammenligning bør de to billeder have samme dimensioner og billedformat; hvis de afviger, gengives begge med object-fit: contain, så ingen af dem beskæres.

Almindelige faldgruber og kanttilfælde

Sammenligning af billeder med forskellige billedformater giver letterbox-bjælker på den ene side. Meget store billeder (>50 MB) kan gøre trækinteraktionen langsommere i ældre browsere. Skyderen viser hele 'efter'-billedet — hvis begge filer har gennemsigtighed, så placer skyderen over et uigennemsigtigt område, ellers vil du se sidebaggrunden skinne igennem i begge paneler.

Hvornår du skal bruge dette værktøj vs. kode

Brug browserværktøjet til ad-hoc-sammenligning under udvikling eller til hurtige demoer for interessenter. På produktionswebsites bør du integrere dedikerede biblioteker som react-compare-slider eller img-comparison-slider for tilgængelighed, lazy loading og SSR-understøttelse; til batchvise automatiserede kvalitetskontroller på tværs af hundredvis af billeder kan du bruge SSIM/PSNR-baserede værktøjer som ImageMagick `compare` eller pixelmatch.