Blog

So erstellst du ein Vorher-Nachher-Vergleichsbild

Veröffentlicht 25. Oktober 2026 · Vorher-Nachher, Vergleich, Zusammenfügen, Workflow

Ein Bild statt zwei Anhängen: Nimm beide Zustände in gleicher Größe auf, füge sie nebeneinander, beschrifte sie – und verschicke einen Vergleich, den man schnell erfasst.

Vorher-Nachher-Screenshots sind der schnellste Weg, eine Änderung zu zeigen, aber zwei lose Anhänge zwingen die Leserin, hin und her zu wechseln und sich zu merken, was sie gesehen hat. Ein einziges Bild nebeneinander erspart diese Arbeit.

Nimm beide Zustände gleich auf

Der Vergleich ist nur fair, wenn die beiden Bilder vergleichbar sind:

• Gleicher Viewport und Zoom. Ein Vorher bei 100 % und ein Nachher bei 80 % lässt Abstände und Schriftgrößen lügen.
• Gleicher Ausschnitt. Erfasse dieselbe Region, keinen engeren Ausschnitt nur des geänderten Teils.
• Gleiche Fenstergröße und gleiches Theme. Ein Nachher im dunklen Modus neben einem Vorher im hellen vergleicht zwei Änderungen auf einmal.
• Gleicher Zustand. Hat die Seite Hover- oder Fokuseffekte, halte den Mauszeiger aus beiden Aufnahmen heraus.

Bei responsiven Layouts mach ein Paar pro Breakpoint, statt Breiten zu mischen.

Schneide auf dasselbe Seitenverhältnis zu

Öffne die erste Aufnahme im Bildeditor von InSnap und schneide sie auf die Region zu, die du vergleichen willst. Wende denselben Zuschnitt auf das zweite Bild an und nutze die Größenanzeige, damit die Pixel zusammenpassen. Unterscheiden sich die Layouts in der Höhe, schneide auf das kürzere zu, statt mit leerem Raum aufzufüllen.

Füge sie nebeneinander zusammen

Das Panel Zusammenfügen im Bildeditor legt mehrere Bilder auf eine Fläche (Pro):

1. Wähle Zusammenfügen in der linken Leiste.
2. Importiere zuerst das Vorher-Bild, dann das Nachher-Bild.
3. Zieh sie in die richtige Reihenfolge und richte ihre Oberkanten aus.
4. Lass einen gleichmäßigen Abstand zwischen ihnen; ein paar Pixel Abstand wirken wie ein bewusstes Paar.
5. Führe zusammen, wenn die Anordnung stimmt, und setze dann Beschriftungen.

Sind die beiden Bilder unterschiedlich groß, skaliere das größere passend oder schneide beide vor dem Zusammenfügen auf dasselbe Seitenverhältnis zu. Ein Größenunterschied ist der häufigste Grund, warum ein Vergleich „daneben“ wirkt.

Beschrifte die Seiten, nicht jedes Detail

Nutze Text, um „Vorher“ und „Nachher“ – oder „Aktuell“ und „Vorschlag“ – in derselben Ecke jeder Seite hinzuzufügen. Halte die Beschriftungen kurz und im Stil gleich.

Annotiere dann nur die Unterschiede, auf die es ankommt:

• Nummern, wenn es mehrere Änderungen gibt: 1 für den Abstand, 2 für den neuen Button.
• Formen, um den geänderten Bereich zu umrahmen.
• Pfeile nur, wenn die Richtung nicht offensichtlich ist.
• Unkenntlichmachen für Namen, E-Mails und interne URLs in beiden Bildern.

Annotiere dasselbe Detail nicht auf beiden Seiten; markiere es einmal, auf der Seite, wo es sich geändert hat.

Exportiere passend zum Ziel

• Chat oder E-Mail: Ein einzelnes PNG ist am leichtesten zu lesen und übersteht die meisten Clients.
• Folien: Triff das Seitenverhältnis des Foliensatzes und nutze eine Kulisse, wenn die Bilder dunkel sind.
• Dokumentation: eine einheitliche Breite für jedes Vergleichsbild im Satz.

Ist die Datei groß, skaliere die Retina-Aufnahme beim Sichern auf 1x; ein Vergleich braucht meist keine volle Pixeldichte.

Eine Checkliste für den Vergleich

Häufige Fragen

Brauche ich Pro, um zwei Screenshots zusammenzufügen?

Ja, Zusammenfügen ist eine Pro-Funktion. Eine kostenlose Alternative ist, beide Screenshots für den eigenen Vergleich nebeneinander auf dem Bildschirm anzuheften, aber das exportierte Einzelbild braucht das Zusammenfügen-Panel im Editor.

Was, wenn die beiden Screenshots unterschiedlich groß sind?

Schneide beide auf dasselbe Seitenverhältnis zu oder skaliere das größere Bild vor dem Zusammenfügen auf die Größe des kleineren. Gleicher Maßstab ist wichtiger, als jedes Pixel zu erhalten.

Kann ich drei Versionen vergleichen?

Ja. Füge sie der Reihe nach zusammen – zum Beispiel alt, aktuell und Vorschlag –, mit demselben Abstand und Beschriftungsstil. Sind die Unterschiede fein, liest sich ein Zweierpaar pro Änderung leichter als ein breiter Streifen.

Mehr aus dem Blog