Die kurze Antwort
Leg beide Bilder gleichzeitig oder nacheinander auf das Tool unten. Das erste ist die Referenz. Mit Schieberegler ziehst du zwischen ihnen hin und her, mit Nebeneinander siehst du beide vollständig, und Differenz liefert eine Heatmap: Unveränderte Bereiche werden blassgrau, geänderte Pixel leuchten von Gelb (kleine Änderung) bis Rot (große Änderung). Unter den Bildern siehst du den Anteil der geänderten Pixel, ihre Anzahl, die größte Abweichung und das Rechteck, das alle Änderungen enthält. Mit Differenzbild herunterladen (PNG) speicherst du die Karte.
Hier ausprobieren: Bilder vergleichen
Vollständige Tool-Seite öffnenWann ein Pixelvergleich hilft
- Design-Reviews: Hat der neue Export eines Banners, Icons oder einer Illustration außer der gewünschten Korrektur noch etwas verändert?
- Visuelle QA und Regressionstests: Vergleiche einen Screenshot eines App-Bildschirms oder einer Webseite vor und nach einer Codeänderung und entdecke verschobene Buttons, geänderte Schriften oder fehlende Elemente.
- Fotobearbeitung: Sieh genau, was eine Retusche, eine Farbkorrektur oder ein Filter verändert hat.
- Komprimierung und Hochskalieren: Vergleiche ein komprimiertes oder vergrößertes Bild mit dem Original und beurteile, wo Qualität verloren ging.
- Fehlersuchbilder: Finde kleine Änderungen zwischen zwei Versionen eines gescannten Dokuments, einer Karte oder eines Suchbildes.
Schieberegler, nebeneinander oder Differenz
Die drei Ansichten beantworten verschiedene Fragen. Der Schieberegler legt das zweite Bild genau über das erste; wenn du den Griff ziehst, deckst du das eine oder das andere auf. Dein Auge bemerkt sehr gut, was sich beim Ziehen bewegt, deshalb ist das die intuitivste Ansicht für Farbe, Schärfe und Retusche.
Nebeneinander zeigt beide Bilder vollständig, jedes in seinen eigenen Proportionen. Das ist praktisch, wenn es auf den Gesamteindruck ankommt, zum Beispiel bei zwei Layoutvarianten, und auch bei Bildern unterschiedlicher Form.
Differenz ist die objektive Ansicht. Sie vergleicht jedes Pixel der beiden Bilder und übersieht keine Änderung eines einzelnen Pixels, die dem Auge entgehen würde. Der gestrichelte Rahmen um die Änderungen hilft dir, sie in einem großen Screenshot zu finden, auch wenn sich nur ein paar Pixel in einer Ecke unterscheiden. Wechsle danach zurück zum Schieberegler, um zu beurteilen, ob eine gefundene Änderung wirklich wichtig ist.
| Frage | Beste Ansicht |
|---|---|
| Sieht die neue Version besser aus? | Schieberegler |
| Welches von zwei Layouts funktioniert? | Nebeneinander |
| Hat sich etwas geändert, und wo genau? | Differenz |
| Wie viel hat sich geändert, in Zahlen? | Differenz (Statistik) |
Die Zahlen lesen
Geänderte Pixel ist der Anteil des Bildes, dessen Abweichung über dem Schwellenwert liegt. Anzahl der Pixel nennt dasselbe als genaue Zahl. Größte Abweichung zeigt die stärkste Änderung auf einer Skala von 0 (identisch) bis 100 (Schwarz gegen Weiß). Geänderter Bereich ist das kleinste Rechteck, das alle geänderten Pixel enthält, mit seiner Größe und der Position der oberen linken Ecke, in Pixeln des ersten Bildes.
Die Abweichung eines Pixels ist die größte Änderung in einem seiner Farbkanäle oder seiner Transparenz. Ein Pixel, das von Hellgrau zu Hellblau wechselt, gilt also als deutlich geändert, auch wenn seine Helligkeit ähnlich ist, und auch eine reine Änderung der Transparenz zählt.
Schwellenwert und Komprimierungsrauschen
Zwei Bilder, die identisch aussehen, können sich trotzdem in Tausenden Pixeln unterscheiden. JPG- und WebP-Komprimierung ändern Pixelwerte bei jedem Speichern leicht, ebenso Skalieren, Umwandlungen von Farbprofilen und Screenshots mit unterschiedlicher Skalierung. Diese unsichtbaren Änderungen sind für die meisten Vergleiche nur Rauschen.
Der Schwellenwert legt fest, welche Größe von Abweichung ignoriert wird, von 0 bis 100. Bei 0 zählt jede Änderung. Ein Wert von 5 bis 15 versteckt Komprimierungsrauschen und lässt echte Änderungen wie verschobene Elemente, neuen Text oder eine andere Farbe sichtbar. Vergleichst du zwei verlustfreie PNG-Exporte aus demselben Designprogramm, bleib bei 0; vergleichst du zwei JPGs, fang bei 10 an. Ändere den Wert in kleinen Schritten und beobachte dabei die Zahl der geänderten Pixel: Fällt sie plötzlich stark ab, hast du die Grenze zwischen Rauschen und echten Änderungen gefunden. Bleibt danach noch ein heller Fleck im Differenzbild, lohnt sich ein genauer Blick mit dem Schieberegler.
Bilder unterschiedlicher Größe
Ein Pixelvergleich braucht beide Bilder auf demselben Raster. Hat das zweite Bild eine andere Größe, skaliert das Tool es auf die Größe des ersten und sagt dir das unter den Ergebnissen. Weichen auch die Proportionen ab, wird das zweite Bild gestreckt, und auch das steht im Hinweis. Skalieren erzeugt kleine Abweichungen an Kanten, für exakte Prüfungen vergleichst du deshalb am besten Bilder mit identischen Maßen, etwa Screenshots bei gleicher Fenstergröße und gleichem Zoom.
Tauschen macht das zweite Bild zur Referenz. Die Bilder verlassen nie dein Gerät: Beide werden in deinem Browser geöffnet und verglichen, du kannst also vertrauliche Designs und unveröffentlichte Bildschirme vergleichen, ohne sie hochzuladen.