Screenshot-Vergleich: Pixel Diff, pHash und SSIM einfach erklärt
Der Screenshot-Vergleich ist der algorithmische Prozess, mit dem ein visuelles Testtool bestimmt, ob zwei Screenshots derselben Webseite identisch oder unterschiedlich sind — und wenn sie unterschiedlich sind, wie stark und wo.
Hinter jedem visuellen Testtool stecken ein oder mehrere Bildvergleichsalgorithmen. Drei Methoden dominieren den Markt. Jede hat eine andere Philosophie, und das Verständnis dieser Unterschiede wird Ihnen helfen, das richtige Tool zu wählen — oder zu verstehen, warum Ihr aktuelles Tool Ihnen frustrierende Ergebnisse liefert.
Pixel Diff: Punkte zählen
Pixel Diff ist der direkteste Ansatz. Der Algorithmus nimmt zwei Bilder gleicher Abmessungen, durchläuft jedes Pixel und vergleicht die Farbwerte (Rot, Grün, Blau, Transparenz). Wenn die Werte abweichen, wird das Pixel als „unterschiedlich" markiert.
Stellen Sie sich zwei identische Millimeterpapiere vor, nur dass jemand auf dem zweiten 3 Kästchen rot ausgemalt hat. Der Pixel Diff würde genau diese 3 Kästchen finden.
Normalerweise würde man hier die mathematische Formel zeigen. Aber ehrlich gesagt, 2026 finden Sie die Formel der euklidischen Distanz im RGB-Farbraum schneller, indem Sie eine KI fragen, als diesen Artikel zu lesen. Was zählt, ist das Prinzip zu verstehen.
Der Algorithmus liefert zwei Dinge: die Anzahl (oder den Prozentsatz) der unterschiedlichen Pixel und ein „Diff"-Bild, in dem die Unterschiedszonen rot eingefärbt sind.
Es ist einfach, schnell, deterministisch. Aber es ist brutal. Eine leichte Anti-Aliasing-Änderung an einem Text — für das bloße Auge unsichtbar — kann Hunderte von Pixeln als „unterschiedlich" markieren. Der Test schlägt grundlos fehl.
pHash: Der visuelle Fingerabdruck
pHash (Perceptual Hash) verfolgt einen radikal anderen Ansatz. Anstatt Pixel für Pixel zu vergleichen, reduziert es jedes Bild auf einen kurzen „Fingerabdruck" — typischerweise 64 Bit — der die globale visuelle Struktur erfasst.
Stellen Sie es sich wie die Melodie eines Liedes vor. Sie können „Ode an die Freude" erkennen, egal ob sie auf dem Klavier, der Gitarre gespielt oder von jemandem gesungen wird, der falsch singt. Die Melodie ist dieselbe — die Details ändern sich. pHash funktioniert genauso mit Bildern.
Der Algorithmus reduziert das Bild auf eine sehr kleine Größe (zum Beispiel 32x32 Pixel), konvertiert es in Graustufen, wendet eine mathematische Transformation an, die die niedrigen Frequenzen extrahiert (die globale Struktur), und erzeugt eine Bitfolge.
Zwei visuell ähnliche Bilder haben ähnliche Fingerabdrücke. Der „Abstand" zwischen den Fingerabdrücken (Anzahl der unterschiedlichen Bits, genannt Hamming-Distanz) misst die Ähnlichkeit.
Der Vorteil: immun gegen Mikrovariationen (Anti-Aliasing, leichte Kompression, Größenänderung). Das Problem: wenig präzise bei Details. Eine subtile Farbänderung oder eine Verschiebung um 5 Pixel kann unbemerkt bleiben, wenn die Gesamtstruktur ähnlich bleibt.
SSIM: Das mathematische Auge
SSIM (Structural Similarity Index Measure) ist die ausgefeilteste Methode der drei. Es vergleicht weder einzelne Pixel noch das Gesamtbild — es vergleicht Bildzonen nach drei wahrnehmungsbezogenen Kriterien.
Die Luminanz: Sind die Zonen gleich hell? Der Kontrast: Sind die HelligkeitsVariationen ähnlich? Die Struktur: Sind die Pixelmuster auf die gleiche Weise angeordnet?
Der Algorithmus durchläuft das Bild mit einem gleitenden Fenster und berechnet diese drei Maße für jede Zone. Das Ergebnis ist ein Score zwischen 0 und 1 — je näher an 1, desto wahrnehmungsmäßig ähnlicher sind die Bilder.
Ein SSIM-Score von 0,99 bedeutet „für einen Menschen nahezu identisch". Ein Score von 0,95 bedeutet „sichtbare, aber geringfügige Unterschiede". Unter 0,90 sind die Unterschiede offensichtlich.
Der Vorteil: Es ist die Methode, die der menschlichen Wahrnehmung am nächsten kommt. Sie toleriert Rendering-Variationen, ohne echte Änderungen zu maskieren. Das Problem: Es ist langsamer als Pixel Diff, und die Toleranzschwelle muss sorgfältig kalibriert werden.
Was jede Methode übersieht
Pixel Diff übersieht den Kontext. Es weiß nicht, ob ein unterschiedliches Pixel wichtig ist oder nicht. Eine Anti-Aliasing-Änderung und ein verschwindender Button erzeugen die gleiche Art von Warnung.
pHash übersieht die Details. Seine Stärke (der Gesamtüberblick) ist zugleich seine Schwäche. Subtile Änderungen — eine leicht größere Schriftart, ein um 2px geänderter Abstand — gehen unter dem Radar durch.
SSIM ist der beste Kompromiss, erfordert aber eine sorgfältige Kalibrierung der Schwelle. Zu streng verhält es sich wie ein Pixel Diff. Zu nachsichtig lässt es Regressionen durch.
Der strukturelle Ansatz: Jenseits des Bildes
Es gibt einen vierten Ansatz, der überhaupt keine Bilder vergleicht. Die strukturelle Analyse vergleicht die berechneten CSS-Eigenschaften und das DOM direkt. Das macht Delta-QA mit seinem 5-Phasen-Algorithmus.
Anstatt sich zu fragen „sind die Pixel identisch?", fragt er sich „sind die CSS-Eigenschaften jedes Elements identisch?". Hat sich die font-size geändert? Hat sich die Marge verschoben? Ist die Farbe anders?
Das ist präziser (null False Positives durch Rendering-Unterschiede) und informativer (man weiß genau, was sich geändert hat und um wie viel). Aber es ist auch komplexer zu implementieren.
FAQ
Welche Methode ist die schnellste?
Pixel Diff ist die schnellste. pHash ist aufgrund der Transformation etwas langsamer. SSIM ist die langsamste, da es das Bild mit einem gleitenden Fenster durchläuft.
Welche Methode erzeugt die wenigsten False Positives?
SSIM im gut kalibrierten Modus. pHash ist auch gut beim Ignorieren von Rauschen, kann aber Details übersehen. Pixel Diff erzeugt die meisten False Positives.
Verwenden die Tools nur eine einzige Methode?
Nicht immer. Einige kombinieren Pixel Diff + SSIM. Andere fügen eine KI-Schicht darüber hinzu. Delta-QA verwendet einen strukturellen Ansatz, der nicht vom Bildvergleich abhängt.
Kann pHash eine Farbänderung erkennen?
Nur wenn die Änderung signifikant ist. Ein Wechsel von Dunkelblau zu leicht hellerem Blau wird wahrscheinlich ignoriert. Ein Wechsel von Blau zu Rot wird erkannt.
Welche SSIM-Schwelle für visuelles Testen verwenden?
Für strenge Regressionstests: 0,99. Für Monitoring mit Rauschtoleranz: 0,95-0,97. Unter 0,95 riskieren Sie, echte Regressionen zu übersehen.
Pixel Diff sagt Ihnen, dass sich etwas geändert hat. pHash sagt Ihnen, ob es insgesamt visuell anders ist. SSIM sagt Ihnen, wie unterschiedlich es für das menschliche Auge ist. Die strukturelle Analyse sagt Ihnen genau, was sich geändert hat und warum. Vier Ansätze, vier Antwortebenen. Die richtige Wahl hängt von der Frage ab, die Sie stellen.
Vorheriger Artikel: Visuelles Testen On-Premise