What does the Image Compare Slider do?

Place two images side-by-side and drag a vertical handle left or right to reveal more of the 'before' or 'after' image. Useful for visualizing the result of image compression, resizing, color correction, or AI super-resolution.

Are my images uploaded anywhere?

No. Both images stay in your browser via object URLs created with URL.createObjectURL(). Nothing is sent to a server.

What image formats are supported?

Anything the browser can render — PNG, JPEG, GIF, WebP, SVG, AVIF (in modern browsers). Both images don't need to be the same format, but they should ideally have the same dimensions for the most useful comparison.

Bildvergleichs-Slider

Beforechoose file…Afterchoose file…

Upload a 'before' and 'after' image to start comparing.

Technische Details

So funktioniert der Bildvergleichs-Slider

Was das Tool macht

Der Bildvergleichs-Slider legt zwei Bilder übereinander und zeigt durch Ziehen eines vertikalen Griffs nur den Teil, den Sie sehen möchten. Wenn Sie nach links und rechts schieben, wird mehr vom „Vorher“- oder „Nachher“-Bild sichtbar, wodurch visuelle Unterschiede nebeneinander sofort deutlich werden. Dateigrößen und prozentuale Änderungen werden angezeigt, sodass Sie auch die Auswirkungen auf Byte-Ebene sehen können.

Häufige Anwendungsfälle für Entwickler

Ingenieurinnen und Ingenieure, die verlustbehaftete Bildkompression prüfen, vergleichen eine JPEG- mit einer WebP-Version derselben Quelle. Designerinnen und Designer überprüfen Tone-Mapping-, Retusche- oder Farbkorrektur-Änderungen zwischen einem Entwurf und der finalen Version. ML/AI-Ingenieurinnen und -Ingenieure visualisieren Super-Resolution-, Denoise- oder Style-Transfer-Ergebnisse im Vergleich zu ihren Eingaben. Marketing-Teams erstellen eindrucksvolle Vorher/Nachher-Demos für Landingpages.

Datenformate, Typen oder Varianten

Akzeptiert jedes Bildformat, das der Browser darstellen kann — PNG, JPEG, WebP, AVIF, GIF, SVG. Bilder bleiben über Object-URLs (URL.createObjectURL) in Ihrem Browser, es wird also nichts hochgeladen. Für den sinnvollsten Vergleich sollten beide Bilder identische Abmessungen und dasselbe Seitenverhältnis haben; wenn sie abweichen, werden beide mit object-fit: contain gerendert, sodass keines zugeschnitten wird.

Häufige Fallstricke und Sonderfälle

Der Vergleich von Bildern mit unterschiedlichen Seitenverhältnissen erzeugt auf einer Seite Letterbox-Balken. Sehr große Bilder (>50 MB) können in älteren Browsern die Drag-Interaktion verlangsamen. Der Slider legt das gesamte „Nachher“-Bild frei — wenn beide Dateien Transparenz haben, positionieren Sie den Slider über einem undurchsichtigen Bereich, sonst scheint der Seitenhintergrund durch beide Bereiche hindurch.

Wann dieses Tool statt Code verwenden

Nutzen Sie das Browser-Tool für ad-hoc Vergleiche während der Entwicklung oder für schnelle Stakeholder-Demos. In Produktions-Websites integrieren Sie dedizierte Bibliotheken wie react-compare-slider oder img-comparison-slider für Barrierefreiheit, Lazy Loading und SSR-Unterstützung; für automatisierte Batch-Qualitätsprüfungen über Hunderte von Bildern hinweg verwenden Sie SSIM/PSNR-basierte Tools wie ImageMagick `compare` oder pixelmatch.