Zwei Bilder online vergleichen

So vergleichst du zwei Bilder

Fünf Schritte, ohne Software und ohne Konto.

1. Original als A hinzufügen: Leg es im linken Feld ab, klick zum Auswählen oder füge einen Screenshot mit ⌘V bzw. Strg+V ein.
2. Geänderte Version als B hinzufügen: dieselben Möglichkeiten rechts. Legst du zwei Dateien gleichzeitig ab, werden beide Felder gefüllt, und der Tausch-Button dreht die Reihenfolge um.
3. Ergebnis lesen: Die Differenzansicht färbt geänderte Pixel in der Markierungsfarbe über einer blassen Kopie von A. Die Statistik zeigt, wie viele Pixel sich geändert haben, welcher Anteil des Bildes das ist und wie viele getrennte Bereiche gefunden wurden. Bei identischen Bildern bekommst du die klare Meldung „Die Bilder sind identisch“.
4. Änderungen prüfen: Wechsle zum Schieberegler, um zwischen A und B zu wischen, zu „Nebeneinander“, um beide gemeinsam zu scrollen, oder zur Überlagerung, um B über A einzublenden. Zoome von 50 bis 400 % und spring mit den Pfeilen von einer Änderung zur nächsten.
5. Feinjustieren und exportieren: Passe Schwellenwert, Kantenglättung und Markierungsfarbe an, bis nur noch die Änderungen übrig sind, die dich interessieren. Lade das Diff dann als PNG (mit Rahmen) herunter oder kopiere es in die Zwischenablage.

Was Schwellenwert und Kantenglättung bewirken

Schwellenwert

Der Bildvergleich vergleicht keine rohen RGB-Werte. Für jedes Pixel misst er den wahrgenommenen Farbunterschied im YIQ-Farbraum, einem Modell, das Helligkeit stärker gewichtet als den Farbton, so wie dein Auge. Das Ergebnis ist so skaliert, dass 0 identisch bedeutet und 1 dem größtmöglichen Unterschied entspricht (reines Rot gegen Cyan); reines Schwarz gegen reines Weiß liegt bei etwa 0,97. Jedes Pixel über dem Schwellenwert wird als geändert markiert.

• 0: markiert jedes Pixel, das sich überhaupt unterscheidet, auch Rundungsunterschiede von einer Stufe, die niemand sieht.
• 0,1 (Standard): überspringt unsichtbare Abweichungen und leichtes Kompressionsrauschen und erkennt die meisten sichtbaren Änderungen. Sehr feine Farbtonänderungen, etwa ein Hintergrund, der eine Graustufe dunkler ist, können darunter liegen. Senke den Schwellenwert auf 0,05 oder weniger, wenn du feine Farb-Tokens prüfst.
• 0,2 bis 0,3: ein guter Bereich für JPGs, skalierte Bilder und Screenshots von verschiedenen Rechnern.

Die Playwright-Assertion toHaveScreenshot nutzt einen Schwellenwert auf derselben YIQ-Skala von 0 bis 1 mit dem Standardwert 0,2. Stell den Schwellenwert hier auf 0,2 und lass „Kantenglättung ignorieren“ an, dann siehst du vorab, was ein Testlauf mit Standardeinstellungen markieren würde, bevor du die Testkonfiguration änderst.

Kantenglättung ignorieren

Text und schräge Kanten werden mit Zwischentönen gezeichnet, damit sie glatt wirken (Anti-Aliasing). Unterschiedliche Browser, Grafikkarten, Schrift-Renderer und Skalierungen erzeugen leicht unterschiedliche Kantenpixel, sodass derselbe Text, zweimal gerendert, an jedem Buchstaben abweichen kann. Ist die Option an, gilt ein Pixel, das zwischen einem dunkleren und einem helleren Nachbarn an der Grenze zweier gleichmäßiger Flächen liegt, als Kantenartefakt: Es wird nicht gezählt und gelb eingefärbt, damit du es trotzdem siehst. Schalte die Option aus, wenn genau die Kanten das sind, was du prüfst, etwa ein neu gezeichnetes Icon oder eine geänderte Schriftstärke.

Screenshots vergleichen für Visual Regression Testing und QA

Ein visueller Vergleich beantwortet schnell eine Frage: Was hat sich auf dem Bildschirm verändert? Damit ist er weit mehr als ein Suchbild mit zwei Fotos.

• Vor und nach einem Deployment: Nimm dieselbe Seite in Produktion und auf Staging auf, oder vor und nach einem Merge, und vergleiche sie. Alles, was außerhalb des Bereichs markiert ist, den du ändern wolltest, verdient einen zweiten Blick.
• Ungewollte UI-Änderungen finden: eine CSS-Änderung an einer Komponente, die anderswo das Padding verschiebt, eine Schrift, die unbemerkt auf einen Fallback wechselt, ein fehlendes Icon oder ein Design-Token, das einen Grauton in der ganzen App verändert. Für so kleine Farbtonänderungen senke den Schwellenwert auf 0,05 oder weniger.
• Bugfixes prüfen: Vergleiche den Screenshot aus dem Bug-Report mit dem korrigierten Build, um den Fix zu bestätigen und zu sehen, dass drumherum nichts verrutscht ist.
• Zusammen mit automatisierten Screenshot-Tests: Schlägt ein visueller Test in Playwright fehl, schreibt er ein Expected-, ein Actual- und ein Diff-Bild in den Ordner mit den Testergebnissen. Leg Expected und Actual hier ab, prüf sie mit Schieberegler und Zoom und probier verschiedene Schwellenwerte aus, bevor du die Testkonfiguration anfasst.
• Bessere Bug-Reports: Häng das heruntergeladene Diff zusammen mit den Vorher- und Nachher-Screenshots an, damit Entwickler die Regression sehen, ohne danach suchen zu müssen.

Warum identisch aussehende Bilder trotzdem Unterschiede zeigen

Ein Bildvergleich auf Pixelebene sieht Änderungen, über die dein Auge hinweggeht. Die üblichen Verdächtigen:

• JPEG-Neukompression: Jedes Speichern als JPG kodiert das Bild in 8×8-Blöcken neu. Die Pixel verschieben sich dabei jedes Mal um ein paar Stufen, am deutlichsten an Text und harten Kanten.
• Farbprofile: Ein Bild mit Display-P3-Profil und eines mit sRGB-Profil oder ganz ohne Profil werden beim Zeichnen unterschiedlich umgerechnet, sodass identische Ausgangspixel leicht verschieden herauskommen.
• Schriftglättung und Subpixel-Rendering: Windows ClearType gibt Text farbige Säume, macOS glättet in Graustufen, und jeder Browser rastert Schriften auf seine eigene Art. Dieselbe Seite auf zwei Rechnern stimmt an den Buchstaben selten überein.
• Device Pixel Ratio: Ein 2x-Display liefert Screenshots, die doppelt so breit und hoch sind wie auf einem 1x-Display, und krumme Skalierungen wie 125 % oder 150 % unter Windows ändern die Größe noch einmal. Wer ein Bild auf die Größe des anderen skaliert, berechnet es immer neu.
• Was sich von selbst bewegt: Uhren, Zeitstempel, relative Angaben wie „vor 3 Minuten“, ein blinkender Textcursor, der Mauszeiger, Hover-Zustände, Karussells, Werbung, Animationen mitten im Übergang und Bilder, die noch nicht fertig geladen waren.