Bilder Vergleichen Online
Kostenloser Bildvergleich — nebeneinander, Vorher/Nachher-Slider, Pixel-Diff-Highlight und Overlay. 100% lokal im Browser, kein Upload, keine Anmeldung.
Aktualisiert Mai 2026
Geprüft von Rafael Duarte
So funktioniert's
Vier Vergleichsmodi, kein Upload auf einen Server
1. Beide Bilder hochladen
Bild A ist das "Vorher", Bild B das "Nachher". Unterstützt werden JPG, PNG, WebP, GIF, SVG und AVIF, jeweils bis 50 MB.
2. Vergleichsmodus wählen
Vorher/Nachher-Regler, Nebeneinander-Ansicht, Pixel-Diff oder Overlay mit einstellbarer Deckkraft.
3. Auswerten und exportieren
Passe Schwellenwert und Farbe im Diff-Modus an, oder die Deckkraft im Overlay. Lade die Diff-Karte als PNG herunter.
Was dieses Tool kann
Pixelgenauer Vergleich mit wahrnehmungsbasierter Farbdistanz
Diff mit YIQ-Algorithmus
Wahrnehmungsbasierte Farbdistanz, die abbildet, wie das menschliche Auge Unterschiede tatsächlich erkennt — kein simpler Byte-Vergleich.
Analyse-Panel
Ähnlichkeit in Prozent, Anzahl abweichender Pixel und Gesamtzahl der verglichenen Pixel in Echtzeit.
Einstellbarer Schwellenwert
Von JPEG-Kompressionsrauschen bis zu ausschließlich echten Änderungen — du bestimmst die Empfindlichkeit.
100% im Browser
Beide Bilder werden lokal über die Canvas API verarbeitet — nichts wird auf einen Server hochgeladen.
Lupe zur Detailprüfung
Aktiviere die Lupe, um den Bereich unter dem Mauszeiger 2,5-fach zu vergrößern — praktisch, um Details zu prüfen, ohne den Modus zu wechseln.
Zoom und Vollbildansicht
Zoome von 50% bis 400% und öffne die Vollbildansicht, um Details mit mehr Platz zu inspizieren.
Die vier Vergleichsmodi
Wann du das brauchst
Die häufigsten Anwendungsfälle unter den Nutzern
Visuelle Regressionstests
Vergleiche Screenshots einer Oberfläche vor und nach einem Deployment — selbst kleinste Abweichungen werden auf Pixelebene erkannt.
Kontrolle von Fotoretuschen
Nutze den Regler, um Änderungen zwischen Rohentwurf und finalem Export sichtbar zu machen.
Review von Design-Iterationen
Lade zwei Figma-Exporte hoch und sieh genau, was sich zwischen den Versionen verändert hat.
Kontrolle der Kompressionsqualität
Vergleiche das Original-PNG mit einem JPEG- oder WebP-Export, um Bereiche mit Qualitätsverlust zu erkennen.
Echtheitsprüfung
Vergleiche ein verdächtiges Bild mit der Originalreferenz, um Duplikate, Bearbeitung oder Manipulation aufzudecken.
Inspektion großer Bilder mit synchronem Scrollen
Zoome im Nebeneinander-Modus hinein und lasse "Sync scroll" aktiviert, um beide Bilder gleichzeitig zu scrollen — ideal für komplette App-Screenshots oder hochauflösende Mockups.
Häufige Fehler beim Bildvergleich
98% Ähnlichkeit für nahezu identisch halten
Bei einem Bild mit 1000×1000 Pixeln sind das immer noch 20.000 abweichende Pixel — mehr, als es auf den ersten Blick scheint.
Bilder mit stark unterschiedlichen Abmessungen vergleichen
Diff und Overlay funktionieren am besten bei gleichen Abmessungen — bei stark abweichenden Größen ist der Nebeneinander-Modus die bessere Wahl.
Schwellenwert zu niedrig eingestellt und JPEG-Rauschen erfasst
Werte nahe 0 erkennen sogar Kompressionsartefakte — der Standardwert 0,10 ignoriert dieses Rauschen.
Diff zeigt das ganze Bild statt nur die Unterschiede
Standardmäßig zeigt die Diff-Karte das komplette Bild mit hervorgehobenen abweichenden Pixeln. Aktiviere "Nur Unterschiede anzeigen", um ausschließlich die veränderten Pixel vor neutralem Hintergrund zu sehen.
Upload von Dateien über 50 MB wird abgelehnt
Jedes Bild hat ein Limit von 50 MB — größere Dateien führen zu einer Fehlermeldung. Komprimiere das Bild oder verringere die Auflösung vor dem Hochladen.
Synchronität beim Scrollen großer Bilder im Nebeneinander-Modus verlieren
Bei hohem Zoom bekommt jede Canvas ihre eigene Scrollleiste — ohne Synchronisation verlierst du den Bezug zwischen A und B. Der standardmäßig aktivierte Button "Sync scroll" hält beide Scrollpositionen identisch; deaktiviere ihn nur, wenn du jedes Bild unabhängig navigieren möchtest.
Warum dieser Bildvergleich
Vier Vergleichsmodi in einem Tool — Regler, Nebeneinander, Pixel-Diff und Overlay — decken alles ab, von der schnellen visuellen Kontrolle bis zur technischen Pixel-für-Pixel-Analyse.
Der YIQ-Algorithmus zur wahrnehmungsbasierten Farbdistanz bildet ab, wie das menschliche Auge Unterschiede tatsächlich wahrnimmt, statt einen binären Byte-Vergleich anzustellen, der schon irrelevantes Kompressionsrauschen als Unterschied melden würde.
Neben der visuellen Kontrolle eignet sich das Tool für Echtheitsprüfungen und die Kontrolle der Kompressionsqualität — mit einem großzügigen Limit von 50 MB pro Bild und ganz ohne den Server-Upload, den die meisten vergleichbaren Tools verlangen.
Häufig gestellte Fragen
Nein. Beide Bilder werden über die File API geladen, und alle Modi — einschließlich der Diff-Analyse — laufen vollständig im Browser über die Canvas API.
Weiterführende Quellen
Vollständige Referenz zur Canvas API, die für die pixelgenaue Bildbearbeitung genutzt wird.
Die Open-Source-Bibliothek für Pixelvergleiche, die den Diff-Modus antreibt.
Erklärung des YIQ-Farbraums, der bei der Berechnung der wahrnehmungsbasierten Pixeldistanz im Diff-Modus verwendet wird.
Verwandte Tools
- Farbkontrast-Prüfer Design Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
- Farbkonverter & Generator Design Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
- Farbpaletten-Generator Design Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
- Farbpalette aus Bild Design Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
- CSS Box Shadow Generator — Neumorphismus, Glasmorphismus & Tailwind Design Kostenloser CSS Box Shadow Generator mit Live-Vorschau. Erstelle Schatten, Neumorphismus- und Glasmorphismus-Effekte. Exportiere zu CSS, Tailwind oder CSS-Variablen.
