Abweichung eines Pixels
d = max(|ΔR|, |ΔG|, |ΔB|, |ΔA|) > 32
Das Pixel gilt als verschieden, wenn die größte Kanalabweichung 32 von 255 übersteigt.
Bildvergleich
Lade zwei Bilder: Vergleiche sie mit Regler oder nebeneinander oder zeige geänderte Pixel rot samt Prozentsatz an, lokal im Browser.
Bild
Kein Bild geladen
Zieh ein Bild hierher
Füge genau zwei Bilder zum Vergleichen hinzu. Du kannst beide zusammen auswählen oder das zweite nach dem ersten hinzufügen.
Du brauchst mehr Möglichkeiten?
Nutze mehrere Bearbeitungswerkzeuge in einem Arbeitsbereich, deine geöffnete Datei und deine Änderungen kommen mit.
Vollständigen Editor öffnenVerarbeitung…0 %
War dieses Werkzeug hilfreich?
Wie funktioniert dieses Tool?
Zwei Versionen desselben Bildes sehen sich oft so ähnlich, dass man nicht mehr erkennt, was sich geändert hat: ein korrigierter Entwurf, ein Screenshot vor und nach einem Update, ein retuschiertes oder neu komprimiertes Foto. Dieser Vergleich zeigt sie mit Vorher/Nachher-Regler, nebeneinander oder markiert abweichende Pixel rot samt Prozentsatz, ohne die Bilder hochzuladen.
Füge genau zwei PNG-, JPEG- oder WebP-Bilder hinzu, zusammen oder nacheinander; das erste wird zu „Vorher“, das zweite zu „Nachher“. Vorher / nachher legt beide Bilder mit einer verschiebbaren senkrechten Trennlinie übereinander, Nebeneinander stellt sie links und rechts dar. Der Zoom hilft bei Details.
Unterschiede vergleicht die beiden Bilder Pixel für Pixel. Ein Pixel wird rot markiert, wenn einer seiner Kanäle (Rot, Grün, Blau oder Transparenz) um mehr als 32 von 255 Stufen abweicht; die übrigen Pixel erscheinen hellgrau aus dem ersten Bild, damit der Zusammenhang erhalten bleibt. Die Schwelle verhindert, dass JPEG-Kompressionsrauschen gemeldet wird.
Das Ergebnis zeigt Prozentsatz und Anzahl der abweichenden Pixel. Sind die beiden Bilder nicht gleich groß, wird das zweite vor der Berechnung auf die Größe des ersten skaliert, und eine Meldung weist darauf hin. Klicke erneut auf Unterschiede oder auf eine andere Ansicht, um zu den Bildern zurückzukehren.
So verwenden Sie dieses Tool
Beide Bilder hinzufügen
Wähle das Original und dann die geänderte Version, zusammen oder nacheinander.
Ansicht wählen
Vorher / nachher für den Regler, Nebeneinander oder Unterschiede zum Markieren geänderter Pixel.
Abweichungen prüfen
Vergrößere die markierten Bereiche und lies den Anteil abweichender Pixel ab.
Erkennung der Unterschiede
Jedes Pixel des zweiten Bildes wird mit dem Pixel an derselben Position im ersten verglichen.
Anteil abweichender Pixel
p = n_diff ÷ (W × H) × 100
Berechnet in der Größe des ersten Bildes.
- ΔR, ΔG, ΔB, ΔA
- Abweichungen der Rot-, Grün-, Blau- und Alphakanäle zwischen beiden Bildern
- n_diff
- Anzahl der rot markierten Pixel
- W, H
- Breite und Höhe des ersten Bildes
Anwendungsfälle
Korrigierten Entwurf prüfen
Erkenne sofort, was sich zwischen zwei Versionen eines Bildschirms oder Designs verschoben hat.
Visuelle Regression finden
Vergleiche einen Screenshot vor und nach einem Update, um die geänderte Schaltfläche oder den Text zu finden.
Retusche oder Kompression beurteilen
Sieh mit dem Regler, ob ein optimiertes Foto gegenüber dem Original Details verloren hat.
Beispiele
Geänderte Schaltfläche auf einem Screenshot
200 × 50 = 10.000 geänderte Pixel von 1.280 × 720 = 921.600, also 1,09 %. Der Rest des Bildschirms erscheint hellgrau.
Eingabe
Zwei Screenshots mit 1.280 × 720 px; nur eine Schaltfläche mit 200 × 50 px ändert ihre FarbeErgebnis
Ansicht Unterschiede: Die Schaltfläche erscheint rot; „1,09 % der Pixel unterscheiden sich (10.000 von 921.600)“Zwei unterschiedlich große Bilder
Das Seitenverhältnis 16:9 ist gleich, es wird also nichts verzerrt; Kanten können wegen der Glättung beim Vergrößern trotzdem rot erscheinen.
Eingabe
Original mit 1.920 × 1.080 px und ein Export mit 1.280 × 720 pxErgebnis
Das zweite Bild wird vor dem Vergleich auf 1.920 × 1.080 px skaliert, eine Meldung weist darauf hinTipps und bewährte Vorgehensweisen
- Lege immer das Original als erstes an: Die Ansicht Unterschiede nutzt seine Größe und Grautöne als Hintergrund.
- Behalte beim Vergleich zweier Exporte dieselben Maße: Skalieren erzeugt Abweichungen an allen Kanten.
- Nutze den Vorher/Nachher-Regler für Farbretuschen und Unterschiede für lokale Änderungen.
- Ein kleiner Prozentsatz bei einem neu als JPEG komprimierten Foto ist normal: Die Kompression verändert Tausende Pixel leicht.
Quellen und Referenzen
- Canvas API (öffnet in einem neuen Tab), MDN Web DocsSeite auf Englisch
Häufig gestellte Fragen
Wie viele Bilder kann ich vergleichen?
Genau zwei. Wählst du nur eines, wartet das Tool auf das zweite; bei mehr als zwei bittet es dich, neu zu beginnen.
Wie werden Unterschiede erkannt?
Jedes Pixel wird mit dem Pixel an derselben Stelle im anderen Bild verglichen. Es wird rot markiert, wenn der Rot-, Grün-, Blau- oder Alphakanal um mehr als 32 von 255 abweicht.
Müssen die Bilder gleich groß sein?
Nein, aber es ist besser. Das zweite wird auf die Größe des ersten skaliert; weichen die Proportionen ab, wird es verzerrt, und viele Pixel erscheinen als verschieden.
Kann ich die Empfindlichkeit einstellen?
In dieser Version nicht: Die Schwelle liegt fest bei 32 Stufen, genug, um Kompressionsrauschen zu ignorieren und dennoch Farb- oder Textänderungen zu erkennen.
Kann ich das Unterschiedsbild herunterladen?
Nein, der Vergleich dient der Prüfung am Bildschirm. Mach einen Screenshot der Ansicht Unterschiede, wenn du sie teilen musst.
Werden meine Bilder auf einen Server hochgeladen?
Nein. Anzeige und Berechnung der Unterschiede finden in deinem Browser statt.
Verwandte Werkzeuge
Mit diesen Werkzeugen weitermachen
Werkzeuge, die diesem ähnlich sind oder es ergänzen.
Ähnliche Werkzeuge
Bild in einem einzigen Editor zuschneiden, skalieren, mit Text oder Wasserzeichen versehen, mit Effekten bearbeiten und optimieren.
Bilder & GrafikenEmpfohlenDieses Werkzeug verwenden
Verkleinere ein Bild über die Qualität oder eine Zielgröße in KB und sieh die Dateigröße vor dem Herunterladen.
Bilder & GrafikenEmpfohlenDieses Werkzeug verwenden
Konvertiere Bilder in PNG, JPEG oder WebP und passe die Ausgabequalität direkt im Browser an.
Bilder & GrafikenEmpfohlenDieses Werkzeug verwenden
Auch interessant
LeitfadenBewährte MethodenFortgeschritten
Bilder für Webperformance optimieren
Verbinde Dimensionen, Format, Kompression, responsive Quellen, Ladepriorität und Layoutstabilität zu einem vollständigen Web-Image-Workflow.
31. August 20265 min
LeitfadenBewährte MethodenAnfänger
50 Bilder auf einmal für das Web optimieren
Verkleinere einen Bildstapel, konvertiere ihn in WebP und entferne Metadaten mit einer einzigen Pipeline.
6. September 20262 min
LeitfadenKonzepte und TechnologienAnfänger
Welche Auflösung sollte ein Bild haben?
Verstehe den Unterschied zwischen Pixelmaßen, CSS-Anzeigegröße, Pixeldichte und DPI und wähle passende Bildabmessungen für Web und Bildschirm.
31. August 20266 min
TutorialBewährte MethodenAnfänger
Bilder fürs Web optimieren, ohne unnötig Qualität zu verlieren
Bilder verkleinern, komprimieren und WebP, AVIF oder andere Formate wählen: ein praktischer Workflow für kleinere Dateien bei guter Bildqualität.
30. August 20262 min