logo hsb.horse

Bild-Vergleichstool

Vergleichen Sie zwei Bilder direkt im Browser, markieren Sie Pixel-Differenzen in Magenta und steuern Sie die Toleranz, um Kompressionsrauschen auszublenden. Keine Uploads nach außen.

Laden Sie ein Referenz- und ein Vergleichsbild hoch, um ein magentafarbenes Diff-Overlay und eine berechnete Übereinstimmungsrate zu erhalten. Alles bleibt lokal auf Ihrem Gerät.

1. Referenzbild hochladen

Referenzbild wählen

2. Vergleichsbild hochladen

Vergleichsbild wählen

3. Prüfschärfe

Toleranz: 0%

Streng (0) Großzügig (100)

Toleranz: 0%

JPEG-Kompression kann minimale Pixelunterschiede erzeugen. Erhöhen Sie die Toleranz, um akzeptables Rauschen zu ignorieren; 0 % eignet sich für strenge Byte-Vergleiche.

Ergebnis

Warten auf zwei Bilder

Übereinstimmungsrate
–
Abweichende Pixel
–
Gesamtpixel
–
Magenta = Unterschiede
Grau = Übereinstimmung (Referenzvorschau)

Diff-Vorschau

Bitte zwei Bilder hochladen

Einsatzszenarien

UI-Regressionstests

Vergleichen Sie Vorher-/Nachher-Screenshots, um unerwartete visuelle Änderungen vor dem Release aufzuspüren.

Asset-Qualitätssicherung

Prüfen Sie, ob komprimierte oder skalierte Banner und Thumbnails dem freigegebenen Original entsprechen.

Compliance & Nachweis

Liefern Sie eine quantifizierte Übereinstimmungsrate für Reviews oder Audits, ohne Dateien an externe Dienste zu schicken.

Tipps

  • Richten Sie Referenz und Vergleich gleich aus. Starke Seitenverhältnisdifferenzen führen zu vielen Abweichungen.
  • Bleiben Sie bei sehr großen Bildern auf dem Tab, damit der Browser die Berechnung nicht drosselt.
  • Vollständig transparente Pixel werden ignoriert. Fügen Sie einen Hintergrund hinzu, wenn Sie transparente Kanten exakt vergleichen möchten.

So geht’s

  1. 1

    Referenzbild hinzufügen

    Laden Sie das Basis- oder Golden-Image hoch, das als Quelle der Wahrheit dient.

  2. 2

    Vergleichsbild hinzufügen

    Laden Sie den Screenshot oder Export hoch, den Sie prüfen möchten. Unterschiedliche Abmessungen werden automatisch auf die Referenz skaliert.

  3. 3

    Toleranz justieren und Diff prüfen

    Schieben Sie den Toleranzregler, um Kompressionsrauschen zu ignorieren. Prüfen Sie das magentafarbene Overlay und die ausgegebene Übereinstimmungsrate.

Häufige Fragen

Werden meine Bilder auf einen Server hochgeladen?
Nein. Die Verarbeitung erfolgt ausschließlich im Browser. Dateien verlassen Ihr Gerät nicht und werden nirgendwo gespeichert.
Welche Bildformate werden unterstützt?
Alle Formate, die Ihr Browser öffnen kann: JPEG, PNG, WebP, GIF, BMP, SVG, AVIF u. a. Das Diff wird zur Ansicht auf ein Canvas gezeichnet.
Wie werden Transparenz und Alpha behandelt?
Pixel, die in beiden Bildern vollständig transparent sind, gelten als übereinstimmend – unabhängig von ihren RGB-Werten. Andernfalls fließen Alpha-Unterschiede in den Diff ein.
Wie wähle ich einen Toleranzwert?
0 % für sehr strenge Prüfungen, 1–5 % für komprimierte Exporte und höhere Werte, wenn Anti-Aliasing- oder Schriftrendering-Unterschiede toleriert werden sollen.