Afbeeldingsvergelijking

Laad twee afbeeldingen en vergelijk ze met een sleepschuif of naast-elkaarweergave. Perfect voor voor/na-bewerkingen. Geen upload.

Hoe Afbeeldingsvergelijkingsschuif werkt

Afbeeldingsvergelijkingsschuifregelaar laat je twee afbeeldingen naast elkaar laden en een verticale verdeler slepen om meer van de ene afbeelding en minder van de andere te onthullen. Deze voor-en-na-indeling is een directe, drempelarme manier om het verschil tussen twee versies van een afbeelding te tonen. Beide afbeeldingen worden vanuit je lokale schijf geladen via de File API en in de browser op het scherm weergegeven; niets wordt naar een server geüpload.

De schuifregelaar maakt gebruik van een CSS clip-path-aanpak zodat de overgang tussen de twee afbeeldingen altijd pixeluitgelijnd is en er geen vermenging of interpolatie aan de grens is. Je kunt ook overschakelen naar een gesplitst schermweergave die de twee afbeeldingen in vaste linker- en rechterpanelen toont. Het hulpmiddel is handig voor het vergelijken van fotobewerkingen, compressieresultaten, ontwerpiteraties of twee afbeeldingen waarbij je duidelijk verschillen wilt zien.

Geschreven door Bastien Sulyan

Hoe je Afbeeldingsvergelijkingsschuif gebruikt, stap voor stap

Sleep de eerste afbeelding (de 'voor'-versie) naar het linker uploadgebied.
Sleep de tweede afbeelding (de 'na'-versie) naar het rechter uploadgebied.
Sleep de verdeler naar links en rechts om meer van de ene afbeelding tegelijk te onthullen.
Schakel over naar de gesplitste weergave om beide afbeeldingen in vaste panelen te zien als je de voorkeur geeft aan een statische vergelijking.
Gebruik de volledig-scherm-knop om de vergelijking te maximaliseren voor gedetailleerde inspectie.

Veelvoorkomende toepassingen

Een fotograaf vergelijkt de originele RAW-export met een nabewerkte versie om te beoordelen hoeveel de bewerking de afbeelding heeft veranderd.
Een ontwikkelaar controleert een voor-en-na-paar van gecomprimeerde afbeeldingen om te beoordelen of kwaliteitsverlies bij een bepaald compressieniveau acceptabel is.
Een UX-ontwerper presenteert een UI-herontwerp door de oude interfaceschermafbeelding links en de nieuwe rechts te plaatsen voor een stakeholderbeoordeling.
Een contentredacteur verifieert dat een beeldmanipulatie (kleurcorrectie, bijsnijden) consistent is tussen een miniatuur en een volledige versie.

Veelgestelde vragen

Moeten de twee afbeeldingen hetzelfde formaat hebben?

Het hulpmiddel werkt het beste wanneer beide afbeeldingen dezelfde afmetingen hebben, omdat de schuifregelaar ze precies overlegt. Als de afbeeldingen in grootte verschillen, schaalt het hulpmiddel ze naar een gemeenschappelijke weergavegrootte. Er kan enige uitlijning ontbreken aan de randen als de beeldverhoudingen verschillen.

Worden de afbeeldingen ergens naartoe gestuurd voor de vergelijking?

Nee. Beide afbeeldingen worden van je bestandssysteem geladen via de File API en in Canvas-elementen in je browser getekend. De vergelijking is een client-side renderingbewerking. Geen van de afbeeldingen verlaat je apparaat.

Kan ik afbeeldingen van twee verschillende URL's vergelijken in plaats van lokale bestanden?

Het huidige hulpmiddel accepteert alleen lokale bestanden. Het laden van afbeeldingen van externe URL's zou vereisen dat de browser ze ophaalt en zou onderhevig zijn aan CORS-beperkingen die veel afbeeldingshosts niet toestaan.

Is er een maximale afbeeldingsgrootte die de vergelijking aankan?

De limiet is het Canvas-geheugen van je browser. Afbeeldingen tot ongeveer 20 megapixels elk worden op de meeste desktopapparaten zonder problemen verwerkt. Zeer grote afbeeldingen kunnen de weergave vertragen of een geheugenmelding veroorzaken op low-end hardware.

Kan ik een schermafbeelding opslaan van een specifieke schuifregelaaarpositie?

Het schermafbeeldingsprogramma van je besturingssysteem (of de schermafbeeldingsfunctie van de browser in DevTools) is de meest directe manier om een bepaalde schuifregelaaarpositie vast te leggen. De vergelijkingsweergave zelf heeft geen ingebouwde exportknop voor een samengevoegde afbeelding.

Gerelateerde tools

Houd alles lokaal, verken aanvullende tools.

Alle afbeeldingstools