Je sleept een "transparante" PNG op een donkere dia en er komt een witte rechthoek mee. Het bestand zag er in de editor prima uit. Dus wat is er gebeurd? Het antwoord zit in een vierde kanaal dat zelden aandacht krijgt. Elke pixel in een afbeelding draagt rode, groene en blauwe waarden, en in sommige formaten een vierde getal, het alfakanaal, dat aangeeft hoeveel van die pixel zichtbaar moet zijn.
Deze gids legt uit wat dat getal opslaat, welke formaten het behouden (PNG en WebP), welke het terugbrengen tot een schakelaar (GIF), welke het weggooien (JPG), en waarom SVG volgens andere regels werkt. Onderweg lazen we het alfakanaal van zeven echte uitsneden pixel voor pixel, dus de cijfers hieronder komen uit bestanden en niet uit theorie.
Eén PNG, vier achtergronden. De sneaker is een door AI gegenereerde testinvoer die met de Atlas Cloud-achtergrondverwijderaar is uitgesneden; het bestand is ongewijzigd op elke achtergrond geplaatst.
Belangrijkste punten
- Een alfakanaal is een vierde kanaal dat de dekking voor elke pixel opslaat, van 0 (volledig transparant) tot 255 (volledig dekkend) in een 8-bits afbeelding.
- PNG en WebP behouden een volledig alfakanaal. GIF kan slechts één paletkleur als transparant markeren. JPG slaat helemaal geen transparantie op.
- De gratis AI-achtergrondverwijderaar van Atlas Cloud levert een transparante PNG op de pixelgrootte die je hebt geüpload, verwerkt in je browser.
- In zeven gemeten uitsneden was slechts 0,7% tot 2,2% van de pixels gedeeltelijk transparant. Die dunne band is de anti-aliasingrand die haar en contouren natuurlijk laat lijken.
- Een PNG die in een viewer een witte of zwarte achtergrond toont, is meestal zijn alfakanaal niet kwijt. Controleer het op een donkere of schaakbordachtergrond voordat je iets opnieuw exporteert.
Wat een alfakanaal in elke pixel opslaat
Vraag wat een alfakanaal is en je krijgt meestal een metafoor. Hier is in plaats daarvan het getal. De PNG-specificatie van W3C definieert het in één zin: "De alfawaarde bepaalt de mate van dekking van een pixel, waarbij nul volledig transparant betekent en de maximale waarde volledig dekkend." In een 8-bits afbeelding is het maximum 255, wat 256 stappen tussen helder en dekkend geeft.
PNG staat ook 16-bits alfakanaal toe. De specificatie staat bitdiepten van 8 of 16 toe voor beide kleurtypen die alfakanaal kunnen dragen, grijstinten met alpha en truecolour met alpha, en een 16-bits alfakanaal heeft 65.536 stappen. Buiten compositingpijplijnen kom je 8 bits tegen.
Dus een RGBA-pixel is vier getallen. Drie beschrijven kleur, één beschrijft dekking. Verander alleen het vierde en de kleur blijft staan terwijl de pixel vervaagt. Dat is de hele truc achter zachte haarranden, slagschaduwen en glas dat een achtergrond doorlaat.
Het woord "transparant" verbergt een belangrijke splitsing. Sommige formaten slaan een volledige alfawaarde per pixel op, zodat een pixel 37% zichtbaar kan zijn. Andere slaan één ja-of-nee-markering op: deze pixel wordt getekend, die wordt overgeslagen. Beide worden transparantie genoemd, en alleen de eerste kan een rand laten vervagen. Houd dat onderscheid in gedachten, want het is de reden dat GIF-stickers er gekarteld uitzien en PNG-uitsneden niet.
Nog een term die je in video- en gamegereedschap tegenkomt: premultiplied alpha. In een straight (of unpremultiplied) bestand worden de kleurwaarden op volle sterkte opgeslagen en schaalt alpha ze op het moment van weergeven. In een premultiplied bestand zijn de kleurwaarden al met alpha vermenigvuldigd, dus een half zichtbare rode pixel wordt opgeslagen als halfsterk rood. PNG gebruikt de straight-variant; de specificatie stelt dat kleurwaarden "niet met de alfawaarde zijn vermenigvuldigd".
Het idee heeft een papieren spoor. Alvy Ray Smiths memo uit 1995 over de geschiedenis van alpha schrijft het concept toe aan zichzelf en Ed Catmull in de jaren zeventig aan het New York Institute of Technology, en schrijft de grens tussen de twee conventies toe aan de paper van Porter en Duff uit 1984. Voor alledaags web- en printwerk kun je het verschil negeren; je editor regelt het.
Een PNG met transparante achtergrond opslaan
Veel problemen met "mijn export is niet transparant" worden al beslist voordat het opslaan-dialoogvenster opent. Drie regels dekken het. De achtergrondlaag moet verborgen of verwijderd zijn, zodat het canvas in de editor een schaakbordpatroon toont. Het formaat moet er een zijn met een alfakanaal, wat in de praktijk PNG of WebP betekent.
En de PNG-optie moet het type met 8 bits per kanaal zijn, vaak aangeduid als PNG-24 of 32-bits, in plaats van een paletversie die sommige exporters terugbrengen tot aan-of-uit-transparantie. De PNG-specificatie staat wel toe dat een geïndexeerde afbeelding "de alfatabel die een alfawaarde aan elke paletingang koppelt" bevat, maar je kunt er niet op rekenen dat elk hulpmiddel die gebruikt.
De menupaden hieronder komen uit de eigen documentatie van elke leverancier.
| Software | Waar de transparante PNG-export te vinden is |
|---|---|
| Atlas Cloud-achtergrondverwijderaar | Klik op Download; het alfakanaal staat al klaar, dus er is geen formaatinstelling die je fout kunt doen |
| Photoshop | Bestand > Exporteren > Exporteren als, kies PNG als formaat en sta transparantie toe in de formaatinstellingen |
| GIMP 3.0 | Bestand > Exporteren als, noem het bestand .png; de optie "Kleurwaarden van transparante pixels opslaan" geldt alleen voor afbeeldingen met één laag |
| Figma | Selecteer het frame, voeg een PNG-export toe in de rechterzijbalk; als het frame een vulling heeft, schakel Tonen in exports uit in de sectie Vulling |
| PowerPoint | Afbeeldingsindeling > Achtergrond verwijderen, klik vervolgens met de rechtermuisknop op de afbeelding, Opslaan als afbeelding, en kies PNG in de lijst Opslaan als type |
Welk hulpmiddel je ook gebruikt, bekijk het resultaat op een schaakbordpatroon voordat je downloadt. Het resultaatpaneel van Atlas toont precies dat, zodat je het alfakanaal kunt zien werken voordat het bestand je schijf bereikt.
Zet elke afbeelding met één klik om naar een transparante PNG
De snelste manier om een bestand met een echt alfakanaal te krijgen, is een segmentatiemodel er een laten bouwen. Atlas Cloud laat een achtergrondverwijderaar in het browsertabblad draaien, een van een kleine set gratis AI-tools op de site waarvoor geen account nodig is. Je sleept een foto naar binnen, klikt op Run Free en downloadt het resultaat.
Het model draait lokaal via WebGPU, met een WASM-fallback op machines zonder WebGPU, en we hebben een uitsnede voltooid met het netwerk losgekoppeld. Er is geen watermerk en geen aanmelding.
Onderwerpen zijn niet beperkt tot portretten. In tests kwamen een groepsfoto, een langharige hond, een witte sneaker, een handgeschreven handtekening, een lijnkunstlogo en een wit shirt dat tegen een witte muur was gefotografeerd, elk terug als een bruikbare uitsnede, het logo met zijn negatieve ruimte open. Als de uitsnede die je nodig hebt voor een grote print bestemd is, combineer die dan met de vergelijking van gratis beeldopschalers die we hebben uitgevoerd, omdat het alfakanaal met de afbeelding meeschaalt.
In een echte uitsnede: waar de zachte pixels zitten
We openden zeven van die uitvoerbestanden in Python en telden elke pixel op zijn alfawaarde. Het patroon was in alle zeven hetzelfde. Tussen 60,6% en 98,4% van de pixels was volledig transparant, afhankelijk van hoeveel van het kader het onderwerp vulde.
De gedeeltelijk transparante pixels, die met alpha tussen 8 en 250, vormden 0,7% tot 2,2% van de afbeelding. Dat is een band van 1 tot 3 pixels breed rond de omtrek, en die doet al het anti-aliasingwerk.
De doorschijnende sluier leerde ons iets wat de definitie alleen niet zou doen. Het alfakanaal kan doorschijnendheid opslaan, toch kwam de sluier terug met slechts 0,73% gedeeltelijk transparante pixels, dezelfde dunne omtrek als de sneaker. De stof zelf was als solide weggeschreven, met het groen erachter in de kleur gebakken. Vorm behouden, doorschijnendheid verloren. Dat een bestand een alfakanaal heeft, zegt niets over of een model ervoor koos het midden van het bereik te gebruiken.
Een kleine technische observatie voor de nieuwsgierigen: in alle zeven bestanden zitten de solide onderwerppixels op alpha 254 in plaats van 255, een verschil dat geen enkel scherm kan tonen. In de PNG's op volledige grootte die we bekeken, draagt elke volledig transparante pixel dezelfde kleurwaarde, gewoon zwart, dus het bestand slaat geen verborgen achtergrond op die als rand terug zou kunnen lekken.
Welke afbeeldingsformaten ondersteunen transparantie
Vijf formaten dekken bijna elk bestand dat je ooit krijgt. Ze slaan transparantie op vier verschillende manieren op, en het verschil bepaalt of een rand kan vervagen, of het bestand kan animeren, en hoe groot het uiteindelijk wordt.
| Formaat | Hoe transparantie wordt opgeslagen | Niveaus | Zachte randen | Animatie |
|---|---|---|---|---|
| PNG | 8- of 16-bits alpha per pixel, of een tRNS-chunk voor geïndexeerde en enkelkleurige transparantie | 256 of 65.536 | Ja | Ja (APNG, nu onderdeel van de PNG-specificatie) |
| WebP | 8-bits alpha per pixel, in zowel lossy als lossless modus | 256 | Ja | Ja |
| GIF | Eén paletindex gemarkeerd als transparant | 2 (aan of uit) | Nee | Ja |
| SVG | Vectorvormen zonder achtergrond; dekking per element ingesteld | Continu | Ja | Ja |
| JPG | Geen | 1 | Nee | Nee |
Ondersteunt JPG transparantie?
Nee. De handleiding voor afbeeldingsformaten van MDN zegt het ronduit: "JPEG ondersteunt geen alfakanaal." Het formaat slaat drie kleurkanalen op en verder niets, dus wanneer je een gelaagde afbeelding als JPG opslaat, moet de editor die eerst op een kleur afvlakken, meestal wit. Dat wit is dan gewone pixels, en het reist met het onderwerp mee waar het bestand ook naartoe gaat.
Dit is ook waarom een download van een "transparante JPG" niet is wat die belooft. Ofwel is het bestand eigenlijk een PNG met de verkeerde extensie, ofwel is het schaakbordpatroon dat je ziet in de pixels geschilderd. Een .jpg hernoemen naar .png verandert het etiket op de doos, niet de inhoud. Als je transparantie nodig hebt, moet de JPG worden geopend, de achtergrond verwijderd en het resultaat opgeslagen in een formaat dat een alfakanaal kan bevatten.
Transparante GIF: één kleur, harde randen
De transparantie van GIF komt uit de 89a-revisie van het formaat, en zijn leeftijd is zichtbaar. De GIF89a-specificatie voegt een Graphic Control Extension toe met een Transparency Index, als volgt beschreven: "De Transparency Index is zodanig dat wanneer deze wordt aangetroffen, de overeenkomstige pixel van het weergaveapparaat niet wordt gewijzigd en de verwerking doorgaat naar de volgende pixel." Eén item in de kleurentabel wordt doorkijkend verklaard. Elke andere pixel wordt op volle sterkte getekend.
Daardoor is GIF-transparantie een 1-bits aangelegenheid. Een pixel wordt overgeslagen of geschilderd, en met een palet van hoogstens 256 kleuren is er geen ruimte voor een half zichtbare rand. Zet een GIF-uitsnede op een achtergrond die verschilt van degene waarop hij is gemaakt, en de omtrek loopt als een trap, vaak met een bleke rand waar anti-aliasingpixels naar solide zijn afgerond.
We converteerden de sneakeruitsnede naar GIF met een alfadrempel van 128, de gebruikelijke standaard, en vergrootten hetzelfde gebied van de veter drie keer. De 8-bits kant vervaagt over twee of drie pixels. De GIF-kant bestaat uit allemaal rechte hoeken. Als je een transparante GIF nodig hebt voor een klant die niets anders accepteert, bouw die dan op de achtergrondkleur waarop hij komt te staan, zodat de rand overeenkomt in plaats van op te lichten.
WebP-transparantie in lossy en lossless bestanden
WebP is het formaat dat lossy compressie eindelijk een alfakanaal gaf. De compressiedocumentatie van Google beschrijft "een andere WebP-modus die lossy codering voor RGB-kanalen en lossless codering voor het alfakanaal mogelijk maakt", en de cwebp-referentie stelt de standaard alfakwaliteit in op 100, wat betekent dat het alfavlak lossless wordt opgeslagen tenzij je iets anders vraagt.
De overzichtspagina van Google stelt lossless WebP op 26% kleiner dan PNG, zegt dat transparantie ongeveer 22% extra bytes toevoegt, en plaatst lossy WebP met transparantie op doorgaans 3x kleiner dan PNG.
Onze eigen cijfers zaten in die buurt. We namen een uitsnede van 2048 x 1152 rechtstreeks uit de achtergrondverwijderaar, een PNG van 1.211 KB, en sloegen die opnieuw op met Pillow op de standaardinstellingen.
Lossless WebP kwam uit op 660 KB, 46% kleiner, en elke alfawaarde kwam exact overeen met de PNG. Lossy WebP op kwaliteit 80 kwam uit op 124 KB, en het alfavlak was nog steeds byte voor byte identiek aan het origineel. Het enige dat veranderde, waren de kleurgegevens. Voor weblevering van uitsneden is dat meestal het bestand dat je wilt. Voor een masterbestand dat je blijft bewerken, kun je beter bij PNG of lossless WebP blijven.
SVG transparante achtergrond: geen achtergrond om te verwijderen
SVG heeft geen achtergrond om transparant te maken, omdat het er nooit een heeft gehad. Een SVG-bestand is een lijst met tekeninstructies: teken deze cirkel hier, vul hem met deze kleur. Niets in die lijst beschildert het canvas, tenzij je een rechthoek toevoegt die het bedekt. Wanneer een SVG een witte achtergrond lijkt te hebben, kijk je naar de pagina of de viewer erachter.
Transparantie binnen een SVG wordt per element ingesteld. De referentie van MDN beschrijft de fill-waarde none als het schilderen van geen vulling, zodat de binnenkant van een vorm helder blijft. Het attribuut fill-opacity vervaagt alleen de verf binnen een vorm, terwijl opacity het hele element vervaagt, inclusief de stroke.
Twee dingen zorgen voor verwarring. Een rasterfoto die via een image-element in een SVG is ingebed, behoudt welk alfakanaal de foto ook heeft, dus een JPG in een SVG draagt nog steeds zijn witte kader. En een foto door een raster-naar-SVG-converter halen verwijdert geen achtergrond; het traceert de achtergrond samen met al het andere in vormen.
Waarom is mijn PNG niet transparant?
Voer deze controles in volgorde uit. Een bestand dat de eerste doorstaat, hoeft helemaal niet te worden gerepareerd.
De viewer heeft de achtergrond geschilderd. Image viewers moeten iets achter transparante pixels zetten, en veel kiezen wit of zwart. Het bestand is onveranderd; alleen de weergave is anders. Open dezelfde PNG in een designapp, een browsertabblad met een donkere pagina, of een dia met een donkere vulling. Als het kader verdwijnt, stop dan hier.
Het bestand heeft geen alfakanaal. Een JPG die hernoemd is naar .png, een screenshot van een transparante afbeelding, of een bestand dat door een berichtenapp of CMS is gegaan die het opnieuw heeft gecodeerd, ziet er allemaal dekkend uit omdat ze dat zijn. Controleer de beeldmodus. In Photoshop moet het paneel Kanalen een Alpha-kanaal vermelden; op Windows toont Eigenschappen > Details een bitdiepte van 32 voor een RGBA-PNG in plaats van 24; in Python geeft Image.open("file.png").mode RGBA terug. Als alpha ontbreekt, ga dan terug naar het gelaagde origineel en exporteer opnieuw.
De rand is hard of heeft een randartefact. Een trapvormige omtrek wijst op 1-bit-transparantie, en een bleke of gekleurde rand wijst op randpixels die nog de oude achtergrondkleur dragen. Onze rood-muurtest liet zien hoe dat gebeurt: met een wit shirt tegen een verzadigde rode muur neigden 69% van de semi-transparante randpixels naar rood, en op een nieuwe achtergrond leest die band als een randartefact. De oplossing is opnieuw exporteren met 8-bits alpha en geen matte-kleur, en voor uitsneden een neutrale achtergrond in de originele foto of een samentrekking van het masker met 1 pixel.
Het schaakbordpatroon is ingebakken. Schaal de afbeelding. Als de grijs-witte vierkanten met de afbeelding meegroeien en krimpen, zijn het pixels. Preview-afbeeldingen van stockfotosites komen vaak zo. Download het echte bestand, of snijd de achtergrond opnieuw uit.
Veelgestelde vragen
Is een alfakanaal hetzelfde als een laagmasker?
Het zijn neefjes van elkaar. De Photoshop-hulp van Adobe beschrijft een alfakanaal als een selectie die als een bewerkbaar grijswaardenmasker in het paneel Kanalen wordt opgeslagen, en een laagmasker werkt in de editor op dezelfde manier. Het verschil is wat de export overleeft. Een laagmasker is een bewerkingshulpmiddel dat in de PSD leeft. Het alfakanaal dat in een PNG of WebP wordt geschreven, is het afgevlakte resultaat van elk masker, en het is de transparantie die andere apps daadwerkelijk lezen.
Hoeveel niveaus van transparantie heeft een 8-bits alfakanaal?
256, van 0 (volledig transparant) tot 255 (volledig dekkend). Een 16-bits alfakanaal, dat PNG ook ondersteunt, heeft 65.536. GIF heeft er twee: getekend of overgeslagen.
Kan ik een alfakanaal aan een JPG toevoegen?
Niet zolang het een JPG blijft, want het formaat heeft geen plek om er een op te slaan. Open het bestand, scheid het onderwerp van de achtergrond en sla het resultaat op als PNG of WebP. De browsergebaseerde uitsnijdtool op Atlas Cloud doet de conversie in één stap: JPG erin, transparante PNG eruit, gratis te gebruiken en zonder login.
Werkt WebP-transparantie in elke browser?
Huidige versies van de grote browsers renderen WebP met alpha, en de compatibiliteitstabel van MDN voor het formaat is de plek om ondersteuning te bevestigen voor oudere versies die je nog moet bedienen. Als een legacy-publiek belangrijk is, lever PNG dan als fallback via een picture-element.
Waarom heeft mijn transparante PNG een witte halo?
De pixels langs de rand zijn gedeeltelijk transparant, en hun kleur draagt nog de achtergrond waaruit ze zijn gesneden. Bij een wit origineel ziet die band eruit als een witte halo zodra je de uitsnede op iets donkers plaatst. Exporteer opnieuw met 8-bits alpha en matte ingesteld op none, of trek de selectie met een pixel samen voordat je opslaat.
Conclusie
Transparantie is een getal. Elke pixel in een RGBA-PNG of WebP draagt een alfawaarde van 0 tot 255, en zodra dat valt, sorteren de andere formaten zichzelf uit: GIF heeft één aan-uitmarkering, JPG heeft niets, en SVG heeft helemaal geen achtergrond om te verwijderen. De zeven uitsneden die we maten, brachten de hele anti-aliasingrand in een band van 0,7% tot 2,2% van de afbeelding, precies het deel dat een 1-bits formaat weggooit.
Als je hier kwam met de vraag wat een alfakanaal is omdat een bestand weigerde transparant te worden, controleer dan eerst de viewer, dan de modus van het bestand, en dan de rand. En als je een schoon alfakanaal nodig hebt zonder een editor te openen, geeft een browsergebaseerde achtergrondverwijderaar je er een in één PNG, op de pixelgrootte waarmee je begon.
