Het alfakanaal is de vierde waarde die is opgeslagen in een pixel en die bepaalt hoe transparant deze is, naast de rode, groene en blauwe waarden die de kleur bepalen. Alpha loopt over een bereik van volledig onzichtbaar tot volledig solide, met elk niveau van gedeeltelijke transparantie daartussenin. Dit is de enige reden waarom een PNG-logo netjes over elke achtergrond kan zweven, terwijl een JPG dat niet kan JPG heeft helemaal geen alfakanaal. Transparantie is geen trucje of een eigenschap van het hele beeld; het zijn gegevens die aan elke individuele pixel zijn gekoppeld. In deze handleiding wordt uitgelegd wat het alfakanaal is, hoe het honderden transparantieniveaus opslaat, de compositiewiskunde waarmee transparante lagen worden samengevoegd, welke formaten dit ondersteunen en wat ermee gebeurt als u een afbeelding van het ene formaat naar het andere converteert.

Wat het alfakanaal eigenlijk is

Elk digitaal beeld is een raster van pixels en in elke pixel zijn getallen opgeslagen die het beschrijven. In een standaardkleurenafbeelding bevat elke pixel drie cijfers voor rood, groen en blauw. Het alfakanaal voegt een vierde getal toe dat een andere vraag beantwoordt: niet welke kleur deze pixel heeft, maar hoeveel moet je ervan zien. Een pixel kan helderrood en volledig effen zijn, helderrood en half doorzichtig, of helderrood en volledig onzichtbaar. De kleur blijft in alle drie de gevallen hetzelfde; alleen de alfa verandert. Deze scheiding tussen kleur en dekking maakt flexibele transparantie mogelijk.

De term komt uit het alpha-compositiewerk dat Thomas Porter en Tom Duff in 1984 publiceerden en waarin werd vastgelegd hoe afbeeldingen met transparantie moesten worden gecombineerd. Hun model vormt nog steeds de basis van elk modern grafisch programma, webbrowser en game-engine. Het alfakanaal is dus geen recent gemak dat aan beeldformaten is gekoppeld; het is een decennia oud idee dat stilletjes bijna alles aanstuurt wat je op een scherm ziet.

RGBA: de vierde waarde in elke transparante pixel

Wanneer een pixel transparant is, wordt deze beschreven met vier waarden in plaats van drie, geschreven als RGBA: rood, groen, blauw en alfa. Je ziet deze notatie overal in ontwerp- en webwerk. In CSS betekent een kleur als rgba(255, 0, 0, 0.5) puur rood met een dekking van 50 procent. In een afbeeldingseditor verschijnt hetzelfde idee als een dekkingsschuifregelaar op een laag. De A is altijd de dekkingswaarde, gelaagd bovenop de kleur in plaats van erin gemengd.

Alfa gescheiden houden van kleur is belangrijk. Als transparantie in de kleurwaarden zou worden ingebakken, zou een semi-transparant rood moeten worden opgeslagen als een lichter roze, en zou je het oorspronkelijke rood nooit meer kunnen herstellen of netjes op een donkere achtergrond kunnen plaatsen. Door de dekking als een eigen kanaal op te slaan, houdt het formaat de ware kleur intact en laat de software beslissen hoe deze moet worden gecombineerd met wat er achter zit. Die flexibiliteit is precies de reden waarom ontwerpers assets met een alfakanaal exporteren in plaats van ze vooraf op een achtergrond te mixen.

Hoe alpha niveaus van transparantie opslaat

Het alfakanaal slaat niet alleen maar aan of uit. In een standaard 8-bits afbeelding geldt alpha 256 verschillende niveaus, van 0 tot 255. Een waarde van 0 betekent dat de pixel volledig transparant en onzichtbaar is, 255 betekent dat deze volledig effen en ondoorzichtig is, en elk getal daartussen produceert gedeeltelijke transparantie. Een waarde van 128 zorgt ervoor dat de pixel ongeveer half doorzichtig is, waardoor de achtergrond met een sterkte van 50 procent doorschijnt.

Deze 256 niveaus zorgen ervoor dat transparantie er soepel uitziet in plaats van hard. Een slagschaduw vervaagt geleidelijk omdat de pixels afnemende alfawaarden naar de rand toe dragen. Een glas- of rookeffect werkt omdat verschillende pixels in verschillende hoeveelheden doorzichtig zijn. Hogere formaten gaan verder: 16-bit alfakanalen bieden 65.536 niveaus voor professionele composities, hoewel 8-bit standaard is voor webafbeeldingen en alles dekt wat het oog nodig heeft.

Alfacompositing: de wiskunde die lagen combineert

Wanneer een transparante pixel zich op een achtergrond bevindt, moet de software de uiteindelijke kleur bepalen die u ziet. Het doet dit met een eenvoudige mengformule. Het zichtbare resultaat is gelijk aan de voorgrondkleur maal zijn alfa, plus de achtergrondkleur maal één minus die alfa. Simpel gezegd: een pixel die voor 70 procent ondoorzichtig is, draagt voor 70 procent bij aan zijn eigen kleur en laat 30 procent van de achtergrond door.

Voer die berekening uit over elke pixel en je krijgt een zuivere compositie: een logo gemengd met een foto, een bijschrift vervaagd over een video, een menu getekend over een webpagina. Dit gebeurt voortdurend. Elke keer dat een browser een semi-transparant element tekent of een game een rookwolkje laat zien, wordt er miljoenen keren per seconde een alpha-compositing uitgevoerd. Het alfakanaal levert de dekkingswaarde die de formule voor elke pixel nodig heeft.

Anti-aliasing: waarom alpha randen vloeiend maakt

Een van de belangrijkste taken van het alfakanaal is produceren schone, anti-aliased randen. Denk aan de gebogen rand van een rond logo. Zonder transparantie zou de curve moeten worden opgebouwd uit harde vierkante pixels, waardoor deze een grillig, trapsgewijs uiterlijk krijgt. Met een alfakanaal worden de pixels langs de rand ingesteld op gedeeltelijke transparantie, waardoor de vorm geleidelijk overgaat in wat zich erachter bevindt.

Dit is de reden waarom een goed gemaakt PNG-logo er scherp uitziet op een witte pagina, een donkere pagina of een foto. De randpixels zijn niet wit of in één kleur geverfd; ze zijn deels transparant, waardoor ze goed tegen elke achtergrond afsteken. Maak dat logo plat op wit en diezelfde randpixels worden gedeeltelijk wit. Plaats de afgeplatte versie op een donkere achtergrond en je ziet een lelijke bleke halo, omdat de gladde overvloei op de verkeerde kleur was vergrendeld. Het alfakanaal zorgt ervoor dat de rand aanpasbaar blijft.

Rechte versus voorvermenigvuldigde alfa

Er zijn twee manieren om kleur en alfa samen op te slaan, en het kennen van het verschil voorkomt een reeks frustrerende bugs. In rechte alfa, blijven de kleurwaarden onaangeroerd en wordt de alfa volledig gescheiden gehouden, zo bewaart PNG transparantie. In voorvermenigvuldigde alfaworden de kleurwaarden vooraf met de alfa vermenigvuldigd, zodat een 50 procent transparant rood al als donkerder rood wordt opgeslagen.

Vooraf vermenigvuldigde alfa is gebruikelijk bij video, filmcomposities en realtime weergave, omdat bepaalde overvloeibewerkingen hierdoor sneller verlopen en donkere randen aan de randen worden vermeden. Straight alpha komt vaker voor bij stilstaande beelden en webitems, omdat hierdoor de oorspronkelijke kleur herstelbaar blijft. Er doen zich problemen voor wanneer software het ene verwacht en het andere ontvangt, waardoor randen ontstaan die er te donker of vreemd helder uitzien. Voor alledaags beeldwerk met PNG- en webafbeeldingen heeft u te maken met pure alfa, en de software regelt dit voor u.

Welke afbeeldingsformaten ondersteunen een alfakanaal

Niet elk formaat kan transparantie opslaan, en dit is het praktische detail waar mensen tijdens de conversie over struikelen:

PNG: een volledig 8-bit alfakanaal met 256 niveaus, de standaard voor transparante webafbeeldingen.
WebP: een volledig alfakanaal in zowel de verliesloze als de verliesgevende modus, terwijl kleinere bestanden worden geproduceerd dan PNG.
AVIF: een modern formaat met alpha-ondersteuning en sterke compressie, groeiend in browserondersteuning.
GIF: alleen eenvoudige aan- of uit-transparantie, zonder gedeeltelijke niveaus, zodat de randen er ruw uitzien.
TIFF en SVG: beide ondersteunen transparantie, respectievelijk gebruikt in print- en vectorwerk.
JPG en BMP: helemaal geen alfakanaal, dus ze kunnen geen transparantie opslaan.

De conclusie is dat PNG en WebP uw betrouwbare keuzes zijn wanneer transparantie moet overleven, GIF alleen werkt voor uitsnijdingen met harde randen en JPG van tafel is voor alles wat doorzichtig is.

Het alfakanaal op internet en in CSS

Op internet verschijnt het alfakanaal op twee plaatsen: in afbeeldingsbestanden en in CSS-kleurwaarden. Een transparante PNG of WebP draagt zijn alfa in het bestand zelf, zodat deze over elke pagina-achtergrond heen wordt gelaagd. CSS voegt vervolgens een tweede controlelaag toe met rgba()- en hsla()-kleuren en de opacity-eigenschap, waardoor u elementen kunt vervagen, overlays kunt tinten en glaseffecten kunt bouwen zonder de afbeeldingen helemaal te bewerken.

Deze combinatie is de reden waarom moderne interfaces er gelaagd en zacht uitzien. Een hero-sectie kan een semi-transparante donkere overlay over een foto stapelen om witte tekst leesbaar te maken, met behulp van CSS alpha, terwijl het logo bovenaan afbeelding alpha gebruikt om er netjes op te staan. Beide zijn gebaseerd op hetzelfde onderliggende idee: elke pixel heeft zijn eigen dekking, en de browser voegt alles in realtime samen.

Wat gebeurt er met alpha als je converteert naar JPG

Omdat JPG geen alfakanaal heeft, dwingt het converteren van een transparante afbeelding naar JPG een beslissing af: de transparantie moet worden vervangen door iets solide. De omvormer maakt de alfa vlakker en vult elke transparante of semi-transparante pixel met een achtergrondkleur, meestal wit. De doorzichtige gebieden worden effen en de vloeiende randen die afhankelijk waren van gedeeltelijke alfa worden vergrendeld op die vulkleur.

Dit is precies de reden waarom een logo na de conversie in een witte of zwarte doos kan belanden, of een vage halo rond de randen kan vertonen. De informatie die nodig is om het tegen een nieuwe achtergrond te laten overvloeien is verdwenen, omdat JPG het nergens kon opslaan. Als je transparantie nodig hebt om te overleven, is het antwoord om de PNG te behouden of in plaats daarvan naar WebP te converteren. Als u echt een platte afbeelding wilt, is het kiezen van de juiste vulkleur van belang. Onze omvormer kunt u wit, zwart of een aangepaste kleur voor de vulling kiezen, of WebP exporteren om het alfakanaal volledig te behouden, wat de transparante achtergrondgids loopt door.

Veelvoorkomende transparantieproblemen en hoe u deze kunt vermijden

De meeste problemen met transparantie zijn terug te voeren op het afvlakken van het alfakanaal tegen de verkeerde kleur, een stap die matting wordt genoemd. Dit zijn de gebruikelijke boosdoeners:

Witte of zwarte doos: een transparante PNG geconverteerd naar JPG vult de achtergrond met een effen kleur. Stem de vulling af op de bestemming of behoud de transparantie.
Rand halo of rand: een logo dat op wit is gematteerd en vervolgens op een donkere achtergrond is geplaatst, vertoont een bleke omtrek. Exporteer het oorspronkelijke transparante bestand opnieuw, gematteerd in de juiste kleur, of houd het transparant.
Donkere randen: vaak een rechte versus voorvermenigvuldigde alfa-mismatch. Opnieuw exporteren met het juiste alfatype verhelpt het probleem.
Verloren transparantie na bewerking: door lagen af te vlakken of op te slaan als JPG wordt de alfa weggegooid. Bewaar een gelaagde of PNG-master.

De regel die bijna al deze problemen voorkomt: bepaal de achtergrond voordat u deze afvlakt, en bewaar een origineel bestand dat nog steeds een alfakanaal heeft, zodat u het netjes opnieuw kunt exporteren.

Veelgestelde vragen

Wat is een alfakanaal?

Het alfakanaal is een waarde per pixel die de transparantie regelt, van volledig onzichtbaar tot volledig effen, opgeslagen naast de rode, groene en blauwe kleuren die de kleur van een pixel bepalen.

Wat betekent RGBA?

RGBA staat voor rood, groen, blauw en alpha. De alfawaarde bepaalt de dekking van de pixel bovenop de kleur, dus rgba(255, 0, 0, 0,5) is rood op 50 procent.

Waarom heeft PNG transparantie, maar JPG niet?

Omdat PNG bevat een alfakanaal en JPG niet. Zonder een plek om de dekking per pixel op te slaan, kan JPG helemaal geen transparantie bevatten.

Hoeveel niveaus van transparantie kan een alfakanaal opslaan?

256 niveaus in een standaard 8-bits afbeelding, van 0 voor onzichtbaar tot 255 voor effen. Professionele 16-bits alfa biedt 65.536 niveaus voor fijne composities.

Wat gebeurt er met het alfakanaal als ik converteer naar JPG?

Het is afgeplat. Transparante gebieden worden gevuld met een effen kleur, meestal wit, omdat JPG de dekkingsgegevens niet kan opslaan.

Welke afbeeldingsformaten ondersteunen een alfakanaal?

PNG, WebP, AVIF, TIFF en SVG ondersteuning alpha, waarbij PNG en WebP vloeiende gedeeltelijke transparantie bieden. GIF heeft alleen aan-of-uit-transparantie, en JPG heeft er geen.

Is gewone alfa of voorvermenigvuldigde alfa beter?

Geen van beide is universeel beter; ze passen bij verschillende banen. Straight alpha zorgt ervoor dat kleuren herstelbaar blijven en past bij stilstaande beelden, terwijl vooraf vermenigvuldigde alfa het samenvoegen van video en real-time weergave versnelt.

Hoe behoud ik transparantie bij het verkleinen van de bestandsgrootte?

Converteren naar WebP in plaats van JPG. WebP behoudt het alfakanaal en verkleint de grootte met 25 tot 35 procent, zodat de achtergrond doorzichtig blijft en het bestand lichter wordt.