Entfernen Sie einen Bildhintergrund im Browser: Was ein Farbschlüssel-Entferner tatsächlich tut

Ich brauchte vierzig Produktaufnahmen für eine WP-Administrations-Promo-Seite und wollte nicht pro Bild bezahlen oder die Modelle auf jemanden auf den Server hochladen, bevor sie öffentlich waren. Also habe ich einen Hintergrundentferner eingebaut toolz.dev, warf mein erstes Foto darauf und sah zu, wie es ein Loch direkt in der Mitte des Produkts aß.

Das Foto war eine weiße Plugin-Box auf einem weißen Schreibtisch. Das Werkzeug entfernte den Schreibtisch. Es entfernte auch die Box, da die Box genauso weiß war wie der Schreibtisch. Ich hatte angenommen, ich würde etwas Kluges und KI-förmiges bauen. Ich hatte tatsächlich etwas viel Einfacheres gebaut, und das Loch in meinem Produkt hat mir genau das beigebracht, was es war - und nützlicher noch, wann es wunderbar funktioniert und wann es fehlschlägt.

Dieser Leitfaden ist diese Lektion, die niedergeschrieben wird. Es ist ehrlich darüber, was ein browserbasierter Farbschlüssel-Entferner kann, da ein Werkzeug, das bei Haaren und gleichfarbigen Motiven leise ausfällt, schlechter ist als kein Werkzeug, wenn Sie die Kanten nicht kennen. Alles hier läuft clientseitig – Ihr Bild wird dekodiert, verarbeitet und heruntergeladen, ohne dass die Registerkarte jemals verlassen wird.

tl; dr: der Hintergrundentferner Sample die Farbe in der oberen linken Ecke Ihres Bildes und löscht jedes Pixel in der Nähe dieser Farbe, wobei die Transparenz hinterlässt (PNG-OUT). Es ist ein Farbschlüssel, kein KI-Ausschnitt. Das bedeutet, dass es auf flachen, einfarbigen Hintergründen - Produktaufnahmen, Logos, flachen Illustrationen, Screenshots - sofort, privat und wirklich hervorragend ist, und auf belebten Fotos, Farbverläufen, Haaren und jedem Motiv, das eine Farbe mit seinem Hintergrund hat, wirklich schlecht ist. Drehen Sie das Toleranz Schieber nach oben, um mehr zu entfernen, nach unten zu schützen. Müssen Sie das Ergebnis danach in JPG umwandeln? der Bildformat-Konverter Tut das, aber Sie verlieren die Transparenz.

Was ist das für ein Hintergrundentferner?

Es gibt zwei sehr unterschiedliche Werkzeugfamilien, die sich beide als "Hintergrundentferner" bezeichnen. Und die Auswahl der falschen für Ihr Bild ist der häufigste Grund, warum Menschen frustriert sind.

Die erste Familie ist KI-Segmentierungdrohen Ein auf Millionen von beschrifteten Fotos geschultes maschinelles Lernen, das auf Ihr Bild trainiert, entscheidet sich für "Dies ist ein Hund, dies ist eine Couch hinter dem Hund", und verfolgt den Hund. Dies ist, was Remove.bg und die kostenpflichtigen Cloud-Tools tun. Es behandelt Haare, Fell und überfüllte Hintergründe, weil es versteht Fächer, nicht nur Farben. Die Kosten: Es wird normalerweise Ihr Bild auf einen Server hochgeladen, es benötigt das trainierte Modell und es ist langsamer.

Die zweite Familie ist eine Farbtaste - Manchmal als Chroma-Keying bezeichnet, die gleiche Idee wie ein Greenscreen im Film. Es versteht überhaupt nicht, was auf Ihrem Foto ist. Es wählt eine Hintergrundfarbe und löscht jedes Pixel in der Nähe dieser Farbe. Der Toolz.dev-Hintergrundentferner ist diese zweite Art. es tastet das Pixel in der Linke oben Behandelt das als "Hintergrund" und geht jedes Pixel aus, das entscheidet: Ist dies der Eckfarbe zum Löschen nahe genug?

Beides ist abstrakt besser. Sie sind gut in verschiedenen Bildern. Sobald Sie feststellen können, welches Bild Sie halten, werden Sie aufhören, gegen das Werkzeug zu kämpfen.

Wie entscheidet der Farbschlüssel-Entferner, was gelöscht werden soll?

Der Mechanismus ist es wert, verstanden zu werden, weil er jeden Erfolg und jeden Misserfolg erklärt, den Sie jemals daraus machen werden.

Wenn Sie die Vorschau aufrufen, liest das Werkzeug die Farbe des Pixels oben links - nennt es die Referenz. Dann addiert sich für jedes Pixel im Bild, wie weit dieses Pixel über die drei Farbkanäle hinausgeht:

difference = |R - refR| + |G - refG| + |B - refB|

Das ist eine einfache Summe der roten, grünen und blauen Entfernungen (eine Manhattan-Entfernung, wenn Sie den Begriff wollen). Wenn die Gesamtsumme difference ist unter deinem Toleranz Wenn das Pixel eingestellt wird, wird das Pixel auf Null gesetzt - es wird transparent. Wenn es oben ist, bleibt das Pixel.

Drei Konsequenzen fallen direkt aus dieser Formel, und sie sind die ganze Geschichte:

zuerst, Die Ecke muss Hintergrund sein. Das Tool geht davon aus, dass das obere linke Pixel Teil dessen ist, was Sie weg wollen. Wenn Ihr Motiv in diese Ecke reicht, sagen Sie dem Werkzeug, dass Ihr Motiv der Hintergrund ist. Zuschneiden oder neu frame, damit die Ecke sauber ist.

Erster Cousin dazu: Der Hintergrund muss ungefähr eine Farbe sein. Ein flacher weißer Studio-Sweep ist eine Farbe. Ein verschwommenes Café, ein Himmelsverlauf, ein Holzschreibtisch mit Maserung - das sind viele Farben, und das Werkzeug wusste nur über das in der Ecke. Es werden die Teile gelöscht, die zufällig übereinstimmen, und der Rest lässt als hässliches Rande.

Zweitens, Jede Betrefffarbe, die dem Hintergrund entspricht, wird ebenfalls gelöscht. Meine weiße Box auf dem weißen Schreibtisch ist der kanonische Fehler. Eine Person in einem grauen Hemd gegen eine graue Wand verliert das Hemd. Das Werkzeug hat keine Ahnung, dass das Shirt "Subjekt" ist - es sieht nur grau in der Nähe des Referenzgraues.

Wenn dieses Werkzeug genau richtig ist

Ich greife trotz der Grenzen immer wieder danach, da es für eine bestimmte und sehr häufige Gruppe von Bildern schneller und privater ist als alles andere Cloud-basiert. es scheint auf:

Produktfotos auf einem soliden Sweep. Schießen Sie auf einem einfachen weißen oder einfarbigen Hintergrund - einem Blatt Papier, einer einfachen Rolle als Hintergrund, einem Leuchtkasten - und der Ausschnitt ist mit einem Klick sauber. Dies ist der E-Commerce-Workflow: White-Background-Produktbilder werden bei Amazon effektiv benötigt und auf Etsy und eBay erwartet.

Logos und flache Grafiken. Ein Logo auf festem Hintergrund, eine flache Abbildung, ein Symbol – diese bestehen bereits aus einigen flachen Farben, genau das, was ein Farbschlüssel will.

Screenshots und UI-Aufnahmen. Ein Screenshot mit einer einheitlichen Symbolleiste oder einer Leinwand-Farbtaste wird sauber ausgedrückt, wenn Sie nur den Inhalt benötigen.

Alles, was Sie grün gescreent haben. Wenn Sie den Dreh kontrollieren und Ihr Motiv gegen eine flache, kontrastierende Farbe setzen können, die das Motiv ausführt nicht Tragen Sie, dieses Werkzeug ist wirklich professionell.

Wann etwas anderes zu benutzen

Seien Sie ehrlich zu sich selbst über das Bild, bevor Sie zehn Minuten mit Toleranz-Slidern verschwenden:

Fotos von Menschen mit sichtbarem Haar. Feine Stränge vor jedem Hintergrund sind das schwierigste Problem auf dem Feld, und ein Farbschlüssel kann dies nicht. Greifen Sie nach einem KI-Tool.

beschäftigt oder mit Farbverlauf Hintergründe. Straßen, Zimmer, Himmel, Bokeh — viele Farben, eine Referenz, garantierter Rand.

Themen, die die Hintergrundfarbe teilen. Keine Schiebereglereinstellung Fixiert ein weißes Objekt auf Weiß. Entweder auf einem kontrastierenden Hintergrund aufnehmen oder Segmentierung verwenden.

So entfernen Sie Schritt für Schritt einen Hintergrund auf toolz.dev

Die Schnittstelle ist bewusst klein. Es gibt keinen Account, keinen Upload, kein Wasserzeichen.

Schritt 1: Öffnen Sie das Werkzeug

Gehe zum Hintergrundentfernerdrohen Das Ganze wird als Seite geladen, es gibt kein Modell zum Herunterladen und keinen Serveraufruf.

Schritt 2: Laden Sie Ihr Bild hoch

Klicken Sie auf die Drop-Zone und wählen Sie eine Datei aus (JPG, PNG oder WebP alle funktionieren). Es wird direkt in die Seite eingelesen. Überprüfen Sie, dass die Die obere linke Ecke ist Hintergrund - Dies ist die einzige Rahmenregel, die zählt. Wenn Ihr Motiv in diese Ecke gesteckt ist, ist das Ergebnis falsch, egal was Sie als nächstes tun.

Schritt 3: Toleranz einstellen und dann Vorschau

der Toleranz Der Schieberegler läuft von 0 bis 200 und beginnt bei 50. Bei geringer Toleranz werden nur Farben entfernt, die sich nahe an der Ecke befinden (sicher, aber möglicherweise einen Halo von Pixeln mit nahem Hintergrund). Hohe Toleranz entfernt eine größere Bandbreite an Farben (sauberer Sweep, aber fressen in Kanten und jede passende Motivfarbe). stoßen an Vorschau Und schauen Sie sich das Schachbrett an - dieses Muster ist der transparente Bereich.

Schritt 4: Stimmen

Wenn der Hintergrund überlebt, stupsen Sie die Toleranz auf und eine Vorschau erneut. Wenn Ihr Motiv seine Kanten verliert oder Löcher bekommt, stoßen Sie es an. Sie suchen nach der Einstellung, die den Hintergrund löscht, ohne das Motiv zu berühren. Für einen gut geschossenen flachen Hintergrund gibt es normalerweise eine breite, bequeme Reichweite, die funktioniert.

Schritt 5: PNG herunterladen

knips PNG herunterladendrohen Die Ausgabe ist immer PNG, da PNG das gemeinsame Webformat ist, das Transparenz unterstützt - das ist der ganze Punkt. Die Datei wird im Browser generiert und direkt auf Ihrem Computer gespeichert.

Color Key vs. AI Cutout: Welche möchten Sie eigentlich?

Die Reihe, die es für mich entscheidet, ist Datenschutz plus flache Hintergründedrohen Wenn ich den Dreh kontrolliere, kontrolliere ich den Hintergrund und dann schlägt der ehrliche, langweilige Farbschlüssel das clevere KI-Tool auf Geschwindigkeit und beim Senden meiner unveröffentlichten Assets nie irgendwohin.

Ein paar Gewohnheiten, die sauberere Ergebnisse erzielen

Schießen Sie für das Werkzeug. Der größte Hebel ist nicht die Software, sondern der Eingang. Ein Thema auf einem schlichten, kontrastreichen, gleichmäßig beleuchteten Hintergrund wird mit einem Klick herausgeschnitten. Fünf Minuten, ein Blatt Papier schlägt eine Stunde Slider-Wrestling.

Halten Sie die Ecke sauber. Rahmen, damit das obere linke Pixel eindeutig Hintergrund ist. Es ist das Werkzeug nur Referenz.

Kontrast schlägt Toleranz. Wenn Ihr Motiv und Hintergrund in Farbe nahe sind, spart kein Schieberegler – Ändern Sie den Hintergrund, nicht die Einstellung.

Größe vorher ändern, danach komprimieren. Wenn das endgültige Bild im Web läuft, führen Sie den Ausschnitt durch die Bildgröße ändern Werkzeug für genaue Abmessungen, dann die Bildkompressor um die Datei zu verkleinern. mach das hinter Entfernen, damit Sie das Randdetail nicht komprimieren, das Sie noch benötigen.

Behalte es PNG, bis du fertig bist. Jeder Zwischenschritt sollte PNG bleiben, damit die Transparenz überlebt. Glätten Sie nur das JPG für das endgültige Ziel, wenn dieses Ziel kein PNG annehmen kann - und wissen, dass der transparente Bereich bei der Arbeit zu einer festen Füllung wird.

Häufig gestellte Fragen

Verwendet dieses Tool KI, um Hintergründe zu entfernen?

Nein, und das ist absichtlich. Es ist ein Farbschlüssel-Entferner: Es tastet die Farbe der oberen linken Ecke ab und löscht Pixel in der Nähe, ganz in Ihrem Browser. Das macht es sofort und völlig privat, bedeutet aber, dass es auf flachen, soliden Hintergründen und nicht auf komplexen Fotos funktioniert, wie es ein KI-Modell tun würde. Die eigene Notiz sagt auch so viel aus - für geschäftige Hintergründe passt ein KI-Ausschnitt besser.

Warum hat es einen Teil meines Betreffs gelöscht?

Weil ein Teil Ihres Motivs farblich nahe am Hintergrund war. Das Tool löscht nach Farbe, nicht indem es erkennt, was das Motiv ist, also wird ein weißes Hemd an einer weißen Wand oder ein Produkt, das auf dem Schreibtisch steht, zusammen mit dem Hintergrund entfernt. Der Fix ist ein Hintergrund, der sich vom Motiv abhebt, nicht von einer anderen Einstellung des Schiebereglers.

Was ändert sich der Toleranzschieber?

Es ist der Grenzwert dafür, wie unterschiedlich ein Pixel von der Eckfarbe sein kann und trotzdem gelöscht wird. Geringe Toleranz entfernt nur nahezu identische Farben (sicher, kann aber einen Heiligenschein hinterlassen). Hohe Toleranz entfernt einen größeren Bereich (Reiniger auf flachem Sweep, frisst aber Kanten). Es läuft 0 bis 200 und ist standardmäßig 50, Vorschau und Anpassung, bis der Hintergrund gelöscht wird, ohne das Motiv zu berühren.

Warum ist der Ausgang immer ein PNG?

Weil PNG Transparenz unterstützt und JPG nicht. Das Entfernen eines Hintergrunds bedeutet, Pixel transparent zu machen, und nur ein Format mit einem Alphakanal kann dies speichern. Wenn Sie dasselbe Bild wie JPG exportieren, wird der transparente Bereich auf eine feste Farbe, normalerweise weiß, zusammengebrochen.

Kann ich den Hintergrund von einem Foto einer Person entfernen?

Nur wenn es sich um eine saubere Studio-Stil-Aufnahme gegen einen flachen, kontrastreichen Hintergrund handelt und die Person nicht in der Nähe dieser Farbe ist. Bei alltäglichen Fotos mit Haaren vor einem realen Hintergrund hinterlässt dieses Werkzeug einen Rand - das ist der Fall, wenn ein KI-Segmentierungswerkzeug seinen Aufenthalt verdient.

Wird mein Bild irgendwo hochgeladen?

kein drohen Das Bild wird auf der Seite des Browsers dekodiert und verarbeitet, und das PNG wird beim Herunterladen lokal generiert. Es wird nichts an einen Server gesendet, weshalb es sicher ist, Produktaufnahmen und Assets zu verwenden, die noch nicht öffentlich sind.

Wie entferne ich einen weißen Hintergrund aus einem Bild?

Dies ist der Fall, für das das Werkzeug gebaut ist. Ein weißer Hintergrund ist flach und gleichmäßig, so dass die Eckprobe auf reinem Weiß landet und eine mäßige Toleranz das gesamte Feld in einem Durchgang räumt. Lassen Sie das Bild ein, überprüfen Sie die Vorschau und stupsen Sie nur dann an, wenn ein schwacher grauer Rand in der Nähe der Kanten überlebt - Studioaufnahmen und gescannte Logos haben oft eher einen leicht cremefarbenen Farbverlauf als echtes #FFFFFF. Das einzige, was Sie sehen sollten, ist weiß in Ihrem Motiv: Ein weißer Becher oder ein weißes Hemd verschwindet zusammen mit dem Hintergrund, da das Werkzeug Farbe übereinstimmt, anstatt Objekte zu erkennen.

Warum hat mein Ausschnitt eine weiße oder farbige Kante?

Dieser Rand ist Anti-Aliasing. Das Originalbild hat die Kantenpixel des Motivs in die Hintergrundfarbe gemischt, um die Konturen glatt zu machen, sodass diese gemischten Pixel weder Subjekt noch Hintergrund sind - sie sitzen direkt außerhalb des Toleranz-Cutoffs und überstehen die Löschung. Toleranz ein wenig zu erhöhen isst normalerweise den Heiligenschein, obwohl zu weit zu drücken beginnt, in das Thema selbst zu beißen. Wenn der Rand bei jeder Einstellung fortbesteht, fehlt dem zugrunde liegenden Bild einfach genug Kontrast an der Grenze, und ein Schuss gegen einen kontrastreicheren Hintergrund wird in einer Sekunde fixieren, was kein Schieberegler kann.

Wie setze ich danach eine feste Farbe hinter mein Ausschnittsthema?

Platzieren Sie das transparente PNG in einem beliebigen Editor auf einer farbigen Ebene oder exportieren Sie über die Bildformat-Konverter, die den transparenten Bereich mit einer Hintergrundfarbe füllt. Für den Webgebrauch ist ein transparenter PNG, der auf einen CSS-Hintergrund abgelegt ist, normalerweise der sauberere Pfad.

Abschluss

Der Fehler, den ich bei dieser ersten Produktaufnahme gemacht habe - wenn man einen KI-Ausschnitt erwartet und einen Farbschlüssel bekommt - ist der Fehler, den fast jeder mit dem Hintergrundentferner des Browsers macht, und er ist völlig vermeidbar, wenn Sie wissen, was Sie halten. Dieses Tool macht eines: Es löscht die Hintergrundfarbe und hinterlässt Transparenz. Geben Sie ihm einen flachen, kontrastreichen Hintergrund und es ist schnell, kostenlos, unbegrenzt und privat, so dass kein hochgeladenes Tool aufeinander abgestimmt wird. Geben Sie ihm Haare gegen eine überfüllte Straße und es wird Sie enttäuschen, und jetzt wissen Sie, dass Sie stattdessen nach einem anderen Werkzeug greifen können.

Beginnen Sie mit dem Hintergrundentfernerdrohen Reinigen Sie den Schuss danach mit Bildgröße ändern und das Bildkompressor, und konvertieren Formate mit dem Bildformat-Konverter Wenn Sie müssen. Alles läuft in Ihrem Browser - nichts, was Sie einlassen, verlässt den Tab.