Bild-Vergleichstool
Vergleichen Sie zwei Bilder Pixel für Pixel und sehen Sie sofort, was sich geändert hat — mit einem hervorgehobenen Differenzbild und einer prozentualen Zusammenfassung, alles lokal in Ihrem Browser verarbeitet.
🔒 Lokal in Ihrem Browser verarbeitet
Loading…
So funktioniert's
- Ziehen Sie Ihr Originalbild in die "Vorher"-Ablagefläche (oder klicken Sie, um es auszuwählen).
- Ziehen Sie das Bild, mit dem Sie es vergleichen möchten, in die "Nachher"-Ablagefläche (oder klicken Sie, um es auszuwählen).
- Klicken Sie auf "Bilder Vergleichen" — die beiden Bilder werden vollständig in Ihrem Browser Pixel für Pixel verglichen.
- Prüfen Sie das hervorgehobene Differenzbild und den Prozentsatz abweichender Pixel und laden Sie das Differenzbild bei Bedarf herunter.
Funktionen
- Pixelgenauer Vergleich mit der Open-Source-Bibliothek pixelmatch
- Hebt jeden abweichenden Pixel vor einem abgedunkelten Hintergrund hervor, damit Änderungen leicht erkennbar sind
- Zeigt die genaue Anzahl und den Prozentsatz abweichender Pixel
- Kennzeichnet Bilder mit unterschiedlichen Abmessungen klar, statt sie fehlerhaft zu vergleichen
- 100% clientseitig — Ihre Bilder werden nie auf einen Server hochgeladen
Häufig gestellte Fragen
Wofür ist dieses Tool nützlich?
Es eignet sich hervorragend für visuelle Regressionstests (Prüfen, ob sich die Benutzeroberfläche zwischen Builds unerwartet verändert hat), den Vergleich zweier Design- oder Screenshot-Versionen, das Aufspüren subtiler Bearbeitungen in einem Foto oder die Überprüfung, ob ein Bild ohne sichtbaren Qualitätsverlust neu komprimiert wurde.
Warum müssen meine beiden Bilder dieselben Abmessungen haben?
Der Vergleich erfolgt Pixel für Pixel, wobei jeder Pixel des ersten Bildes dem Pixel an derselben Position im zweiten Bild zugeordnet wird. Bei unterschiedlichen Bildgrößen gibt es keine sinnvolle 1:1-Zuordnung, weshalb das Tool einen klaren Fehler anzeigt, statt nicht übereinstimmende Daten zu vergleichen.
Wie wird das Differenzbild erzeugt?
Das Tool nutzt pixelmatch, eine Open-Source-Bibliothek für Pixelvergleiche. Übereinstimmende Bereiche werden abgedunkelt, und Pixel, die über einen kleinen, Anti-Aliasing-berücksichtigenden Schwellenwert hinaus abweichen, werden in einer leuchtenden Farbe hervorgehoben, damit sie sofort auffallen.
Werden meine Bilder irgendwohin hochgeladen?
Nein. Beide Bilder werden vollständig in Ihrem Browser mithilfe der Canvas-API geladen und verglichen. Es wird nichts an einen Server gesendet.
Warum können zwei visuell identische Bilder trotzdem einige abweichende Pixel zeigen?
Kleine Unterschiede bei Komprimierung, Farbprofilen oder Neucodierung können einzelne Pixelwerte leicht verändern, selbst wenn die Bilder für das Auge identisch aussehen. Ein sehr geringer Prozentsatz abweichender Pixel deutet meist auf diese Art von Rauschen hin und nicht auf eine echte visuelle Änderung.