Dieser Beitrag enthält Affiliate-Links. Wenn du darüber kaufst, erhalten wir möglicherweise eine Provision, ohne Mehrkosten für dich. Vollständiger Hinweis →
📸 Screenshots Oktober 2026·5 Min. Lesezeit

Vorher-Nachher-Bild erstellen: zwei Screenshots oder Fotos nebeneinander vergleichen (PNG oder PDF)

Zeig die Veränderung auf einen Blick, statt Leute zwischen zwei Dateien hin und her klicken zu lassen. So legst du zwei Bilder nebeneinander oder übereinander und speicherst das Ergebnis.

Zwei Versionen derselben Seite, eine überladene mit der Beschriftung Vorher und eine aufgeräumte mit Nachher, nebeneinander, darunter die Exportformate PNG, JPG, WebP und PDF

Um ein Vorher-Nachher-Bild zu erstellen, öffne das erste Bild im Editor der kostenlosen Erweiterung Scrollshot (aufnehmen oder auf Hochladen klicken), klicke auf Vorher / Nachher, wähle Aktuelles Bild als „Vorher“ verwenden und bearbeite dann das Bild oder klicke auf Nachher hochladen, um ein zweites zu holen. Drück Fertig, wähle Nebeneinander, Übereinander oder Kompakt und exportiere es als PNG, JPG, WebP oder PDF, oder kopiere es. Bilder gehen rein, ein fertiger Vergleich kommt raus. Alles bleibt in deinem Browser und nichts wird hochgeladen.

Warum ein Vergleichsbild besser ist als zwei einzelne Dateien

Du hast das Layout repariert, zwei Kilo abgenommen oder endlich den Gartenzaun gestrichen. Jetzt schickst du zwei Bilder, und dein Gegenüber muss hin und her klicken und raten, was sich geändert hat. Ein Vorher-Nachher-Bild legt beide in einen Rahmen, und der Unterschied ist in einer Sekunde klar. Es passt außerdem als ein Bild in eine Nachricht, eine Folie oder einen Bericht, und das geht viel schwerer verloren als zwei.

So erstellst du ein Vorher-Nachher-Bild, Schritt für Schritt

  1. Installiere Scrollshot. Hol es dir im Chrome Web Store. Es ist kostenlos und braucht kein Konto.
  2. Öffne dein erstes Bild im Editor. Nimm eine Seite auf (ganze Seite, sichtbarer Bereich, Ausschnitt oder Element) oder klicke auf Hochladen und wähle ein Foto oder einen Screenshot von deinem Computer.
  3. Klicke auf Vorher / Nachher im linken Bereich des Editors.
  4. Entscheide, was „Vorher“ ist. Wähle Aktuelles Bild als „Vorher“ verwenden, um es so zu lassen, oder Zuerst das „Vorher“ bearbeiten, wenn du es vor dem Vergleich noch etwas ändern willst.
  5. Erstelle das „Nachher“. Bearbeite dasselbe Bild (Pfeile, Unkenntlichmachen, Text, ein Hintergrund) oder klicke auf Nachher hochladen ↑ und wähle ein zweites Bild. Ein kleines Banner oben zeigt, in welchem Schritt du bist.
  6. Klicke auf Fertig ✓. Das Fenster „Vorher / Nachher anordnen“ öffnet sich mit einer Live-Vorschau.
  7. Wähle das Layout. Nimm Nebeneinander, Übereinander oder Kompakt und schalte Beschriftungen und Trennlinie an oder aus.
  8. Exportiere es. Klicke auf Kopieren, um es direkt in einen Chat einzufügen, oder speichere es als PNG, JPG, WebP oder PDF. In Verlauf speichern legt es in deiner Galerie ab, im Ordner deiner Wahl.

Nebeneinander, übereinander oder kompakt: welches Layout passt

  • Nebeneinander. Die zwei Bilder stehen in gleicher Höhe nebeneinander. Am besten für breite Bilder, Webseiten und Fotos.
  • Übereinander. Eines über dem anderen in gleicher Breite. Am besten für hohe Bilder, Handy-Screenshots und Chats, in denen ein breites Bild gequetscht wird.
  • Kompakt. Beide Bilder schrumpfen und stehen nebeneinander auf einer 16:9-Fläche. Praktisch für Folien, Video-Vorschaubilder und überall, wo ein breiter Rahmen am besten passt.
  • Beschriftungen. Die Wörter BEFORE und AFTER werden auf die Bilder gezeichnet. Schalte sie aus, wenn du lieber eigene Worte nimmst.
  • Trennlinie. Eine dünne Linie zwischen den beiden Bildern, durchgezogen oder gestrichelt.

Ein kleiner Tipp: Die zwei Bilder müssen nicht gleich groß sein. Scrollshot richtet sie auf eine gemeinsame Höhe (nebeneinander) oder Breite (übereinander) aus, du kannst also einen kleinen Screenshot mit einem großen Foto vergleichen, ohne vorher die Größe zu ändern.

PNG, JPG, WebP oder PDF: was exportieren

PNG ist am schärfsten und die beste Wahl für Screenshots mit Text. JPG liefert eine kleinere Datei und passt zu Fotos. WebP ist die kleinste der drei. PDF legt den Vergleich auf eine einzige Seite, praktisch zum Mailen, Drucken oder für Kunden, ist aber ein Bild des Vergleichs, die Wörter darin lassen sich also nicht markieren. Kopieren überspringt die Datei ganz und fügt das Bild direkt in eine Nachricht oder ein Dokument ein.

Wer Vorher-Nachher-Bilder macht

  • Alle, die Fortschritte festhalten, bei Fitness, einer Renovierung oder einem Garten, der endlich fertig wurde.
  • Webdesigner und Entwickler, die ein altes Design neben dem neuen zeigen, oder einen Fehler neben seiner Korrektur.
  • Alle, die retuschieren oder bearbeiten, und Original und Ergebnis zusammen zeigen wollen.
  • Lehrer und Autoren von Anleitungen, die den falschen Weg neben dem richtigen zeigen.
  • Support-Teams, die zeigen, was ein Kunde sieht, neben dem, was er sehen sollte.

Kombiniere es mit den anderen Werkzeugen: Pfeile und nummerierte Schritte einfügen im Nachher, damit die Veränderung nicht zu übersehen ist, oder zuerst Privates unkenntlich machen in beiden Bildern.

Gut zu wissen, bevor du loslegst

  • Nur Bilder gehen rein, keine PDF-Dateien. Hochladen nimmt Bilddateien wie PNG, JPG oder WebP. PDF ist eine Export-, keine Importoption.
  • Zwei Bilder pro Vergleich. Ein Vorher und ein Nachher. Für mehr machst du mehrere Vergleiche.
  • Die Beschriftungen BEFORE und AFTER sind englisch. Schalte Beschriftungen aus, wenn du eigene Worte willst, und füge sie mit dem Werkzeug Text hinzu.
  • Zuschnitt-Vorlagen und Speichern sind in den Schritten gesperrt. Sie kommen zurück, wenn du das Vorher / Nachher beendest oder abbrichst.
  • Alles ist kostenlos. Vorher / Nachher und alle Exportformate brauchen kein Upgrade und kein Konto.
  • Chromes eigene Seiten und der Chrome Web Store lassen sich nicht aufnehmen. Probier es auf einer normalen Website.

FAQ

Öffne das erste Bild im Scrollshot-Editor, klicke auf Vorher / Nachher, wähle, das aktuelle Bild als Vorher zu verwenden, und bearbeite es dann oder lade ein zweites Bild als Nachher hoch. Klicke auf Fertig, wähle ein Layout und exportiere es als PNG, JPG, WebP oder PDF.

Ja. Wähle das Layout Nebeneinander, und die zwei Bilder stehen in gleicher Höhe nebeneinander. Übereinander legt eines über das andere, und Kompakt bringt beide auf eine 16:9-Fläche.

Nein. Hochladen nimmt Bilddateien wie PNG, JPG und WebP. Den fertigen Vergleich kannst du als PDF exportieren, aber ein PDF lässt sich nicht als Bild laden.

Nein. Scrollshot richtet sie auf eine gemeinsame Höhe oder Breite aus, ein kleiner Screenshot und ein großes Foto passen also zusammen.

Ja. Schalte Beschriftungen im Anordnen-Fenster aus. Eigene Worte kannst du mit dem Werkzeug Text hinzufügen, bevor du auf Fertig klickst.

Ja. Vorher / Nachher und alle Exportformate sind kostenlos, ohne Konto.

Nein. Scrollshot arbeitet lokal in deinem Browser, deine Bilder verlassen also nie deinen Computer.

Scrollshot logo

Scrollshot — Erfasse genau, was du brauchst

Gebaut von GetPlugzz. Nur lokale Verarbeitung: nichts wird hochgeladen, nichts wird getrackt.

INSTALLIEREN

💺 Gönn deinem Rücken eine Pause, nicht nur dem Bildschirm!

Wenn du Stunden am Computer verbringst, programmierst, gestaltest oder surfst, trägt deine Wirbelsäule die Last.

ProtoArc EC200 Pro ergonomischer Bürostuhl

⌨️ Vergiss das Tippen auf dem Handydisplay!

Arbeite von überall mit dieser cleveren faltbaren Tastatur. Das ergonomische Design schont deine Hände, und die Faltmechanik spart Platz.

ProtoArc XK04 faltbare ergonomische Tastatur

🖱️ Handgelenkschmerzen nach 8 Stunden?

Eine ergonomische vertikale Maus mit 58° bringt deine Hand zurück in eine natürliche Haltung und senkt die Muskelermüdung spürbar.

ProtoArc EM11 NL ergonomische vertikale Maus

Das ist ein bezahlter Link. Wenn du darüber kaufst, erhalten wir möglicherweise eine Provision, ohne Mehrkosten für dich. Vollständiger Hinweis →