Wat is een afbeeldingsdiff?

Een afbeeldingsdiff vergelijkt twee versies van een afbeelding pixel voor pixel en markeert elke plaats waar ze van elkaar verschillen. Ontwikkelaars gebruiken dit voor visuele regressietests: een screenshot van een pagina van vóór een codewijziging wordt vergeleken met een screenshot dat erna is gemaakt, zodat een onbedoelde verschuiving, een ontbrekend pictogram of een gewijzigde kleur opvalt, zelfs wanneer de twee screenshots er op het eerste gezicht hetzelfde uitzien.

Beschrijving van de tool

Deze tool vergelijkt twee afbeeldingen en tekent een diff-afbeelding: de verschillen in rood over een vervaagde kopie van de eerste afbeelding. De tool telt de pixels die verschillen, groepeert nabije verschillen in regio's en meet het oppervlak dat ze beslaan. Afgevlakte randen van tekst en vormen worden gedetecteerd als anti-aliasing en niet meegeteld, zodat een screenshot dat met een iets andere font-renderer is gemaakt niet als wijziging wordt weergegeven. Je kunt ook een schuifregelaar over de twee afbeeldingen slepen en op beide tegelijk inzoomen.

Functies

  • PNG-, JPEG-, WebP-, GIF-, BMP- en AVIF-afbeeldingen vergelijken
  • Het aantal verschillende pixels tellen en weergeven als aandeel van de afbeelding
  • Nabije verschillen groeperen in regio's en elke regio in de diff-afbeelding omlijnen
  • Pixels met anti-aliasing overslaan en ze in een aparte kleur markeren, of ze desgewenst meetellen
  • Instelbare drempelwaarde voor het kleurverschil dat nodig is om twee kleuren als verschillend te tellen
  • Optionele tweede kleur voor pixels die donkerder zijn geworden, om toegevoegde inhoud van verwijderde inhoud te onderscheiden
  • Modus voor alleen verschillen, waarbij de diff op een transparante achtergrond wordt getekend
  • Inzoomen tot 3200% met scherpe pixels en de diff downloaden als PNG-afbeelding
  • Schuifregelaarweergave waarmee beide afbeeldingen samen worden ingezoomd en verschoven, met een modus voor volledig scherm
  • Afbeeldingen met verschillende afmetingen vergelijken door ze linksboven uit te lijnen of de tweede afbeelding te vergroten of te verkleinen

Hoe het werkt

De vergelijking gebruikt pixelmatch, de opensourcebibliotheek achter veel tools voor visuele tests. Voor elke pixel wordt de kleurafstand in de YIQ-kleurruimte gemeten, waarbij helderheid zwaarder weegt dan tint, net als bij het menselijk oog. Een pixel wordt als verschillend geteld wanneer de afstand boven de drempelwaarde ligt. Voordat pixelmatch een pixel meetelt, controleert het de aangrenzende pixels om vast te stellen of de pixel deel uitmaakt van een rand met anti-aliasing. De tool leest de pixelwaarden die in de bestanden zijn opgeslagen en negeert ingesloten kleurprofielen, zodat twee bestanden die naar dezelfde pixels worden gedecodeerd altijd overeenkomen. Alles wordt in je browser uitgevoerd en de afbeeldingen worden nooit geüpload.

Tips

  • Houd de drempelwaarde voor screenshots op 0,1. Verlaag deze naar 0 om elke wijziging te detecteren, inclusief ruis door JPEG-compressie; verhoog de waarde om kleine kleurverschillen te negeren.
  • Een foto die twee keer als JPEG is opgeslagen, verschilt in duizenden pixels met een zeer klein verschil. Als het resultaat geen verschillen boven de drempelwaarde meldt, zien de afbeeldingen er hetzelfde uit.
  • Schakel Donkere pixels markeren in om te zien welke inhoud is toegevoegd en welke is verwijderd, omdat tekst op een lichte achtergrond donkerder wordt op de plaats waar deze verschijnt.
  • Bij GIF-bestanden wordt alleen het eerste frame vergeleken.