Vad är en alfakanal? Så fungerar transparens i bilder

Varje pixel i en vanlig bild beskrivs av tre tal: hur mycket rött, grönt och blått den innehåller. Det räcker för att ange vilken färg pixeln har, men inte om man kan se igenom den. Alfakanalen är ett fjärde tal per pixel som gör just det: den lagrar opacitet, från helt transparent till helt ogenomskinlig.

När folk pratar om ”en PNG med transparent bakgrund” menar de en bild med alfakanal där bakgrundspixlarna har alfavärdet noll. Den här guiden förklarar hur talet fungerar, de två sätt som program lagrar det på, varför kanter blir fel och hur du kontrollerar vad en fil faktiskt innehåller.

RGBA: fyra kanaler per pixel

MDN definierar alfakanalen enkelt: färger består av kanaler (rött, grönt och blått), och för att beskriva en färg som bakgrunden till viss del kan synas igenom läggs en fjärde kanal till. En bild med alla fyra kallas RGBA.

Värdet kan skrivas på flera sätt, och alla betyder samma sak:

PNG-specifikationen uttrycker det exakt: alfavärdet noll är full transparens, bitdjupets högsta värde är full opacitet, och mellanliggande värden är delvis transparenta pixlar som kan kombineras mot en bakgrundsbild.

De mellanliggande värdena är det viktiga. En bra friläggning är inte bara ”motivet ogenomskinligt, bakgrunden transparent”. Pixlarna längs kanten, särskilt i hår, päls, tyg, glas och rörelseoskärpa, är delvis transparenta, och det är det som gör att motivet ser naturligt ut på en ny bakgrund i stället för att se urklippt ut med sax.

Hur en transparent pixel ritas

När en app lägger din bild ovanpå något annat blandar den varje pixel med det som ligger bakom. W3C:s specifikation Compositing and Blending ger grundformeln:

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)

I det vanliga fallet med en ogenomskinlig bakgrund blir det ett viktat medelvärde. En pixel med alfa 0,3 bidrar med 30 % av sin egen färg och släpper igenom 70 % av bakgrunden.

Rak och förmultiplicerad alfa

Det finns två sätt att lagra färgen hos en delvis transparent pixel, och att blanda ihop dem är en klassisk orsak till mörka eller ljusa fransar.

Rak alfa (straight, även kallad oassocierad eller icke-förmultiplicerad) lagrar färgen som om pixeln vore helt ogenomskinlig och håller opaciteten separat. En halvt transparent helt röd pixel lagras som rött 255, grönt 0, blått 0, alfa 128.

Förmultiplicerad alfa (premultiplied, även kallad associerad) lagrar färgen redan multiplicerad med alfavärdet. Samma pixel lagras som rött 128, grönt 0, blått 0, alfa 128. PNG-specifikationen beskriver en sådan bild som redan kombinerad mot en svart bakgrund.

Vilken variant en fil använder beror på format och program:

• PNG använder alltid rak alfa. Specifikationen säger det uttryckligen och påpekar att det gör det lätt för en bildredigerare att ändra en bilds transparens.
• Grafikpipelines, spelmotorer och verktyg för videokomposit arbetar ofta internt med förmultiplicerad alfa, eftersom blandningsmatematiken blir enklare och filtrering fungerar bättre.

Problemen börjar när ett program skriver förmultiplicerade värden och ett annat läser dem som raka. Färgerna längs kanterna blir för mörka, vilket ger en tunn svart kontur. Åt andra hållet blir kanterna för ljusa. Ser du en konsekvent mörk kant på varje friläggning från ett visst verktyg är en sådan förväxling det första du ska misstänka.

Varför friläggningar får glorior

En gloria är en synlig kant runt motivet som inte hör dit. Det finns fyra vanliga orsaker, och var och en har sin egen lösning.

1. Den gamla bakgrunden sitter kvar i kantpixlarna

En kamera fångar aldrig en ren gräns. Ett hårstrå mot en grön häck ger pixlar som är delvis hår och delvis häck. Om friläggningen behåller pixlarnas ursprungliga färger och bara gör dem halvtransparenta blir det gröna kvar. Placerat på vitt får motivet nu ett svagt grönt sken.

Lösningen är färgdekontaminering: att uppskatta den verkliga förgrundsfärgen för varje kantpixel och skriva den i stället. Photoshop kallar det ”Decontaminate Colors” i arbetsytan ”Select and Mask”, och open source-biblioteket rembg har ett alternativ decontaminate som gör samma sak. Det ändrar kantfärgerna, aldrig maskens form.

2. Masken är för hård

Om masken bara har helt ogenomskinliga och helt transparenta pixlar ser kanterna hackiga ut, och all kantutjämning i originalbilden lämnar en linje på en pixel i bakgrundsfärgen runt motivet. Mjuka motiv som hår behöver en mjuk mask med riktiga mellanvärden.

3. Dolda färger i transparenta pixlar

En pixel med alfa noll har fortfarande värden för rött, grönt och blått i en fil med rak alfa. Du ser dem inte, men när en bild skalas om eller görs suddig blandas närliggande pixlar, och om de dolda färgerna är vita eller svarta blöder de in i den synliga kanten. Bra bildbibliotek undviker det genom att förmultiplicera före omskalningen och räkna tillbaka efteråt.

4. Bilden plattades till mot en färg

GIF:ar och palett-PNG:er stöder ofta bara transparens av eller på, så verktygen kantutjämnar mot en mattfärg, oftast vit, innan filen sparas. En sådan bild ser bra ut på vitt och visar en vit frans mot allt mörkare. Ska friläggningen ligga på mörka bakgrunder, exportera den med full alfa i stället.

Masker, matter och alfa: orden

Orden överlappar och används slarvigt. Så här brukar de menas:

• Alfakanal: opacitetsvärdena som lagras i en bildfil, ett per pixel.
• Mask: en gråskalebild som styr vilka delar av en annan bild som syns. I Photoshops lagermasker visar vitt, svart döljer och grått är delvis synligt. En mask kan redigeras utan att röra originalpixlarna, och därför tar proffs bort bakgrunder med masker i stället för att sudda.
• Matt (matte): film- och kompositbranschens ord för samma idé, en gråskalebild som anger vad som behålls. ”Matting” är problemet att beräkna mjuka, exakta matter för svåra kanter som hår.
• Trimap: en grov karta i tre zoner (säkert förgrund, säkert bakgrund, osäkert) som vissa matting-algoritmer använder som utgångspunkt.
• Binär eller hård mask: bara svart och vitt, inga gråtoner. Bra för lådor och logotyper, dåligt för hår.
• Friläggning: det färdiga resultatet, motivets färger plus en alfakanal.

En mask och en alfakanal innehåller samma information. Många verktyg kan exportera båda: en transparent PNG med inbyggd alfa, eller en separat svartvit maskbild som du själv kan tillämpa i en bildredigerare eller ett videoverktyg.

Vilka format kan lagra alfa

För en fullständig jämförelse av formaten, se PNG, JPEG eller WebP.

Så kontrollerar du om en bild har transparens

En fil som slutar på .png bevisar inte att den är transparent. Många PNG:er är helt ogenomskinliga, och vissa ”transparenta” bilder på nätet är JPEG:er med ett grått och vitt rutmönster målat i pixlarna. Här är pålitliga sätt att kontrollera.

Med ögat

Lägg bilden på en mörk och en ljus bakgrund, till exempel i en presentation eller ett designverktyg. En riktig friläggning visar bakgrundsfärgen runt motivet i båda fallen. Ser du fortfarande ett rutmönster är det en del av bilden, inte transparens.

Med 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 rapporterar transparenskanalen (exakt vilket ord som skrivs ut skiljer sig mellan ImageMagick 6 och 7), och %[opaque] räknar ut om varje pixel är helt ogenomskinlig. Du vill ha en alfakanal och false.

Med Python och 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

Kontrollen av extremvärdena fångar det vanliga fallet med en RGBA-fil där varje pixel är ogenomskinlig.

När plattformen ignorerar alfa

Vissa ställen tar bort eller ignorerar transparens. Etsy skriver att transparenta PNG:er inte stöds och att transparenta ytor kan bli svarta, och marknadsplatser som Amazon och Walmart vill ändå ha huvudbilder på helvitt. Platta i de fallen själv till friläggningen mot bakgrundsfärgen så att du styr resultatet. På din egen webbplats, i presentationer och i designverktyg, behåll alfan.

Få en ren alfakanal snabbt

Behöver du friläggningar med mjuka kanter i stället för hårda masker skapar removebackground.dev transparenta PNG- eller WebP-filer med full alfakanal, och dess API kan också returnera enbart gråskalemasken.