Bild-Diff-Checker

Sie haben eine CSS-Optimierung vorgenommen und möchten genau wissen, was sich geändert hat? Vergleichen Sie zwei Screenshots für eine visuelle QA-Regressionsprüfung? Sie fragen sich, was sich zwischen zwei exportierten Versionen desselben Fotos tatsächlich geändert hat? Das Hin- und Herscrollen zwischen zwei Bildern und das Suchen nach Unterschieden ist langsam und unzuverlässig – dieses Tool überlagert die beiden und zeigt Ihnen jedes geänderte Pixel in einem Bild an.

Beim Vergleich handelt es sich um echte Pixeldifferenz-Mathematik, die gleiche Algorithmenfamilie, die auch von Tools wie Pixelmatch verwendet wird: Jedes Pixel beider Bilder wird von RGB in den YIQ-Farbraum konvertiert (Y = Luma, I und Q = die NTSC-Chrominanzachsen) und der euklidische Abstand zwischen den beiden YIQ-Punkten wird berechnet. Dieser Abstand wird mit einem durch den Empfindlichkeitsregler festgelegten Schwellenwert verglichen. Erhöhen Sie die Empfindlichkeit, um subtile Farbverschiebungen zu erfassen, verringern Sie sie, um Komprimierungsrauschen zu ignorieren und sich nur um offensichtliche Änderungen zu kümmern.

Ein naiver Vergleich pro Pixel würde jede geglättete Kante als „anders“ aufleuchten lassen, selbst wenn sich nichts Wesentliches geändert hat, da durch die Glättung eine Handvoll Randpixel um einige Schattierungen verschoben werden. Dieses Tool führt bei beiden Bildern eine echte Anti-Aliasing-Heuristik aus: Ein Pixel wird nur dann als echter Unterschied behandelt, wenn er NICHT in einem Glättungsverlauf liegt – konkret, wenn seine eigene 3x3-Nachbarschaft in einem der Quellbilder nicht bereits sowohl ein helleres als auch ein dunkleres Pixel als es selbst enthält, was eher der Fingerabdruck einer AA-geglätteten Kante als der tatsächliche Inhalt ist.

Laden Sie Bild A und Bild B hoch, passen Sie bei Bedarf die Empfindlichkeit an und klicken Sie auf „Ausführen“. Sie erhalten einen genauen Prozentsatz der Pixel, die sich unterscheiden, sowie ein Diff-Bild, in dem jede echte Änderung in hellem Magenta über einer abgeblendeten Version des Originals hervorgehoben ist – laden Sie es herunter und hängen Sie es direkt an Ihren Fehlerbericht oder Ihre QA-Notizen an. Beide Bilder müssen die gleichen Abmessungen haben; Ist dies nicht der Fall, teilt Ihnen das Tool deutlich mit, anstatt eines davon stillschweigend zuzuschneiden oder zu dehnen. Zu keinem Zeitpunkt verlässt Ihr Browser Ihren Browser.