Screenshot-Vergleich

Ein Screenshot-Vergleich prüft zwei Aufnahmen desselben Bildschirms, derselben Seite oder desselben Fensters auf Unterschiede. Der Vergleich kann visuell erfolgen, indem die Bilder nebeneinander, mit einem Schieberegler überlagert oder mit teilweiser Deckkraft ineinandergeblendet werden. Er kann auch berechnet werden: Software erzeugt ein Differenzbild, das geänderte Pixel hervorhebt, und gibt die Anzahl oder den Prozentanteil der abweichenden Pixel aus.

Ein zuverlässiger Vergleich setzt passende Eingaben voraus. Beide Bilder sollten dieselbe Pixelgröße, denselben Skalierungsfaktor und denselben Zuschnitt haben. Eine geänderte Fenstergröße, Retina-Skalierung oder Scroll-Position führt dazu, dass fast jedes Pixel abweicht, obwohl der Inhalt gleich ist.

Manueller und automatisierter Vergleich

Der manuelle Vergleich eignet sich für wenige Bilder und Beurteilungsfragen, etwa ob ein Redesign besser lesbar ist. Der automatisierte Vergleich eignet sich für viele Bilder und wiederholte Läufe: Ein Skript vergleicht jede neue Aufnahme mit einer gespeicherten Referenz und meldet nur die Bilder, die sich über einen Schwellenwert hinaus geändert haben.

Einsatzbereiche

• Visuelle Regressionstests nach Codeänderungen.
• Prüfung der eigenen oder einer fremden Seite auf Inhaltsänderungen.
• Vorher-nachher-Bilder für Design-Reviews und Release Notes.
• Bestätigung, dass ein Dokument oder Dashboard einer früheren Version entspricht.

So funktioniert der visuelle Abgleich

1. Die beiden Bilder werden auf dieselbe Größe gebracht.
2. Die Farbwerte jedes Pixels werden verglichen.
3. Unterschiede unterhalb einer Toleranz werden ignoriert. Diese Toleranz fängt das Rauschen durch Kantenglättung auf.
4. Geänderte Pixel werden in einer Hervorhebungsfarbe markiert, und die Gesamtzahl wird ausgegeben.

Wahrnehmungsbasierte Verfahren wie SSIM vergleichen Struktur und Kontrast statt exakter Werte. Dadurch fallen kleine Darstellungsverschiebungen seltener als Fehler auf.

Häufige Fehler beim Screenshot-Vergleich

• Bilder mit unterschiedlicher Größe oder unterschiedlichem Skalierungsfaktor vergleichen.
• Uhren, Werbung, Karussells oder Animationen im Bildausschnitt belassen.
• Aufnahmen mit unterschiedlich installierten Schriften oder einer anderen Browserversion erstellen.
• Die Toleranz so hoch setzen, dass echte Änderungen durchrutschen.

Immer wieder dieselben Screenshots?

Temposhot Website Capture speichert die Einstellungen Device, Area und Wait pro URL, sodass wiederholte Läufe vergleichbare Bilder erzeugen. Für Bildschirmbereiche hält ein gespeicherter Custom Area dasselbe Rechteck. Siehe Aufnahmeoptionen.

Häufige Fragen

Welcher Diff-Schwellenwert ist sinnvoll?

Das hängt von der Seite ab. Beginnen Sie mit einem niedrigen Wert, prüfen Sie die Fehlalarme und maskieren Sie dynamische Bereiche, statt den Schwellenwert zu erhöhen.

Kann ich zwei Screenshots ohne Installation vergleichen?

Ja. Das Compare Images hebt Unterschiede im Browser hervor.

Quellen

• Playwright Visual Comparisons
• Structural Similarity Index auf Wikipedia

Weiterführende Ressourcen

• Bilder vergleichen: zwei Bilder lokal vergleichen.
• Website Capture Schnellstart: wiederholbare Seitensätze aufnehmen.
• Aufnahmequellen: gespeicherte benutzerdefinierte Bereiche.