Bildvergleich

Zwei Bilder laden und mit einem Zieh-Schieberegler oder Nebeneinander-Ansicht vergleichen. Perfekt für Vorher/Nachher-Bearbeitungen. Kein Upload.

So funktioniert Bildvergleichs-Schieberegler

Image Comparison Slider lässt Sie zwei Bilder nebeneinander laden und einen vertikalen Teiler ziehen, um mehr von einem Bild und weniger vom anderen zu zeigen. Dieses Vorher-Nachher-Layout ist ein direkter, reibungsarmer Weg, um den Unterschied zwischen zwei Versionen eines Bildes zu zeigen. Beide Bilder werden von Ihrer lokalen Festplatte über die File-API geladen und vom Browser auf dem Bildschirm dargestellt; nichts wird auf einen Server hochgeladen.

Der Schieberegler verwendet einen CSS-clip-path-Ansatz, sodass der Übergang zwischen den beiden Bildern immer pixelgenau ausgerichtet ist und keine Überblendung oder Interpolation an der Grenze stattfindet. Sie können auch in eine Splitscreen-Ansicht wechseln, die die beiden Bilder in festen linken und rechten Panels zeigt. Das Tool ist nützlich zum Vergleichen von Fotobearbeitungen, Komprimierungsergebnissen, Design-Iterationen oder beliebigen zwei Bildern, bei denen Sie Unterschiede klar erkennen müssen.

Verfasst von Bastien Sulyan

So wird Bildvergleichs-Schieberegler verwendet, Schritt für Schritt

Ziehen Sie das erste Bild (die Vorher-Version) auf den linken Upload-Bereich.
Ziehen Sie das zweite Bild (die Nachher-Version) auf den rechten Upload-Bereich.
Ziehen Sie den Teiler links und rechts, um jeweils mehr von einem Bild zu zeigen.
Wechseln Sie zur Splitscreen-Ansicht, um beide Bilder in festen Panels zu sehen, wenn Sie einen statischen Vergleich bevorzugen.
Verwenden Sie die Vollbild-Schaltfläche, um den Vergleich für eine detaillierte Betrachtung zu vergrößern.

Häufige Anwendungsfälle

Ein Fotograf vergleicht den Original-RAW-Export mit einer bearbeiteten Version, um zu beurteilen, wie stark die Bearbeitung das Bild verändert hat.
Ein Entwickler prüft ein Vorher-Nachher-Paar komprimierter Bilder, um festzustellen, ob der Qualitätsverlust bei einem bestimmten Komprimierungsgrad akzeptabel ist.
Eine UX-Designerin präsentiert ein UI-Redesign, indem sie den alten Interface-Screenshot links und den neuen rechts platziert, für eine Stakeholder-Prüfung.
Eine Content-Redakteurin prüft, ob eine Bildbearbeitung (Farbkorrektur, Zuschnitt) zwischen einem Thumbnail und einer Vollversion konsistent ist.

Häufig gestellte Fragen

Müssen die beiden Bilder die gleiche Größe haben?

Das Tool funktioniert am besten, wenn beide Bilder die gleichen Abmessungen haben, da der Schieberegler sie exakt überlagert. Wenn die Bilder unterschiedlich groß sind, skaliert das Tool sie auf eine gemeinsame Anzeigegroße. Bei unterschiedlichen Seitenverhältnissen kann es zu leichter Fehlausrichtung an den Rändern kommen.

Werden die Bilder irgendwo hingeschickt, damit der Vergleich funktioniert?

Nein. Beide Bilder werden von Ihrem Dateisystem über die File-API geladen und in Canvas-Elemente in Ihrem Browser gezeichnet. Der Vergleich ist eine clientseitige Render-Operation. Keines der Bilder verlässt Ihr Gerät.

Kann ich Bilder von zwei verschiedenen URLs statt von lokalen Dateien vergleichen?

Das aktuelle Tool akzeptiert nur lokale Dateien. Das Laden von Bildern von externen URLs würde den Browser zwingen, sie abzurufen, und wäre CORS-Beschränkungen unterworfen, die viele Bild-Hosts nicht erlauben.

Gibt es eine maximale Bildgröße, die der Vergleich verarbeiten kann?

Die Grenze setzt der Canvas-Arbeitsspeicher Ihres Browsers. Bilder bis zu etwa 20 Megapixel werden auf den meisten Desktop-Geräten ohne Probleme verarbeitet. Sehr große Bilder können das Rendering verlangsamen oder auf Low-End-Hardware einen Speicherfehler verursachen.

Kann ich einen Screenshot einer bestimmten Schieberegler-Position speichern?

Das Screenshot-Tool Ihres Betriebssystems (oder die Screenshot-Funktion in den Browser-DevTools) ist der einfachste Weg, eine bestimmte Schieberegler-Position zu erfassen. Die Vergleichsansicht selbst hat keine eingebaute Export-Schaltfläche für ein zusammengeführtes Bild.