Vorher-Nachher-Screenshot

Ein Vorher-Nachher-Screenshot ist ein Bildpaar derselben Ansicht zu zwei Zeitpunkten oder in zwei Zuständen. Es macht Änderungen, Verbesserungen und Regressionen sichtbar.

Related workflow terms: Screenshot-Vergleich.

Warum Vorher und Nachher nützlich ist

Ohne Kontext sind Änderungen schwer zu beurteilen. Der aktuelle Zustand zeigt nur, wie eine Seite jetzt aussieht. Neben dem früheren Zustand wird die Abweichung sofort sichtbar, ohne dass Betrachter sich an das alte Layout erinnern müssen.

Das Format ist intuitiv: Das Auge wandert von links nach rechts oder oben nach unten und erkennt Unterschiede automatisch. Anders als eine schriftliche Beschreibung zeigt das Paar die Änderung direkt.

Sein Wert hängt vollständig von konsistenten Bedingungen ab. Unterscheiden sich Größe, Zoom oder Scrollposition, lassen sich echte Änderungen nicht von Aufnahmeabweichungen trennen. Viewport, Browser und Inhaltszustand müssen gleich bleiben; nur die Zieländerung darf variieren.

Typische Einsatzbereiche

• Designprüfungen: Stakeholder sehen alte und neue Gestaltung direkt nebeneinander.
• Fehlerbehebung: Defekter und korrigierter Zustand im Ticket belegen die Lösung ohne erneutes Nachstellen.
• Release Notes und Changelogs: Neue Funktionen oder UI-Verbesserungen werden sichtbar statt nur beschrieben.
• A/B-Test-Dokumentation: Beide Varianten werden als Nachweis archiviert.
• Website-Monitoring: Regelmäßige Aufnahmen bilden eine Zeitleiste und zeigen, was sich wann verändert hat.
• Kundenergebnisse: Problem und Verbesserung nebeneinander machen den Wert einer Arbeit greifbar.

Verlässliche Paare aufnehmen

• Viewport sperren: Schon wenige Pixel Unterschied verschieben das Layout und erzeugen Rauschen.
• Scrollposition abgleichen: Nutze dasselbe Element oder einen Anker.
• Browser und Gerät beibehalten: Andere Engines rendern Schrift, Abstände und Farben leicht anders.
• Bei dynamischen Inhalten denselben Zeitpunkt wählen: Live-Feeds, zeitabhängige Banner und Personalisierung können sonst variieren.
• PNG verwenden: Verlustfreie Dateien eignen sich für genaue Vergleiche; JPG-Artefakte erzeugen falsche Unterschiede.

Automatisierte Abläufe wenden URL, Viewport und Einstellungen auf jede Aufnahme identisch an. Im Release- oder Monitoringprozess sollten außerdem URL, Viewport und Aufnahmedatum beim Paar gespeichert werden. So bleibt der Vergleich später nachvollziehbar.

Häufige Fehler

• Uneinheitlicher Bildausschnitt. Verschiedene Viewport-Breiten machen den Vergleich bedeutungslos.
• Den Vorher-Zustand nicht sichern. Nach dem Deployment ist er weg. Erfasse die Baseline vor der Änderung oder automatisiert fortlaufend.
• Dynamische Inhalte ignorieren. Maskiere Anzeigen, Karussells, Zeitstempel und personalisierte Bereiche.
• Beschriftungen auslassen. Kennzeichne klar mit „Vorher“ und „Nachher“ oder Datum und Versionsnummer.