Screenshot-Vergleich

Vergleiche zwei lokale Screenshots pixelweise mit Schwellenwert und Heatmap. Sieh den Diff-Anteil und lade das Diff-Bild.

Wie hilfreich ist dieses Tool?

Ergebnis erscheint hier …

Screenshots vergleichen: Pixel-Diff mit Schwellenwert

Lade zwei lokale Screenshots, etwa Vorher und Nachher eines Designs oder zwei Zustände einer Seite. Der Vergleich zeigt beide Bilder nebeneinander und rechnet die Unterschiede pixelweise aus. Ein Schwellenwert regelt, ab welcher Abweichung ein Pixel als unterschiedlich zählt, damit leichte Kompressionsartefakte nicht jeden Wert verfälschen.

Das Ergebnis nennt den Anteil abweichender Pixel in Prozent und zeigt eine Heatmap, in der geänderte Bereiche aufleuchten. Die Heatmap lädst du als PNG herunter und hängst sie an ein Ticket oder eine Rückmeldung an. Beide Bilder müssen dieselben Maße haben, weichen sie ab, sagt dir das Tool welche. Alles läuft lokal im Browser.

Häufige Fragen

Warum unterscheiden sich meine Screenshots im Maß?

Verschiedene Zoomstufen, Gerätepixelverhältnisse oder abgeschnittene Ränder ändern die Abmessungen. Der Vergleich braucht exakt gleiche Maße, weil er Pixel für Pixel gegenüberstellt. Skaliere die Bilder vorher auf dasselbe Format.

Was bewirkt der Schwellenwert?

Er legt fest, wie stark sich zwei Pixel farblich unterscheiden müssen, um als Änderung zu zählen. Ein hoher Wert ignoriert JPEG-Rauschen und Antialiasing, ein niedriger findet auch subtile Verschiebungen. Probiere 2 bis 5 Prozent als Startpunkt.

Wofür ist der Screenshot-Vergleich im Alltag gut?

Klassisch für Design-QA: Hat das CSS-Update die Schaltfläche wirklich verschoben? Auch für Regressionstests von Landingpages oder den Abgleich von Lokalisierungen zweier Sprachversionen.