Een afbeeldingsachtergrond in de browser verwijderen: wat een kleursleutelverwijderaar eigenlijk doet

Ik had veertig productfoto's nodig die werden opgeruimd voor een WP-promo-pagina en ik wilde niet per afbeelding betalen of de mockups uploaden naar iemands server voordat ze openbaar waren. Dus ik bouwde een achtergrondverwijderaar in Toolz.dev, gooide mijn eerste foto ernaar en keek toe hoe hij een gat door het midden van het product at.

De foto was een witte plugin doos op een wit bureau Het gereedschap verwijderde het bureau Ook verwijderde het de doos, omdat de doos hetzelfde wit was als het bureau Ik had aangenomen dat ik iets slims en AI-vormig aan het bouwen was Ik had eigenlijk iets veel eenvoudigers gebouwd, en het gat in mijn product leerde me precies wat het was - en, nuttiger, precies wanneer het mooi werkt en wanneer het mislukt.

Deze gids is die les opgeschreven Het is eerlijk over wat een browser-gebaseerde kleur-sleutel verwijderaar kan doen, omdat een tool die stilletjes faalt op haar en onderwerpen in dezelfde kleur is erger dan helemaal geen tool als je de randen niet weet Alles hier draait client-side - uw afbeelding wordt gedecodeerd, verwerkt, en gedownload zonder ooit het tabblad te verlaten.

tl;dr: de Achtergrondverwijderaar samples de kleur in de linkerbovenhoek van uw afbeelding en verwijdert elke pixel dicht bij die kleur, waardoor transparantie achterblijft (PNG uit) Het is een kleurentoets, geen AI-uitsnede Dat betekent dat het direct, privé en echt uitstekend is op platte, effen-kleuren achtergronden - productshots, logo's, platte illustraties, screenshots - en echt slecht op drukke foto's, gradiënten, haar, en elk onderwerp dat een kleur deelt met zijn achtergrond Draai de verdragen Schuif omhoog om meer te verwijderen, naar beneden om randen te beschermen. Wilt u het resultaat daarna omzetten naar JPG? de Converter voor afbeeldingsformaat Doet dat, maar je verliest de transparantie.

Wat voor achtergrondverwijderaar is dit?

Er zijn twee heel verschillende instrumenten die zichzelf beiden "achtergrondverwijderaars" noemen, en het kiezen van de verkeerde voor uw afbeelding is de meest voorkomende reden waarom mensen gefrustreerd raken.

De eerste familie is AI-segmentatie. Een machine-learningmodel dat is getraind op miljoenen gelabelde foto's kijkt naar je afbeelding, beslist "Dit is een hond, dit is een bank achter de hond, en volgt de hond. Dit is wat Remove.bg en de betaalde cloudtools doen. Het verwerkt haar, vacht en rommelige achtergronden omdat het begrijpt vakken, niet alleen kleuren. De kosten: het uploadt meestal uw afbeelding naar een server, het heeft dat getrainde model nodig en het is langzamer.

De tweede familie is een kleursleutel- soms chroma keying genoemd, hetzelfde idee als een groen scherm in film Het begrijpt helemaal niet wat er op je foto staat Het kiest een achtergrondkleur en verwijdert elke pixel die dicht bij die kleur ligt De Toolz.dev Achtergrondverwijderaar is deze tweede soort Het bemonstert de pixel in de Linksboven hoek van uw afbeelding, behandelt dat als "de achtergrond" en loopt elke pixel die besluit: is dit dicht genoeg bij de hoekkleur om te verwijderen?

Geen van beide is in abstracto beter. Ze zijn goed in verschillende afbeeldingen. Zodra u kunt zien welke afbeelding u vasthoudt, stopt u met vechten tegen de tool.

Hoe bepaalt de kleurtoetsremover wat te verwijderen?

Het mechanisme is het waard om te begrijpen, omdat het elk succes en elke mislukking die je er ooit uit zult halen, verklaart.

Wanneer u op Voorbeeld drukt, leest het gereedschap de kleur van de linkerbovenhoekpixel - noem het de referentie. Vervolgens telt het voor elke pixel in de afbeelding op hoe ver die pixel verwijderd is van de referentie over de drie kleurkanalen:

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

Dat is een duidelijke som van de rode, groene en blauwe afstanden (een Manhattan-afstand, als je de term wilt). Als het totaal difference is onder je verdragen instelling, de pixel' s alfa is ingesteld op nul - het wordt transparant Als het boven is, blijft de pixel.

Drie gevolgen vallen direct uit die formule, en ze zijn het hele verhaal:

eerst, De hoek moet achtergrond zijn. De tool gaat ervan uit dat de pixel linksboven deel uitmaakt van wat je wilt. Als uw onderwerp in die hoek reikt, vertelt u dat de tool uw onderwerp de achtergrond is. Bijsnijden of opnieuw inkaderen zodat de hoek schoon is.

Eerste neven daarop: De achtergrond moet ongeveer één kleur zijn. Een platte witte studio sweep is één kleur Een wazig café, een sky gradiënt, een houten bureau met graan - dat zijn vele kleuren, en het gereedschap wist alleen van die in de hoek Het zal de onderdelen die toevallig overeenkomen verwijderen en laat de rest als lelijke rand.

ten tweede, Elke onderwerpkleur die overeenkomt met de achtergrond wordt ook verwijderd. Mijn witte doos op het witte bureau is de canonieke mislukking. Een persoon in een grijs overhemd tegen een grijze muur verliest het overhemd. Het gereedschap heeft geen idee dat het overhemd "subject" - het ziet alleen grijs bij de referentie grijs.

Wanneer deze tool precies goed is

Ik blijf er ondanks de limieten naar reiken, want voor een specifieke en veel voorkomende reeks afbeeldingen is het sneller en privéer dan alles op cloudbasis. het schijnt op:

Productfoto's op een stevige sweep. Schiet op een effen witte of effen gekleurde achtergrond - een vel papier, een effen rol achtergrond, een lightbox - en de uitsparing is schoon met één klik Dit is de e-commerce workflow: witte-achtergrond productafbeeldingen zijn effectief vereist op Amazon en verwacht op Etsy en eBay.

Logo's en platte afbeeldingen. Een logo geëxporteerd op een solide achtergrond, een platte illustratie, een pictogram - deze zijn al gemaakt van een paar platte kleuren, en dat is precies wat een kleursleutel wil.

Screenshots en UI-opnames. Een screenshot met een uniforme werkbalk of canvaskleurentoetsen netjes uit wanneer u alleen de inhoud nodig heeft.

Alles wat je zou hebben groen gescreend. Als je de shoot kunt besturen en je onderwerp tegen een platte, contrasterende kleur kunt plaatsen die het onderwerp doet nee Slijtage, deze tool is echt professioneel.

Wanneer moet je iets anders gebruiken?

Wees eerlijk tegen jezelf over het beeld voordat je tien minuten verspilt aan tolerantie-schuifregelaars:

Foto's van mensen met zichtbaar haar. Fijne strengen tegen elke achtergrond zijn het moeilijkste probleem in het veld, en een kleurtoets kan het niet. Bereik voor een AI-tool.

drukke of verloopachtergronden. Straten, kamers, luchten, bokeh - vele kleuren, één referentie, gegarandeerde franje.

Onderwerpen die de achtergrondkleur delen. Geen schuifregelaarinstelling Hiermee wordt een wit object op wit gefixeerd. Ofwel opnieuw schieten op een contrasterende achtergrond of gebruik segmentatie.

Hoe een achtergrond op Toolz.dev te verwijderen, stap voor stap

De interface is bewust klein. Er is geen account, geen upload, geen watermerk.

Stap 1: Open het gereedschap

ga naar de Achtergrondverwijderaar. Het geheel laadt als een pagina; er is geen model om te downloaden en geen serveraanroep.

Stap 2: Upload je afbeelding

Klik op de dropzone en kies een bestand (JPG, PNG of WEBP alle werkzaamheden).Het wordt direct in de pagina gelezen Controleer of de Linksboven hoek is achtergrond- dit is de enige kaderregel die er toe doet Als je onderwerp in die hoek vastzit, zal het resultaat verkeerd zijn, wat je ook doet.

Stap 3: Stel de tolerantie in en vervolgens Voorbeeld

de verdragen Slider loopt van 0 tot 200 en begint bij 50. Lage tolerantie verwijdert alleen kleuren heel dicht bij de hoek (veilig, maar kan een halo van pixels in de buurt achterlaten). Hoge tolerantie verwijdert een breder kleurenbereik (schoonmaker, maar eet in randen en elke bijpassende onderwerpkleur). gelukkige zet bezichtiging en kijk naar het schaakbord - dat patroon is het transparante gebied.

Stap 4: Tune

Als de achtergrond overleeft, duw de tolerantie dan omhoog en bekijk opnieuw een voorbeeld. Als uw onderwerp zijn randen verliest of gaten krijgt, duw het dan naar beneden. Je bent op zoek naar de instelling die de achtergrond leegt zonder het onderwerp aan te raken. Voor een goed geschoten platte achtergrond is er meestal een breed, comfortabel bereik dat werkt.

Stap 5: Download PNG

klikken Downloaden png. De uitvoer is altijd PNG omdat PNG het gebruikelijke webformaat is dat transparantie ondersteunt - dat is het hele punt Het bestand wordt in de browser gegenereerd en direct op uw machine opgeslagen.

Kleursleutel versus AI-uitsparing: welke wil je eigenlijk?

De rij die het voor mij beslist is Privacy Plus platte achtergronden. Als ik de shoot bedien, bedien ik de achtergrond, en dan verslaat de eerlijke, saaie kleurtoets de slimme AI-tool op snelheid en door nooit mijn niet-gepubliceerde activa ergens heen te sturen.

Een paar gewoontes die schonere resultaten krijgen

Schiet voor het gereedschap. De grootste hendel is niet de software, het is de invoer. Een onderwerp op een effen, contrasterende, gelijkmatig verlichte achtergrond snijdt in één klik uit. Vijf minuten schikken Een vel papier slaat een uurtje slider-worstelen.

Houd de hoek schoon. Frame zodat de linkerbovenhoek pixel ondubbelzinnig is achtergrond. Het is de enige referentie van het gereedschap.

Contrast beats tolerantie. Als uw onderwerp en achtergrond dicht bij elkaar in kleur zijn, slaat geen enkele schuifregelaar u op - wijzig de achtergrond, niet de instelling.

Formaat voor, comprimeren na. Als de uiteindelijke afbeelding op het web gaat, voer dan de uitsparing door de Afbeelding wijzigen gereedschap voor exacte afmetingen, dan de afbeeldingscompressor om het bestand te verkleinen. doen die nadat Verwijdering, zodat u het randdetail dat u nog steeds nodig heeft niet wegdrukt.

Houd het PNG totdat je klaar bent. Elke tussenstap moet PNG blijven, zodat de transparantie overleeft. Alleen platter worden voor JPG voor de eindbestemming als die bestemming geen PNG kan nemen - en weet dat het transparante gebied een stevige vulling wordt als je dat wel doet.

Veelgestelde vragen

Gebruikt deze tool AI om achtergronden te verwijderen?

Nee, en dat is bewust Het is een kleurtoets verwijderaar: het bemonstert de kleur linksboven in de hoek en verwijdert pixels die er dichtbij liggen, volledig in je browser Dat maakt het direct en volledig privé, maar het betekent dat het werkt op vlakke, solide achtergronden in plaats van op complexe foto's zoals een AI-model dat zou doen De tool's eigen noot zegt dat ook - voor drukke achtergronden past een AI-uitsparing beter.

Waarom heeft het een deel van mijn onderwerp verwijderd?

Omdat een deel van je onderwerp dicht in kleur was voor de achtergrond. De tool verwijdert op kleur, niet door te herkennen wat het onderwerp is, dus een wit overhemd op een witte muur, of een product in dezelfde tint als het bureau waarop het zit, wordt samen met de achtergrond verwijderd. De correctie is een achtergrond die contrasteert met het onderwerp, niet een andere schuifregelaarinstelling.

Wat verandert de tolerantie-schuifregelaar eigenlijk?

Het is de grens voor hoe verschillend een pixel kan zijn van de hoekkleur en toch wordt verwijderd. Lage tolerantie verwijdert alleen bijna identieke kleuren (veilig, maar kan een halo achterlaten). Hoge tolerantie verwijdert een groter bereik (reiniger op een vlakke sweep, maar eet randen). Het loopt van 0 tot 200 en staat standaard op 50; preview en pas aan totdat de achtergrond wordt gewist zonder het onderwerp aan te raken.

Waarom is de uitvoer altijd een PNG?

Omdat PNG transparantie ondersteunt en JPG niet. Het verwijderen van een achtergrond betekent dat pixels transparant worden, en alleen een formaat met een alfakanaal kan dat opslaan. Als u dezelfde afbeelding als JPG exporteert, stort het transparante gebied samen in een effen kleur, meestal wit.

Kan ik de achtergrond van een foto van een persoon verwijderen?

Alleen als het een cleane studio-stijl opname is tegen een vlakke, contrasterende achtergrond en de persoon niet in de buurt van die kleur is Voor alledaagse foto's met haar tegen een echte achtergrond, zal deze tool franje verlaten - dat is het geval waar een AI segmentatie tool verdient zijn keep.

Is mijn afbeelding ergens geüpload?

heel weinig . De afbeelding wordt gedecodeerd en verwerkt in de pagina met behulp van het canvas van de browser en de PNG wordt lokaal gegenereerd wanneer u downloadt. Er wordt niets naar een server gestuurd, daarom is het veilig om te gebruiken op productfoto's en activa die nog niet openbaar zijn.

Hoe verwijder ik een witte achtergrond uit een afbeelding?

Dit is het geval waarvoor het gereedschap is gebouwd. Een witte achtergrond is vlak en uniform, dus het hoekmonster landt op puur wit en een gematigde tolerantie wist het hele veld in één keer. Laat de afbeelding vallen, controleer de preview en duw de tolerantie alleen omhoog als een vage grijze rand aan de randen overleeft - studio-opnamen en gescande logo's hebben vaak een licht gebroken witte helling in plaats van echte #FFFFFF. Het enige dat je moet bekijken is wit in je onderwerp: een witte mok of een wit overhemd verdwijnt samen met de achtergrond, omdat het gereedschap overeenkomt met kleur in plaats van objecten te herkennen.

Waarom heeft mijn uitsparing een witte of gekleurde rand eromheen?

Die rand is anti-aliasing De originele afbeelding mengde het onderwerp & #39; s randpixels halverwege in de achtergrondkleur om de omtrek er glad uit te laten zien, dus die gemengde pixels zijn noch onderwerp noch achtergrond - ze zitten net buiten de tolerantiegrens en overleven de verwijdering. Het verhogen van de tolerantie eet meestal een beetje, hoewel te ver duwen begint te bijten in het onderwerp zelf. Als de rand bij elke instelling blijft bestaan, mist het onderliggende beeld eenvoudigweg voldoende contrast op de grens, en een opname tegen een meer contrasterende achtergrond zal in één seconde bevestigen wat geen enkele schuifregelaar kan.

Hoe zet ik daarna een effen kleur achter mijn uitgesneden onderwerp?

Plaats de transparante PNG op een gekleurde laag in een editor, of exporteer naar JPG via de Converter voor afbeeldingsformaat, die het transparante gebied vult met een achtergrondkleur. Voor webgebruik is een transparante PNG die op een CSS-achtergrond is gevallen, meestal het schonere pad.

inpakken

De fout die ik maakte bij die eerste productopname - een AI-uitsnede verwachten en een kleursleutel krijgen - is de fout die bijna iedereen maakt met browser achtergrondverwijderaars, en het is volledig te vermijden als je eenmaal weet wat je vasthoudt Deze tool doet één ding: het verwijdert de achtergrondkleur en laat transparantie Geef het een vlakke, contrasterende achtergrond en het is snel, gratis, onbeperkt en privé op een manier die geen enkele op uploads gebaseerde tool kan evenaren Geef het haar tegen een drukke straat en het zal je teleurstellen, en nu weet je dat je in plaats daarvan naar een andere tool moet grijpen.

beginnen met de Achtergrondverwijderaar. Maak het schot daarna schoon met Afbeelding wijzigen en de afbeeldingscompressoren converteer formaten met de Converter voor afbeeldingsformaat als dat nodig is Het draait allemaal in uw browser - niets wat u binnenlaat, verlaat ooit het tabblad.