Bild-Diff-Betrachter

Kostenloses Online-Bild-Diff-Werkzeug. Vergleichen Sie zwei Bilder nebeneinander, mit Ziehregler, Zwiebelschalen-Überlagerung oder Pixel-genauer Hervorhebung. Läuft vollständig in Ihrem Browser, kein Upload.

Vergleichen Sie zwei Bilder auf vier Arten: nebeneinander, Ziehregler, Zwiebelschale oder Pixel-Hervorhebung. Legen Sie zwei Bilder ab und erkennen Sie sofort, was sich geändert hat. Perfekt für UI-Regressionen, Designüberarbeitungen und Screenshot-Überprüfungen. 🔒 Läuft vollständig in Ihrem Browser. Bilder werden niemals auf einen Server hochgeladen.

Bild hierher ziehen oder klicken zum Auswählen
Bild hierher ziehen oder klicken zum Auswählen
Laden Sie auf beiden Seiten ein Bild, um den Vergleich zu starten.

Wie Bild-Diffing funktioniert

Vier Möglichkeiten zu vergleichen

  • Nebeneinander — die einfachste Prüfung: beide Bilder in voller Größe nebeneinander gezeigt.
  • Schieberegler — ein ziehbarer Teiler enthüllt das alte Bild auf der einen und das neue auf der anderen Seite, ideal für UI-Änderungen vorher/nachher.
  • Zwiebelschale — legt das zweite Bild mit einstellbarer Deckkraft über das erste, hervorragend geeignet, um Verschiebungen und Ausrichtungsdrift zu erkennen.
  • Pixel-Diff — vergleicht jeden Pixel und malt die geänderten rot an, sodass selbst eine einpixelige Änderung unmöglich zu übersehen ist.

Die Pixel-Diff-Metrik

Anstelle einer naiven RGB-Subtraktion verwendet der Pixel-Diff-Modus eine YIQ-Farbabstands-Metrik — derselbe Ansatz wie die beliebte pixelmatch-Bibliothek. YIQ trennt Helligkeit (Y) von Chrominanz (I, Q), was der Art entspricht, wie das menschliche Auge Unterschiede wahrnimmt. Ein einzelner Schwellenwert-Regler steuert, wie groß ein Unterschied sein muss, bevor ein Pixel markiert wird.

Gängige Szenarien

  1. UI-Regressionstest — vergleichen Sie einen Screenshot vor und nach einer Codeänderung.
  2. Designüberprüfung — verifizieren Sie, dass der Build eines Entwicklers mit dem Mockup übereinstimmt.
  3. Bildkompressions-QA — sehen Sie genau, welche Bereiche ein Encoder verändert hat.
  4. Foto-Bearbeitungen — bestätigen Sie, welche Pixel eine Retusche berührt hat.

Alles läuft über die Canvas-API in Ihrem Browser — kein Upload, kein Warten.

FAQs

Werden meine Bilder auf einen Server hochgeladen?
Nein. Jeder Vergleich erfolgt lokal in Ihrem Browser über die Canvas-API. Ihre Bilder verlassen niemals Ihr Gerät.
Was, wenn die zwei Bilder unterschiedliche Abmessungen haben?
Das Werkzeug vergleicht sie dennoch, indem es an der oberen linken Ecke ausrichtet und die größere Leinwand verwendet. Ein Hinweis zeigt beide Größen. Für pixelgenaue Ergebnisse verwenden Sie Bilder gleicher Größe.
Welche Formate werden unterstützt?
Alles, was der Browser decodieren kann: PNG, JPG, WebP, GIF (erstes Frame), BMP und SVG.
Was macht der Schwellenwert-Regler?
Er legt fest, wie unterschiedlich zwei Pixel sein müssen, bevor sie als Änderung zählen, unter Verwendung einer YIQ-Farbabstandsmetrik. Niedriger = strenger, höher = toleranter gegenüber kleinen Farbverschiebungen.
Wie speichere ich das Pixel-Diff-Ergebnis?
Wechseln Sie in den Pixel-Diff-Modus und klicken Sie auf 'Diff herunterladen', um das hervorgehobene Ergebnis als PNG zu exportieren.