Begin met het matchen van de basislijn en gewijzigde bestanden uit dezelfde scène, lay-out, viewport of exportworkflow.
Handleiding voor het controleren van beeldverschillen
Hoe u een Image Diff Checker gebruikt
Beoordeling op pixelniveau voor schermafbeeldingen, compressie-exports, productbewerkingen en kleine visuele wijzigingen waarvoor lokale verschillenstatistieken nodig zijn.
Voer Highlight-diff uit voor detectie van gewijzigd gebied en bevestig vervolgens het resultaat in de schuifregelaar, naast elkaar of Over elkaar-weergave.
Gebruik drempelwaarde, gewijzigde pixels, RMSE en PSNR als beoordelingssignalen. Het eindoordeel komt nog steeds van het zichtbare resultaat.
Pixelbeoordeling voor exact gewijzigde gebieden
Een afbeeldingsverschilcontrole lokaliseert verschillen tussen twee gerelateerde afbeeldingen. Het past bij UI-screenshotcontroles, beoordeling van productretouches, beoordeling van compressie-export en kleine visuele wijzigingen die gemakkelijk te missen zijn in een schuifregelaar.
De tool vergelijkt browsergedecodeerde pixels op een gedeeld canvas. Een pixel geldt als gewijzigd zodra de grootste rood-, groen-, blauw- of alfakanaaldelta de geselecteerde drempel overschrijdt.
Werkstroom
Verschil beoordelingsvolgorde
Laad eerst de basislijnafbeelding
Gebruik het origineel, de vorige schermafbeelding of de referentie-export als basisafbeelding. Een duidelijke basislijn zorgt ervoor dat veranderingen in het aantal pixels gemakkelijker te herkennen zijn.
Laad de gewijzigde afbeelding als tweede
Gebruik de nieuwe schermafbeelding, bewerkte foto, geoptimaliseerde afbeelding of geëxporteerde variant als gewijzigde afbeelding. Niet-overeenkomende dimensies vereisen een uitlijningscontrole voordat de metrische gegevens worden beoordeeld.
Gemarkeerde verschillen uitvoeren
Highlight-diff markeert gewijzigde gebieden en vult de metrische kaarten. Schuif-, zij-aan-zij- en Over elkaar-weergaven verifiëren het gemarkeerde resultaat in visuele context.
Pas de drempel bewust aan
Lagere drempels vangen subtiele veranderingen op. Hogere drempelwaarden negeren compressieruis, kleine lichtverschuivingen en anti-aliasing. Werk het verschil bij nadat u de drempelwaarde hebt gewijzigd.
Drempel
Hoe u een diff-drempel kiest
De drempelwaarde stelt de grenswaarde voor het kanaalverschil in voor gewijzigde pixels. Er bestaat geen universele beste waarde; match de waarde met de beoordelingstaak.
8
Strenge UI-controles
Probeer 8 voor kleine wijzigingen in het screenshot die duidelijk zichtbaar moeten zijn.
Een knoplabel is gewijzigd van Opslaan in Toepassen.
Een pictogram bewoog iets, een dunne rand verdween of de tekstafstand veranderde.
Deze waarde kan ook kleine weergaveruis rond tekst en randen opvangen.
18
Fijne fotodetail
Probeer 18 voor beeldbewerkingen die pas bij nader inzien zichtbaar zijn.
Een productschaduw werd zachter, een gezichtsretouchering verwijderde een klein vlekje of de textuur van de stof veranderde.
Een foto ziet er vrijwel hetzelfde uit, maar er is een hoogtepunt, weerspiegeling of kleurvlak bewerkt.
Goed voor een nauwkeurige beoordeling.
32
Evenwichtige standaard
Begin met 32 voor de meeste vergelijkingen.
Een screenshot van een landingspagina bevat zowel tekst als foto's.
Een productafbeelding is opnieuw geëxporteerd of een voorbeeld van een andere tool heeft een snelle controle nodig.
Zet de waarde lager voor strengere controles en hoger wanneer bestanden meer beeldruis bevatten.
64
Grote zichtbare veranderingen
Probeer je te concentreren op voor de hand liggende veranderingen.
Er is een achtergrond vervangen, een object verplaatst, een uitsnede gewijzigd of er is een sterke kleurverschuiving opgetreden.
Een JPEG- of WebP-export heeft weinig ruis, maar de recensie gaat alleen over veranderingen die mensen snel opmerken.
Kleine tekst, fijne pictogrammen en haarlijnranden vallen mogelijk niet meer op.
Statistieken
Hoe u de beeldverschilstatistieken kunt zien
Gewijzigde pixels
Het aantal vergelijkbare canvaspixels boven de huidige drempelwaarde. De waarde is sterk afhankelijk van de drempelwaarde en uitlijning.
Pixelpercentage gewijzigd
Gewijzigde pixels gedeeld door alle vergelijkbare pixels. Het helpt bij het vergelijken van twee runs met verschillende afbeeldingsformaten of bijsnijdgebieden.
Gemiddelde RGB-delta
Het gemiddelde absolute RGB-kanaalverschil. Brede kleur- of helderheidsverschuivingen kunnen hier optreden, zelfs met een klein percentage veranderd gebied.
RMSE
Root mean kwadratische RGB-fout. Grotere lokale verschillen beïnvloeden RMSE sterker dan kleine verspreide verschillen.
PSNR
Pieksignaal-ruisverhouding. Een hogere PSNR betekent meestal dat de beelden dichter bij elkaar staan in het RGB-signaal; lagere PSNR betekent meer zichtbare of meetbare fouten.
Veelvoorkomende valkuilen
Verschillende resultaten die een tweede blik nodig hebben
De afbeeldingen zijn iets verschoven
Een verschuiving van 1 px kan veel gebieden verlichten, zelfs als de afbeelding er vrijwel identiek uitziet. Open Over elkaar en controleer of de hoofdranden op één lijn liggen.
De afbeeldingsformaten komen niet overeen
Verschillende breedtes of hoogtes maken de vergelijking minder direct. Gebruik de visuele weergaven om de zichtbare verandering te vinden en snijd vervolgens de overeenkomende formaten bij of exporteer ze voor duidelijkere statistieken.
Er is sprake van compressieruis
JPEG- en WebP-exports voegen vaak kleine spikkels toe aan egale kleuren en randen. Verhoog de drempel als de review over zichtbare bewerkingen gaat.
Tekstranden zijn gewijzigd tijdens het renderen
Lettertypen, pictogrammen en vectorranden kunnen na een browser-, lettertype- of exportwijziging op iets andere pixels terechtkomen. Gebruik een lage drempel voor screenshot QA en bevestig vervolgens het gemarkeerde gebied met het oog.
Gebruiksgevallen
Bekijk de taken voor deze handleiding
UI-screenshotregressiebeoordeling
Vergelijking van beeldcompressiekwaliteit
Beoordeling van retoucheren van productfoto's
Controles voor en na bewerking
Kleine lay-out- of exportverschillen
Probeer het
Open het gereedschap nadat u de handleiding hebt gezien
Laad een basislijnafbeelding en een gewijzigde afbeelding, voer Highlight-diff uit en pas vervolgens de drempel aan totdat de gemarkeerde gebieden overeenkomen met de beoordelingstaak.
FAQ
Gebruik een Image Diff Checker
Welke drempel moet ik gebruiken in een afbeeldingsverschilcontrole?
Begin met 32 voor een algemeen overzicht. Gebruik 8 voor strikte schermafdrukcontroles van hetzelfde formaat, 18 voor fijne fotodetails en 64 voor grotere zichtbare wijzigingen.
Wat zorgt voor veel veranderde pixels in vergelijkbare afbeeldingen?
Kleine uitlijningsverschuivingen, anti-aliasing, compressieruis, kleurprofielverschillen en kleine veranderingen in de belichting kunnen allemaal tellen als gewijzigde pixels. Gebruik de Over elkaarweergave en drempelaanpassing om het resultaat te begrijpen.
Zijn RMSE en PSNR beter dan het gewijzigde pixelpercentage?
Ze beantwoorden een andere vraag. Het gewijzigde pixelpercentage laat zien hoeveel gebied de drempel heeft overschreden, terwijl RMSE en PSNR de RGB-fouten op het vergelijkbare canvas samenvatten.
Zijn mijn afbeeldingsgegevens veilig?
Ja. Afbeeldingsvoorbeeld en pixelvergelijking worden lokaal in uw browser uitgevoerd. Voor het diff is geen serverupload vereist, dus uw afbeeldingsgegevens blijven in de actieve browsersessie.