Transparante PNG-bestanden, op een begrijpelijke manier uitgelegd
Iedereen vraagt om "een PNG met een transparante achtergrond", maar weinig mensen kunnen uitleggen wat dat precies inhoudt, waarom een JPG het niet kan of waarom haar altijd problemen oplevert. Hier is het hele verhaal in begrijpelijke taal.
Volledige resolutie. Geen watermerk. Echt gratis. De meeste tools voor het verwijderen van achtergronden geven je een voorbeeld van 625×400 pixels en vragen vervolgens geld voor het daadwerkelijke bestand. Dat doen wij niet.
Uw foto wordt direct van de server verwijderd nadat het bewerkte resultaat is teruggestuurd. Heeft u de gum- en herstelfuncties nodig, of wilt u een gekleurde achtergrond achter het onderwerp? Open de volledige editor.
Het alfakanaal: een vierde waarde per pixel
Een digitale foto bestaat uit een raster van pixels, en elke pixel bevat normaal gesproken drie waarden: hoeveel rood, groen en blauw licht. Combineer ze en je krijgt elke kleur op het scherm. Een transparante afbeelding voegt een vierde waarde toe (het alfakanaal)die aangeeft hoe ondoorzichtig de pixel is, meestal van 0 (volledig onzichtbaar) tot 255 (volledig zichtbaar).
Dat ene extra getal is de hele truc. Wanneer een browser, ontwerptoepassing of presentatieprogramma de afbeelding weergeeft, mengt deze elke pixel met wat erachter zit, in verhouding tot de alfawaarde. Een pixel met alfa 0 verdwijnt volledig; een pixel met alfa 128 toont de helft van zichzelf en de helft van de achtergrond die erachter ligt. Het bekende zwart-witte schaakbordpatroon dat je in beeldbewerkingsprogramma's ziet, maakt geen deel uit van de afbeelding: het is slechts een manier waarop software "niets" visualiseert.
Dat tussenliggende bereik is belangrijker dan de meeste mensen beseffen. Echte objecten eindigen niet met een scherpe lijn: haar, vacht, glas, rook en zachte schaduwen vervagen allemaal geleidelijk. Gedeeltelijke alfawaarden zorgen ervoor dat een uitgesneden afbeelding eruitziet als een foto in plaats van een sticker die met een schaar is uitgesneden.
PNG versus JPG versus WebP
Niet elk afbeeldingsformaat kan dat vierde getal opslaan, en hier begint de meeste verwarring.
| Formaat | Transparantie | Compressie | Ideaal voor |
|---|---|---|---|
| PNG | Ja, volledig 8-bits alfa | Verliesloos (grotere bestanden) | Afbeeldingen, logo's, grafische elementen, alles wat gelaagd is |
| JPG | Nee, helemaal niet | Met verlies (kleinere bestanden) | Voltooide foto's met een achtergrond |
| WebP | Ja, volledig alfa | Met of zonder verlies, kleiner dan PNG | Afbeeldingen voor het web waarbij de bestandsgrootte belangrijk is |
JPG heeft simpelweg geen alfakanaal. Het formaat werd in de vroege jaren negentig ontworpen om foto's te comprimeren en foto's vullen het hele beeld. Als je een afbeelding met transparantie als JPG opslaat, wordt de transparantie ongemerkt op een effen achtergrond (meestal wit) 'platgedrukt', waardoor deze verdwijnt. Daarom heeft een "transparante JPG" die iemand naar je stuurt altijd een witte rand rond het logo.
PNG is de veilige standaard. Het slaat alfa-informatie zonder kwaliteitsverlies op, elke tool die ooit is gemaakt accepteert het en online platforms, drukkerijen en ontwerpapps verwachten het allemaal. De keerzijde is de bestandsgrootte: een gedetailleerde foto-uitsnede als PNG kan vele malen groter zijn dan dezelfde afbeelding als JPG.
WebP is het moderne compromis. Het ondersteunt volledige transparantie en comprimeert doorgaans 25–35% kleiner dan PNG, daarom gebruiken websites het graag. Het enige nadeel is de compatibiliteit buiten de browser: sommige oudere ontwerp tools, borduur- of drukservices en uploadformulieren accepteren het nog niet. Een goede vuistregel: gebruik WebP op je eigen website en stuur PNG naar iedereen anders.
Waarom randen, vooral haar, zo lastig zijn
Het uitknippen van een koffiekop is eenvoudig: de rand is een vloeiende curve en elke pixel is duidelijk kop of duidelijk achtergrond. Haar is een ander verhaal. Een enkele haarlok is vaak dunner dan één pixel,dus de pixel waar het doorheen loopt, is een mengeling: misschien 30% haar, 70% achtergrond. Er is geen correct antwoord op de vraag "behouden of verwijderen" voor die pixel; het enige eerlijke antwoord is gedeeltelijk alfa.
Goede achtergrondverwijdering moet daarom twee problemen tegelijk oplossen. Ten eerste, schat de juiste dekking in voor elke randpixel: dat is wat een ruwe papieren pop-omtrek verandert in zacht, geloofwaardig haar. Ten tweede, verwijder de kleur van de oude achtergrond uit die gemengde pixels. Een pixel die 30% blond haar en 70% blauwe lucht was, bevat nog steeds blauw; als het blauw niet wordt verwijderd, draagt de uitsnede een spookachtige halo van de oude achtergrond over naar de nieuwe. Die rand is het kenmerkende teken van een goedkope uitsnede.
Hier komen segmentatiemodellen echt tot hun recht: ze hebben miljoenen voorbeelden van haar, vacht en zachte randen gezien en geleerd om verstandige alfawaarden te voorspellen in plaats van een binair masker dat aangeeft wat behouden of verwijderd moet worden. Daarom zijn de resultaten het beste wanneer haar contrasteert met de achtergrond: meer hierover in onze handleiding voor het maken van foto's die perfect uitgesneden kunnen worden.
Waar transparantie daadwerkelijk wordt gebruikt: PNG-bestanden voor
- Productfoto's: snijd het product één keer uit en plaats het vervolgens op een effen witte achtergrond voor marktplaatsen of op de kleuren van uw merk voor advertenties. Bekijk onze handleiding met tips voor verkopers over het gebruik van een witte achtergrond.
- Logo's: een logo met een ingebakken witte achtergrond ziet er vreemd uit op elke gekleurde pagina; een transparant PNG-bestand past naadloos in elk ontwerp.
- Profielfoto's en avatars: snijd uzelf uit en plaats een effen kleur of verloop achter uw foto voor LinkedIn, Slack of Discord.
- YouTube-thumbnails en posters: de klassieke look van "een persoon die opvalt tegen grote tekst" is een transparante uitsnede over een ontwerp heen geplaatst.
- Stickers en memes: berichtenapps verwachten transparante PNG-bestanden, zodat de sticker alleen de vorm van het onderwerp heeft.
- Presentaties en collagesAfbeeldingen worden naadloos in de dia’s geïntegreerd, in plaats van dat ze los in witte rechthoeken zweven.
Heb je nu meteen een transparante PNG nodig?
Upload elke foto naar BGNinja en download binnen enkele seconden het uitgesneden beeld: gratis, geen account nodig, er wordt niets opgeslagen.
Maak een transparante PNG →Snel antwoorden
Wat is een transparante PNG?
Een PNG waarvan de pixels naast kleur ook een alfa- (transparantie-)waarde bevatten. Waar de alfa-waarde nul is, is de achtergrond achter de afbeelding zichtbaar.
Kan een JPG transparant zijn?
Nee, JPEG heeft geen alfakanaal. Als je een uitgesneden beeld als JPG opslaat, wordt het permanent op een effen achtergrond geplaatst. Gebruik in plaats daarvan PNG of WebP.
PNG of WebP: welke moet ik kiezen?
WebP is kleiner en ideaal voor je eigen website; PNG wordt overal ondersteund. Als een platform om een transparante afbeelding vraagt zonder het formaat te specificeren, is PNG altijd de beste keuze.
Waarom heeft mijn uitgesneden beeld een witte of gekleurde rand?
De pixels aan de rand bevatten nog steeds kleur van de oude achtergrond. Een goede uitsnede verwijdert die tint; als er toch iets overblijft, kun je met BGNinja's gumtool dit wegwerken.
Door Sam Ridder — Ik ontwikkel en beheer BGNinja op mijn eigen hardware, helemaal zelf. Wie ik ben.