Loading...
Loading...
Lade zwei Bilder hoch und enthülle den Unterschied mit einem ziehbaren Trennstrich, lege sie nebeneinander oder blende eines über das andere — nützlich für Designüberprüfungen, Retusche-Durchgänge und Vorher/Nachher-Fotografie.
Ein Bildvergleichsschieber ermöglicht es dir, zwei Bilder übereinander zu legen und eines oder das andere durch Ziehen eines Trennstrichs über den Rahmen sichtbar zu machen. Es ist das Standardwerkzeug für jede 'Vorher vs. Nachher'-Visualisierung: Fotoretusche-Durchgänge, Neugestaltungen einer Benutzeroberfläche, zwei Renderings derselben Szene, zwei Farbgrade desselben Shots, Build A vs. Build B eines 3D-Modells. Der Nebeneinander-Modus zeigt beide gleichzeitig für Proportionsvergleiche. Der Überblendungsmodus wechselt zwischen den beiden mit einem Opazitätsschieber, was nützlich ist, um subtile Ausrichtungsverschiebungen oder Farbtonunterschiede zu erkennen, die ein harter Trennstrich verbergen würde. Alles geschieht lokal — beide Bilder bleiben auf deinem Gerät, der Vergleich wird im Browser gerendert und nichts wird hochgeladen.
Ziehe eine JPG-, PNG-, WebP-, GIF-, BMP- oder AVIF-Datei in den Vorher-Slot oder klicke, um von deinem Gerät auszuwählen. Das Bild wird im Panel gerendert und der Arbeitsbereich erscheint darunter.
Ziehen Sie das zweite Bild in den Nachher-Slot. Für die besten Ergebnisse sollten beide Bilder die gleichen Abmessungen haben — der Vergleichscontainer sperrt sich auf das Seitenverhältnis des ersten Bildes, das Sie laden.
Der Schieberegler legt die beiden Bilder übereinander mit einem ziehbaren Trennstrich. Nebeneinander platziert sie in zwei Spalten. Der Überblendungsmodus blendet zwischen ihnen mit einem Opazitätsregler — nützlich, um Ausrichtungsabweichungen zu erkennen.
Im Schieberegler-Modus ziehen Sie überall im Vergleichsbereich, um den Trennstrich zu bewegen. Wechseln Sie den Trennstrich zu vertikal, wenn Ihre Bilder von oben nach unten verglichen werden, anstatt von links nach rechts. Im Überblendungsmodus ziehen Sie den Opazitätsregler für Nachher.
Verwenden Sie Tauschen, um A und B umzudrehen, ohne sie erneut hochzuladen. Zurücksetzen löscht beide Bilder und stellt den Arbeitsbereich auf die Standardwerte zurück. Laden Sie jederzeit neue Dateien, indem Sie sie auf den Slot ziehen — es ist nicht notwendig, zuerst zurückzusetzen.
1. Beide Bilder werden mit object-fit: contain in einem seitenverhältnisgesperrten Container gerendert. 2. Das Nachher-Bild sitzt in einer absolut positionierten Überlagerung. 3. Ein CSS clip-path: inset(0 [100 - position]% 0 0) zeigt nur die linke Seite der Überlagerung. 4. Der vertikale Modus tauscht die inset-Achse: clip-path: inset(0 0 [100 - position]% 0). 5. Pointer-Events aktualisieren die Position basierend auf dem Offset des Cursors innerhalb des begrenzenden Rechtecks des Containers. 6. Der Überblendungsmodus überspringt den clip-path und animiert einfach die Opazität von 0 auf 1 im Nachher-Bild.
Die Verwendung von clip-path hält beide Bilder in voller Qualität ohne erneutes Codieren der Leinwand — was Sie sehen, ist die Quelldatei pixelgenau, nur maskiert. Die Drag-Verarbeitung erfasst pointermove im Fenster, sodass der Trennstrich weiterhin verfolgt, selbst wenn der Cursor den Vergleichsbereich während des Ziehens verlässt. Die Sperrung des Seitenverhältnisses bedeutet, dass der Container mit der Seitenbreite skaliert, ohne die Bilder jemals zu verzerren, und object-fit: contain behandelt elegant den Fall, in dem die beiden Bilder leicht unterschiedliche Abmessungen haben.
Referenz: MDN — clip-path
| Anwendungsfall | Bester Modus |
|---|---|
Foto-Retusche-Pass (Haut, Himmel-Ersatz, Farbkorrektur) | Schieberegler — ziehen Sie den Trennstrich über den Rahmen, um genau zu sehen, wo die Änderungen vorgenommen wurden. Halten Sie beide Dateien in den gleichen Abmessungen, damit die Trennlinie sinnvoll bleibt. |
Web-Redesign — alte Layouts vs. neue Layouts Screenshots | Schieberegler für Hero-Sektionen, nebeneinander, wenn das Scrollen wichtig ist. Machen Sie beide Screenshots bei der gleichen Viewport-Breite, sonst wird der Vergleich nicht fair. |
Zwei Renderings derselben 3D-Szene mit unterschiedlicher Beleuchtung | Überblendungsmodus — blenden Sie zwischen ihnen, um subtile GI- oder Schattenabweichungen zu erkennen. Der Überblendungsmodus ist auch großartig, um zu erkennen, wo ein Denoiser Details geändert hat. |
Screenshot eines Fehlermeldungsberichts vs. erwartetes Ergebnis | Nebeneinander — Ingenieure können beide gleichzeitig sehen, ohne zu scrollen. Fügen Sie den Schieberegler oben im Problemthread für den 'Reveal'-Moment hinzu. |
Karte oder Diagramm mit zwei Datenzuständen (März vs. April) | Schieberegler — ziehen Sie über das Diagramm, um zu sehen, welche Regionen sich geändert haben. Der vertikale Trennstrich funktioniert gut für geografische Karten, die Nord vs. Süd vergleichen. |
Schneiden Sie das Motiv aus jedem Foto mit KI auf dem Gerät aus – kein Upload erforderlich.
Verkleinern Sie JPG-, PNG- oder WebP-Dateien in Ihrem Browser mit einem interaktiven Qualitätsregler.
Passen Sie Fotos im Browser an, filtern, drehen und zuschneiden — keine Uploads, kein Wasserzeichen.
Erstelle Memes und Screenshot-Collagen mit echten Ebenen — einfügen, ziehen, zuschneiden, beschriften, exportieren.
Zuletzt aktualisiert: