Laden...
Laden...
Legen Sie zwei Bilder ab und heben Sie jeden geänderten Pixel hervor. Passen Sie den Schwellenwert an, um geringfügiges Kompressionsrauschen zu ignorieren, sehen Sie den genauen Änderungsprozentsatz und exportieren Sie den Diff als PNG.
Wählen Sie zwei Bilder aus, um sie pixelgenau zu vergleichen.
Ein Pixel-Diff-Visualizer vergleicht zwei Bilder auf Pixel-Ebene und hebt jede Position hervor, an der sich die Farbwerte unterscheiden. Es ist das visuelle Äquivalent eines Code-Diffs: Sie sehen genau, was sich zwischen zwei Screenshots, zwei Design-Exporte oder zwei Momentaufnahmen aus einem Regressionstest geändert hat. Dieses Tool läuft vollständig in Ihrem Browser unter Verwendung der HTML Canvas API. Es scannt jeden Pixel in Bild A gegen den entsprechenden Pixel in Bild B, summiert die absoluten Kanalunterschiede und malt jeden Pixel, der über Ihrem Schwellenwert liegt, in der von Ihnen gewählten Hervorhebungsfarbe. Sie erhalten auch einen Änderungsprozentsatz, sodass Sie quantifizieren können, wie sehr sich die beiden Bilder tatsächlich unterscheiden.
Ziehen Sie Bild A (die Basislinie) und Bild B (die Version, die Sie vergleichen möchten) ab oder wählen Sie sie aus. Gleiche Abmessungen werden empfohlen; nicht übereinstimmende Größen werden automatisch auf Bild A skaliert.
Änderungen hervorheben ist die Standardoption — jeder geänderte Pixel wird in Ihrer Hervorhebungsfarbe eingefärbt. Nebeneinander rendert A, B und den Diff in einem Streifen; Überlagerung stapelt B mit 50% Opazität über A.
Ziehen Sie den Schwellenwertregler nach oben, um geringfügiges Kompressionsrauschen und kleine JPEG-Artefakte zu ignorieren. 5% sind ein guter Ausgangspunkt für komprimierte Fotos; 0% erfasst jeden einzelnen Pixelunterschied.
Der Änderungsprozentsatz zeigt Ihnen, welcher Anteil der Pixel den Schwellenwert überschreitet — nützlich für Regressionstests oder Design-QA.
Klicken Sie auf Herunterladen, um den gerenderten Diff in voller Auflösung zu speichern. Nützlich für Code-Überprüfungsanhänge und Fehlerberichte.
Für jede Pixelposition p, mit Kanälen (r, g, b) aus den Bildern A und B: diff(p) = |Ar - Br| + |Ag - Bg| + |Ab - Bb| Ein Pixel wird als unterschiedlich behandelt, wenn: diff(p) > (threshold% × 765) / 100 wo 765 = 3 × 255 die maximale Kanal-Summen-Differenz ist. Das ist dasselbe L1-Distanzmaß, das von Bild-Diff-Tools wie pixelmatch und resemble.js verwendet wird, einfach als ein einzelner einstellbarer Schwellenwert ausgedrückt, anstatt pro Kanal Toleranzen.
Die L1 (Manhattan) Distanz über RGB-Kanäle ist das einfachste Maß, das sowohl Farbverschiebungen als auch Helligkeitsverschiebungen erfasst. Alpha wird ignoriert, da die meisten Diff-Anwendungsfälle (Screenshots, Foto-Regressionsprüfungen) mit undurchsichtigen Bildern arbeiten. Für Bilder mit unterschiedlichen Abmessungen wird Bild B vor dem Vergleich mit hochwertiger bilinearer Filterung auf Bild A skaliert.
Referenz: pixelmatch — pixelgenaue Bildvergleiche
| Eingaben | Diff-Ergebnis |
|---|---|
Zwei identische 1920×1080 PNGs | 0% Änderung — Diff ist vollständig dunkel Keine Pixel überschreiten den Schwellenwert; idealer Regressionstest bestanden. |
Zwei JPEGs derselben Szene mit 85% Qualität | ~1–2% mit Schwellenwert = 0 Kompressionsrauschen erzeugt winzige pixelgenaue Unterschiede; Schwellenwert auf 5% erhöhen, um sie zu ignorieren. |
Design-Export A vs B (Schaltflächenfarbe geändert) | Änderung auf das Schaltflächenrechteck beschränkt Die Hervorhebungsfarbe macht den modifizierten Bereich sofort sichtbar. |
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