Wat is een alfakanaal? Zo werkt een transparante achtergrond

Elke pixel in een gewone afbeelding wordt beschreven met drie getallen: hoeveel rood, groen en blauw erin zit. Dat is genoeg om te zeggen welke kleur de pixel heeft, maar niet of je erdoorheen kunt kijken. Het alfakanaal is een vierde getal per pixel dat precies dat doet: het slaat de dekking op, van volledig transparant tot volledig dekkend.

Als mensen het hebben over "een PNG met een transparante achtergrond", bedoelen ze een afbeelding met een alfakanaal waarin de achtergrondpixels een alfawaarde van nul hebben. Deze gids legt uit hoe dat getal werkt, op welke twee manieren software het opslaat, waarom randen misgaan en hoe je controleert wat een bestand echt bevat.

RGBA: vier kanalen per pixel

MDN omschrijft het alfakanaal eenvoudig: kleuren bestaan uit kanalen (rood, groen en blauw), en om een kleur te beschrijven "waar de achtergrond tot op zekere hoogte doorheen te zien is", komt er een vierde kanaal bij. Een afbeelding met alle vier heet RGBA.

De waarde kun je op verschillende manieren schrijven, en ze betekenen allemaal hetzelfde:

De PNG-specificatie zegt het precies: een alfawaarde van nul is volledige transparantie, de maximale waarde voor de bitdiepte is volledige dekking, en waarden daartussen zijn gedeeltelijk transparante pixels "die over een achtergrondafbeelding kunnen worden gecomponeerd".

Juist die tussenwaarden zijn belangrijk. Een goede uitsnede is niet alleen "onderwerp dekkend, achtergrond transparant". De pixels langs de rand, vooral bij haar, vacht, stof, glas en bewegingsonscherpte, zijn gedeeltelijk transparant. Daardoor ziet het onderwerp er op een nieuwe achtergrond natuurlijk uit in plaats van alsof het met een schaar is uitgeknipt.

Hoe een transparante pixel wordt getekend

Als een app je afbeelding over iets anders heen legt, mengt die elke pixel met wat erachter zit. De W3C-specificatie Compositing and Blending geeft de basisformule:

result = Cs x as + Cb x ab x (1 - as)

Cs, as = color and alpha of your image (the source)
Cb, ab = color and alpha of what is behind it (the backdrop)

In het gangbare geval van een dekkende achtergrond wordt dat een gewogen gemiddelde. Een pixel met alfa 0,3 draagt 30% van zijn eigen kleur bij en laat 70% van de achtergrond door.

Straight en premultiplied alpha

Er zijn twee manieren om de kleur van een gedeeltelijk transparante pixel op te slaan, en als die door elkaar raken, krijg je klassieke donkere of juist lichte randen.

Straight alpha (ook unassociated of non-premultiplied genoemd) slaat de kleur op alsof de pixel volledig dekkend is en bewaart de dekking apart. Een half transparante, puur rode pixel wordt opgeslagen als rood 255, groen 0, blauw 0, alfa 128.

Premultiplied alpha (ook associated genoemd) slaat de kleur op die al met de alfa is vermenigvuldigd. Dezelfde pixel wordt opgeslagen als rood 128, groen 0, blauw 0, alfa 128. Zoals de PNG-specificatie het zegt, is zo'n afbeelding "al gecomponeerd tegen een zwarte achtergrond".

Welke van de twee een bestand gebruikt, hangt af van het formaat en de software:

• PNG gebruikt altijd straight alpha. De specificatie zegt dat expliciet en merkt op dat een editor de transparantie van een afbeelding daardoor makkelijk kan aanpassen.
• Grafische pipelines, game-engines en videocompositingtools werken intern vaak met premultiplied alpha, omdat de mengberekening eenvoudiger is en filters zich beter gedragen.

De problemen beginnen als het ene programma premultiplied waarden wegschrijft en een ander die als straight leest. De kleuren langs de randen worden dan te donker, met een dunne zwarte omtrek als gevolg. Andersom worden randen te licht. Zie je bij elke uitsnede uit dezelfde tool een donkere rand, verdenk dan eerst een mismatch in premultiplication.

Waarom uitsneden een rand krijgen

Een halo is een zichtbare rand rond het onderwerp die er niet bij hoort. Er zijn vier veelvoorkomende oorzaken, elk met een eigen oplossing.

1. De oude achtergrond zit in de randpixels

Een camera legt nooit een strakke grens vast. Een pluk haar tegen een groene heg levert pixels op die deels haar en deels heg zijn. Als de uitsnede de oorspronkelijke kleuren van die pixels behoudt en ze alleen halfdoorzichtig maakt, blijft het groen erdoorheen gemengd. Op wit heeft het onderwerp dan een vage groene gloed.

De oplossing is kleurdecontaminatie: voor elke randpixel de echte voorgrondkleur schatten en die opslaan. Photoshop noemt dit Kleuren zuiveren in de werkruimte Selecteren en maskeren, en de opensourcebibliotheek rembg heeft een optie decontaminate die hetzelfde doet. Het verandert de kleuren van de rand, nooit de vorm van het masker.

2. Het masker is te hard

Heeft het masker alleen volledig dekkende en volledig transparante pixels, dan zien randen er gekarteld uit, en laat elke anti-aliasing in de originele foto een lijntje van één pixel achtergrondkleur rond het onderwerp achter. Zachte onderwerpen zoals haar hebben een zacht masker met echte tussenwaarden nodig.

3. Verborgen kleuren in transparante pixels

Een pixel met alfa nul heeft in een bestand met straight alpha nog steeds waarden voor rood, groen en blauw. Je ziet ze niet, maar bij verkleinen of vervagen worden naburige pixels gemengd, en als die verborgen kleuren wit of zwart zijn, lekken ze de zichtbare rand in. Goede beeldbibliotheken voorkomen dit door vóór het verkleinen te premultipliceren en daarna terug te rekenen.

4. De afbeelding is op een kleur afgevlakt

GIF's en palet-PNG's ondersteunen vaak alleen transparantie aan of uit, dus tools passen anti-aliasing op de rand toe tegen een mattekleur, meestal wit, voordat ze opslaan. Zo'n afbeelding ziet er op wit prima uit, maar toont een witte rand op alles wat donkerder is. Komt je uitsnede op donkere achtergronden te staan, exporteer hem dan met een volledig alfakanaal.

Maskers, mattes en alfa: de begrippen

Deze woorden overlappen en worden losjes gebruikt. Zo zijn ze meestal bedoeld:

• Alfakanaal: de dekkingswaarden in een afbeeldingsbestand, één per pixel.
• Masker: een grijswaardenafbeelding die bepaalt welke delen van een andere afbeelding zichtbaar zijn. Bij laagmaskers in Photoshop maakt wit zichtbaar en verbergt zwart, en grijstinten zijn deels zichtbaar. Een masker kun je bewerken zonder de originele pixels aan te raken. Daarom verwijderen professionals achtergronden met maskers in plaats van met de gum.
• Matte: de term uit film en compositing voor hetzelfde idee, een grijswaardenafbeelding die bepaalt wat behouden blijft. "Matting" is het probleem van zachte, nauwkeurige mattes berekenen voor lastige randen zoals haar.
• Trimap: een ruwe kaart met drie zones (zeker voorgrond, zeker achtergrond, onzeker) die sommige matting-algoritmen als startpunt gebruiken.
• Binair of hard masker: alleen zwart en wit, geen grijs. Prima voor dozen en logo's, slecht voor haar.
• Uitsnede: het eindresultaat, de kleuren van het onderwerp plus een alfakanaal.

Een masker en een alfakanaal bevatten dezelfde informatie. Met veel tools kun je beide exporteren: een transparante PNG met het alfakanaal erin, of een losse zwart-witte maskerafbeelding die je zelf in een editor of videotool toepast.

Welke formaten alfa kunnen opslaan

Voor een volledige vergelijking van deze formaten, zie PNG, JPEG of WebP.

Controleren of een afbeelding transparant is

Een bestand dat op .png eindigt, is geen bewijs van transparantie. Veel PNG's zijn volledig dekkend, en sommige "transparante" afbeeldingen die je online vindt, zijn JPEG's waarin een grijs-wit schaakbord in de pixels is geschilderd. Zo controleer je het betrouwbaar.

Op het oog

Zet de afbeelding op een donkere en op een lichte achtergrond, bijvoorbeeld in een presentatie of een ontwerptool. Bij een echte uitsnede zie je in beide gevallen de achtergrondkleur rond het onderwerp. Zie je nog steeds een schaakbord, dan hoort dat bij de afbeelding en is het geen transparantie.

Met ImageMagick

# Does the file have an alpha channel at all?
identify -format "%A\n" photo.png

# Is it fully opaque anyway? (true means no visible transparency)
identify -format "%[opaque]\n" photo.png

%A meldt het transparantiekanaal (het precieze woord verschilt tussen ImageMagick 6 en 7), en %[opaque] berekent of elke pixel volledig dekkend is. Je wilt een alfakanaal en false.

Met Python en Pillow

from PIL import Image

im = Image.open("photo.png")
print(im.mode)                    # RGBA or LA means an alpha channel
print(im.has_transparency_data)   # True if the file carries any transparency info

if "A" in im.getbands():
    lo, hi = im.getchannel("A").getextrema()
    print("alpha range:", lo, hi)  # lo == 255 means nothing is transparent

De extrema-controle vangt het veelvoorkomende geval van een RGBA-bestand waarin elke pixel dekkend is.

Als het platform alfa negeert

Sommige plekken verwijderen of negeren transparantie. Etsy zegt dat transparante PNG's niet worden ondersteund en dat transparante delen zwart kunnen worden, en marktplaatsen zoals Amazon en Walmart willen hoofdafbeeldingen sowieso op puur wit. Vlak de uitsnede in die gevallen zelf af op de achtergrondkleur, zodat je het resultaat in de hand hebt. Op je eigen website, in presentaties en in ontwerptools houd je het alfakanaal.

Snel een schoon alfakanaal

Heb je uitsneden met zachte randen nodig in plaats van harde maskers, dan levert removebackground.dev transparante PNG- of WebP-bestanden met een volledig alfakanaal, en de API kan ook alleen het grijswaardenmasker teruggeven.