Was ist ein Bild-Diff?

Ein Bild-Diff vergleicht zwei Versionen eines Bildes Pixel für Pixel und markiert jede Stelle, an der sie sich unterscheiden. Entwickler verwenden ihn für visuelle Regressionstests: Ein Screenshot einer Seite vor einer Codeänderung wird mit einem danach erstellten Screenshot verglichen, sodass eine unbeabsichtigte Verschiebung, ein fehlendes Symbol oder eine geänderte Farbe auffällt, selbst wenn die beiden Screenshots auf den ersten Blick gleich aussehen.

Toolbeschreibung

Dieses Tool vergleicht zwei Bilder und erstellt ein Diff-Bild: Die Unterschiede werden rot über einer verblassten Kopie des ersten Bildes dargestellt. Es zählt die unterschiedlichen Pixel, gruppiert nahe beieinanderliegende Unterschiede in Bereiche und misst deren Fläche. Geglättete Text- und Formkanten werden als Anti-Aliasing erkannt und nicht mitgezählt, sodass ein Screenshot, der mit einem leicht abweichenden Font-Renderer erstellt wurde, nicht als Änderung erscheint. Außerdem können Sie einen Schieberegler über die beiden Bilder ziehen und beide gleichzeitig vergrößern.

Funktionen

  • PNG-, JPEG-, WebP-, GIF-, BMP- und AVIF-Bilder vergleichen
  • Die unterschiedlichen Pixel zählen und ihren Anteil am Bild anzeigen
  • Nahe beieinanderliegende Unterschiede in Bereiche gruppieren und jeden Bereich im Diff-Bild umreißen
  • Anti-Aliasing-Pixel überspringen und sie in einer separaten Farbe markieren oder sie auf Wunsch mitzählen
  • Einstellbarer Schwellenwert dafür, wie stark sich zwei Farben unterscheiden müssen, um als unterschiedlich zu gelten
  • Optionale zweite Farbe für Pixel, die dunkler geworden sind, um hinzugefügte von entfernten Inhalten zu unterscheiden
  • Modus „Nur Unterschiede“, der den Diff auf einem transparenten Hintergrund darstellt
  • Bis zu 3200 % vergrößern, mit scharfen Pixeln, und den Diff als PNG-Bild herunterladen
  • Schieberegleransicht, in der beide Bilder gemeinsam vergrößert und verschoben werden, mit einem Vollbildmodus
  • Bilder unterschiedlicher Größe vergleichen, indem sie oben links ausgerichtet oder das zweite Bild in der Größe angepasst wird

Funktionsweise

Der Vergleich verwendet pixelmatch, die Open-Source-Bibliothek hinter vielen Tools für visuelle Tests. Für jedes Pixel wird der Farbabstand im YIQ-Farbraum gemessen, der – wie das menschliche Auge – die Helligkeit stärker gewichtet als den Farbton. Ein Pixel gilt als unterschiedlich, wenn der Abstand über dem Schwellenwert liegt. Bevor pixelmatch ein Pixel zählt, überprüft es die benachbarten Pixel, um festzustellen, ob es zu einer Anti-Aliasing-Kante gehört. Das Tool liest die in den Dateien gespeicherten Pixelwerte und ignoriert eingebettete Farbprofile, sodass zwei Dateien, die zu denselben Pixeln dekodiert werden, immer übereinstimmen. Alles läuft in Ihrem Browser, und die Bilder werden niemals hochgeladen.

Tipps

  • Lassen Sie den Schwellenwert für Screenshots auf 0,1 eingestellt. Setzen Sie ihn auf 0, um jede Änderung zu erkennen, einschließlich JPEG-Kompressionsrauschen, oder erhöhen Sie ihn, um kleine Farbverschiebungen zu ignorieren.
  • Ein zweimal als JPEG gespeichertes Foto unterscheidet sich in Tausenden von Pixeln geringfügig. Wenn das Ergebnis keine Unterschiede oberhalb des Schwellenwerts meldet, sehen die Bilder gleich aus.
  • Aktivieren Sie „Dunklere Pixel markieren“, um zu sehen, welche Inhalte hinzugefügt und welche entfernt wurden, da Text auf einem hellen Hintergrund an den Stellen dunkler wird, an denen er erscheint.
  • Bei GIF-Dateien wird nur das erste Bild verglichen.