Über dieses Tool
Image Diff vergleicht zwei Bilder Pixel für Pixel und hebt genau hervor, wo sie sich unterscheiden — vollständig in Ihrem Browser. Ziehen Sie einen „Vorher"-Screenshot oder ein Design-Mockup als Bild A und eine „Nachher"-Version — einen neuen Screenshot, eine umgesetzte Version desselben Designs oder eine erneut exportierte Kopie — als Bild B hinein. Haben die beiden Bilder nicht dieselbe Größe, werden beide auf eine Fläche gelegt, die groß genug für das größere Bild ist; jeder Bereich, der nur von einem Bild abgedeckt wird, zählt als Unterschied, da eine Größenänderung selbst etwas ist, das Sie erkennen möchten. Das Ergebnis ist ein Diff-Bild: Bild A wird erneut gerendert, wobei jedes veränderte Pixel in leuchtendem Magenta eingefärbt wird, zusammen mit einer laufenden Anzahl und dem Prozentsatz der abweichenden Pixel.
Das ist ein wirklich entwicklerorientierter Workflow: visuelle Regressionen erkennen, indem Sie zwei Screenshots vor und nach einer CSS- oder Komponentenänderung vergleichen, eine umgesetzte Benutzeroberfläche Pixel für Pixel gegen ihr ursprüngliches Design-Mockup prüfen, oder die subtile Blockbildung und Bänderung erkennen, die eine zweite Runde JPEG/WebP-Kompression einem bereits einmal exportierten Bild hinzufügt. Die Empfindlichkeitsschwelle steuert, wie groß eine Farbänderung sein muss, damit ein Pixel als unterschiedlich gilt — niedrigere Werte (näher an 0) markieren fast jede Änderung, einschließlich 1–2 Bit Kompressionsrauschen, während höhere Werte nur deutlich sichtbare Unterschiede markieren, was meist gewünscht ist, wenn Sie zwei Exporte desselben Ausgangsbilds vergleichen. Es wird nichts hochgeladen: Beide Bilder werden direkt auf Ihrem Gerät mit der Canvas-API dekodiert und verglichen, und auch das heruntergeladene Diff-Bild wird auf dieselbe Weise erzeugt.
Häufige Fragen
Was passiert, wenn die beiden Bilder unterschiedliche Größen haben?
Beide Bilder werden auf eine gemeinsame Leinwand platziert, die auf die Größe des größeren der beiden zugeschnitten ist, und jeder Bereich, der nur von einem der Bilder abgedeckt wird (weil das andere kleiner ist), zählt als Unterschied — dies bringt Größenabweichungen korrekt als Teil des Vergleichs zum Vorschein, anstatt ein Bild stillschweigend zu strecken, um es an das andere anzupassen (was den Vergleich verzerren und die Tatsache verbergen würde, dass sie überhaupt unterschiedlich groß sind).
Welchen Empfindlichkeitsschwellenwert sollte ich verwenden?
Ein niedriger Schwellenwert erfasst selbst winzige, subtile Unterschiede (nützlich zum Erkennen von Komprimierungsartefakten oder sehr geringfügigen Rendering-Änderungen), während ein höherer Schwellenwert nur eindeutig unterschiedliche Pixel markiert (nützlich, um bedeutende visuelle Änderungen wie verschobene Elemente oder unterschiedlichen Inhalt zu erkennen und dabei geringfügiges Anti-Aliasing-/Komprimierungsrauschen zwischen ansonsten identischen Bildern zu ignorieren). Beginnen Sie etwa in der Mitte des Bereichs und passen Sie an, je nachdem, ob Sie zu viel Rauschen sehen (erhöhen) oder echte Unterschiede verpassen (verringern).