Vad är en alfakanal? Hur bildtransparens egentligen fungerar, format för format

Du släpper en "transparent" PNG på en mörk bild och en vit rektangel följer med. Filen såg bra ut i redigeraren. Så vad hände? Svaret finns i en fjärde kanal som sällan får en blick. Varje pixel i en bild bär röda, gröna och blå värden, och i vissa format ett fjärde tal som kallas alfakanalen och som säger hur mycket av pixeln som ska synas.

Den här guiden förklarar vad det talet lagrar, vilka format som behåller det (PNG och WebP), vilka som reducerar det till en strömbrytare (GIF), vilka som kastar bort det (JPG), och varför SVG följer andra regler. Längs vägen läser vi alfakanalen i sju riktiga utklipp pixel för pixel, så talen nedan kommer från filer snarare än teori.

En PNG, fyra bakgrunder. Sneakern är en AI-genererad testbild utklippt med Atlas Clouds bakgrundsborttagare; filen placerades på varje bakgrund oförändrad.

Viktiga slutsatser

• En alfakanal är en fjärde kanal som lagrar opacitet för varje pixel, från 0 (helt genomskinlig) till 255 (helt solid) i en 8-bitars bild.
• PNG och WebP behåller en fullständig alfakanal. GIF kan bara flagga en palettfärg som transparent. JPG lagrar ingen transparens alls.
• Atlas Clouds gratis AI-bakgrundsborttagare returnerar en transparent PNG i den pixelstorlek du laddade upp, bearbetad inuti din webbläsare.
• I sju uppmätta utklipp var endast 0,7 % till 2,2 % av pixlarna delvis transparenta. Det tunna bandet är den anti-aliased kant som håller hår och konturer naturliga.
• En PNG som visar en vit eller svart bakgrund i en visare har oftast inte förlorat sin alfakanal. Kontrollera den mot en mörk eller schackmönstrad bakgrund innan du exporterar om något.

Vad en alfakanal lagrar inuti varje pixel

Frågar du vad en alfakanal är får du oftast en metafor. Här är talet i stället. W3C:s PNG-specifikation definierar det i en mening: "The alpha sample determines a pixel's degree of opacity, where zero means fully transparent and the maximum value means fully opaque." I en 8-bitars bild är maximum 255, vilket ger 256 steg mellan genomskinlig och solid.

PNG tillåter även 16-bitars alfa. Specifikationen tillåter bitdjup på 8 eller 16 för båda dess alfabärande färgtyper, gråskala med alfa och truecolour med alfa, och en 16-bitars alfakanal har 65 536 steg. Utanför kompositeringsflöden är 8 bitar vad du kommer att möta.

Så en RGBA-pixel är fyra tal. Tre beskriver färg, ett beskriver täckning. Ändra bara det fjärde och färgen står stilla medan pixeln tonas ut. Det är hela tricket bakom mjuka hårkanter, skuggor och glas som låter en bakgrund lysa igenom.

Ordet "transparent" döljer en viktig uppdelning. Vissa format lagrar ett fullständigt alfavärde per pixel, så en pixel kan vara 37 % synlig. Andra lagrar en enda ja-eller-nej-flagga: den här pixeln ritas, den där hoppas över. Båda kallas transparens, och bara den första kan tona ut en kant. Håll den skillnaden i minnet, för det är anledningen till att GIF-klistermärken ser taggiga ut och PNG-utklipp inte gör det.

En term till som du kommer att möta i video- och spelverktyg: premultiplied alpha. I en rak (eller opremultiplicerad) fil lagras färgvärdena i full styrka och alfa skalar dem vid visning. I en premultiplicerad fil har färgvärdena redan multiplicerats med alfa, så en halvt synlig röd pixel lagras som halvstark röd. PNG använder den raka varianten; specifikationen säger att färgvärden "are not premultiplied by the alpha value".

Idén har ett spår i dokumenten. Alvy Ray Smiths memo från 1995 om alfans historia tillskriver honom själv och Ed Catmull konceptet på 1970-talet vid New York Institute of Technology, och tillskriver Porter och Duffs artikel från 1984 att den drog gränsen mellan de två konventionerna. För vardagligt webb- och tryckarbete kan du ignorera skillnaden; din redigerare hanterar den.

Så sparar du en PNG med transparent bakgrund

Mycket av problemet med "min export är inte transparent" avgörs innan sparadialogen öppnas. Tre regler täcker det. Bakgrundslagret måste vara dolt eller borttaget, så att arbetsytan visar ett schackbräde i redigeraren. Formatet måste vara ett med alfakanal, vilket i praktiken betyder PNG eller WebP.

Och PNG-alternativet bör vara varianten med 8 bitar per kanal, ofta märkt PNG-24 eller 32-bitars, snarare än en palettversion som vissa exportörer reducerar till på-eller-av-transparens. PNG-specifikationen tillåter visserligen en indexerad bild att bära "the alpha table that associates an alpha sample with each palette entry", men du kan inte räkna med att alla verktyg använder det.

Menyvägarna nedan kommer från varje leverantörs egen dokumentation.

Vilket verktyg du än använder, titta på resultatet mot ett schackbräde innan du laddar ner. Atlas resultatpanel visar precis det, så du kan se alfakanalen arbeta innan filen ens når din disk.

Gör om vilken bild som helst till en transparent PNG med ett klick

Det snabbaste sättet att få en fil med en riktig alfakanal är att låta en segmenteringsmodell bygga en. Atlas Cloud kör ett verktyg för bakgrundsborttagning inuti webbläsarfliken, ett av en liten uppsättning gratis AI-verktyg på webbplatsen som inte kräver något konto. Du drar in ett foto, klickar på Run Free och laddar ner resultatet.

Modellen körs lokalt via WebGPU, med en WASM-fallback på maskiner utan det, och vi genomförde ett utklipp med nätverket frånkopplat. Det finns ingen vattenstämpel och ingen registrering.

Motiven är inte begränsade till porträtt. I testningen kom ett gruppfoto, en långhårig hund, en vit sneaker, en handskriven signatur, en logotyp i linjekonst och en vit skjorta fotograferad mot en vit vägg alla tillbaka som användbara utklipp, logotypen med sitt negativa utrymme öppet. Om utklippet du behöver är avsett för ett stort tryck, kombinera det med jämförelsen av gratis bilduppskalare som vi gjorde, eftersom alfakanalen skalas med bilden.

Inuti ett riktigt utklipp: var de mjuka pixlarna finns

Vi öppnade sju av dessa utdata i Python och räknade varje pixel efter dess alfavärde. Mönstret var detsamma i alla sju. Mellan 60,6 % och 98,4 % av pixlarna var helt transparenta, beroende på hur mycket av bilden motivet fyllde.

De delvis transparenta pixlarna, de med alfa mellan 8 och 250, utgjorde 0,7 % till 2,2 % av bilden. Det är ett band 1 till 3 pixlar brett som löper runt konturen, och det gör allt anti-aliasing-arbete.

Den tunna slöjan lärde oss något som definitionen ensam inte skulle göra. Alfakanalen kan lagra genomskinlighet, ändå kom slöjan tillbaka med bara 0,73 % delvis transparenta pixlar, samma tunna kontur som sneakern. Själva tyget skrevs som solitt, med grönskan bakom inbakad i dess färg. Formen bevarad, genomskinligheten förlorad. Att en fil har en alfakanal säger ingenting om huruvida en modell valde att använda mitten av intervallet.

En liten teknisk observation för den nyfikne: i alla sju filerna ligger de solida motivpixlarna på alfa 254 snarare än 255, en skillnad ingen skärm kan visa. I fullstorleks-PNG:erna vi granskade bär varje helt transparent pixel samma färgvärde, rent svart, så filen lagrar ingen dold bakgrund som skulle kunna läcka tillbaka som en frans.

Vilka bildformat som stöder transparens

Fem format täcker nästan varje fil du någonsin kommer att få. De lagrar transparens på fyra olika sätt, och skillnaden avgör om en kant kan tona ut, om filen kan animeras och hur stor den blir.

Stöder JPG transparens?

Nej. MDN:s guide till bildformat säger det rakt ut: "JPEG does not support an alpha channel." Formatet lagrar tre färgkanaler och inget annat, så när du sparar en bild med lager som JPG måste redigeraren först platta ut den mot en färg, vanligtvis vit. Den vitheten är sedan vanliga pixlar, och den följer med motivet vart filen än tar vägen.

Det är också därför en nedladdning av "transparent JPG" inte är vad den utger sig för. Antingen är filen egentligen en PNG med fel filändelse, eller så är schackbrädet du ser inmålat i pixlarna. Att byta namn på en .jpg till .png ändrar etiketten på lådan, inte innehållet. Om du behöver transparens måste JPG-filen öppnas, bakgrunden tas bort och resultatet sparas i ett format som kan hålla en alfakanal.

Transparent GIF: en färg, hårda kanter

GIF:s transparens kommer från formatets 89a-revision, och åldern syns. GIF89a-specifikationen lägger till en Graphic Control Extension med ett Transparency Index, beskrivet så här: "The Transparency Index is such that when encountered, the corresponding pixel of the display device is not modified and processing goes on to the next pixel." En post i färgtabellen förklaras genomskinlig. Varje annan pixel ritas i full styrka.

Det gör GIF-transparens till en 1-bitars historia. En pixel hoppas antingen över eller målas, och med en palett på högst 256 färger finns det inte plats för en halvt synlig kant. Sätt ett GIF-utklipp på en bakgrund som skiljer sig från den det skapades mot och konturen trappar sig som en trappa, ofta med en blek frans där anti-aliased pixlar tvingades till solitt.

Vi konverterade sneakerutklippet till GIF med en alfatröskel på 128, det vanliga standardvärdet, och förstorade samma område av snöret tre gånger. 8-bitars-sidan tonar över två eller tre pixlar. GIF-sidan är bara räta vinklar. Om du behöver en transparent GIF för en klient som inte accepterar något annat, bygg den mot den bakgrundsfärg den ska ligga på, så att fransen matchar i stället för att lysa.

WebP-transparens i förlustande och förlustfria filer

WebP är formatet som äntligen gav förlustande komprimering en alfakanal. Googles dokumentation om komprimering beskriver "another WebP mode that allows lossy encoding for RGB channels and lossless encoding for the alpha channel", och referensen för cwebp sätter standardvärdet för alfakvalitet till 100, vilket betyder att alfakanalen lagras förlustfritt om du inte begär något annat.

Googles översiktssida anger förlustfri WebP som 26 % mindre än PNG, säger att transparens tillför omkring 22 % i byte, och anger förlustande WebP med transparens som typiskt 3x mindre än PNG.

Våra egna siffror låg i den trakten. Vi tog ett utklipp på 2048 x 1152 direkt från bakgrundsborttagaren, en PNG på 1 211 KB, och sparade om det med Pillow med standardinställningar.

Förlustfri WebP landade på 660 KB, 46 % mindre, och varje alfavärde matchade PNG:n exakt. Förlustande WebP vid kvalitet 80 landade på 124 KB, och dess alfakanal var fortfarande byte för byte identisk med originalet. Det enda som ändrades var färgdata. För webbeverans av utklipp är det oftast den filen du vill ha. För en masterkopia du planerar att fortsätta redigera, håll dig till PNG eller förlustfri WebP.

SVG transparent bakgrund: ingen bakgrund att ta bort

SVG har ingen bakgrund att göra transparent, för den hade aldrig någon. En SVG-fil är en lista med ritinstruktioner: rita den här cirkeln här, fyll den med den här färgen. Inget i den listan målar arbetsytan om du inte lägger till en rektangel som täcker den. När en SVG verkar ha en vit bakgrund tittar du på sidan eller visaren bakom den.

Transparens inuti en SVG sätts per element. MDN:s referens beskriver fill-värdet none som att det inte målar någon fyllning, så insidan av en form förblir genomskinlig. Attributet fill-opacity tonar bara färgen inuti en form, medan opacity tonar hela elementet, kontur inkluderad.

Två saker ställer till det för folk. Ett rasterfoto inbäddat i en SVG via ett image-element behåller vilken alfakanal fotot än har, så en JPG inuti en SVG bär fortfarande sin vita ruta. Och att köra ett foto genom en raster-till-SVG-konverterare tar inte bort en bakgrund; den spårar bakgrunden till former tillsammans med allt annat.

Varför är min PNG inte transparent?

Kör dessa kontroller i ordning. En fil som klarar den första behöver ingen åtgärd alls.

Visaren målade bakgrunden. Bildvisare måste lägga något bakom transparenta pixlar, och många väljer vitt eller svart. Filen är oförändrad; bara visningen. Öppna samma PNG i en designapp, en webbläsarflik med en mörk sida, eller en bild med en mörk fyllning. Om rutan försvinner, stanna här.

Filen har ingen alfakanal. En JPG omdöpt till .png, en skärmbild av en transparent bild, eller en fil som passerat en meddelandeapp eller ett CMS som kodat om den kommer alla att se ogenomskinliga ut eftersom de är det. Kontrollera bildläget. I Photoshop bör panelen Channels lista en Alpha-kanal; i Windows visar Properties > Details ett bitdjup på 32 för en RGBA-PNG snarare än 24; i Python returnerar Image.open("file.png").mode RGBA. Om alfa saknas, gå tillbaka till originalet med lager och exportera igen.

Kanten är hård eller har frans. En trappstegsformad kontur pekar på 1-bitars transparens, och en blek eller färgad frans pekar på kantpixlar som fortfarande bär den gamla bakgrundsfärgen. Vårt test mot en röd vägg visade hur det går till: med en vit skjorta mot en mättad röd vägg lutade 69 % av de halvtransparenta kantpixlarna mot rött, och mot en ny bakgrund läses det bandet som en frans. Åtgärden är en ny export med 8-bitars alfa och ingen mattefärg, och, för utklipp, en neutral bakgrund i originalfotot eller en 1-pixels kontraktion av masken.

Schackbrädet är inbakat. Skala bilden. Om de grå-vita rutorna växer och krymper med bilden är de pixlar. Förhandsvisningsbilder från stockfotosajter levereras ofta så. Ladda ner den riktiga filen, eller klipp ut bakgrunden igen.

Vanliga frågor

Är en alfakanal samma sak som en lagermask?

De är kusiner. Adobes Photoshop-hjälp beskriver en alfakanal som en markering lagrad som en redigerbar gråskalemask i panelen Channels, och en lagermask fungerar på samma sätt inuti redigeraren. Skillnaden är vad som överlever exporten. En lagermask är ett redigeringsverktyg som lever i PSD:n. Alfakanalen som skrivs in i en PNG eller WebP är det utplattade resultatet av varje mask, och det är den transparens som andra appar faktiskt läser.

Hur många nivåer av transparens har en 8-bitars alfakanal?

256, från 0 (helt transparent) till 255 (helt ogenomskinlig). En 16-bitars alfakanal, som PNG också stöder, har 65 536. GIF har två: ritad eller överhoppad.

Kan jag lägga till en alfakanal i en JPG?

Inte medan den förblir en JPG, eftersom formatet inte har någon plats att lagra en. Öppna filen, separera motivet från bakgrunden och spara resultatet som PNG eller WebP. Verktyget för utklippning i webbläsaren på Atlas Cloud gör konverteringen i ett steg: JPG in, transparent PNG ut, gratis att använda och utan inloggning.

Fungerar WebP-transparens i alla webbläsare?

Aktuella versioner av de stora webbläsarna renderar WebP med alfa, och MDN:s kompatibilitetstabell för formatet är platsen att bekräfta stöd för äldre versioner du fortfarande behöver betjäna. Om en äldre publik är viktig, leverera PNG som fallback via ett picture-element.

Varför har min transparenta PNG en vit gloria?

Pixlarna längs kanten är delvis transparenta, och deras färg bär fortfarande bakgrunden de klipptes från. Mot ett vitt original ser det bandet ut som en vit gloria när du placerar utklippet på något mörkt. Exportera om med 8-bitars alfa och matte satt till none, eller dra ihop markeringen med en pixel innan du sparar.

Slutsats

Transparens är ett tal. Varje pixel i en RGBA-PNG eller WebP bär ett alfavärde från 0 till 255, och när det väl klickar sorterar de andra formaten sig själva: GIF har en enda på-av-flagga, JPG har ingenting, och SVG har ingen bakgrund att ta bort från början. De sju utklipp vi mätte placerade hela den anti-aliased kanten i ett band på 0,7 % till 2,2 % av bilden, vilket är exakt den del ett 1-bitars format kastar bort.

Om du kom hit och frågade vad en alfakanal är för att en fil vägrade bli transparent, kontrollera visaren först, sedan filens läge, sedan kanten. Och om du behöver en ren alfakanal utan att öppna en redigerare, ger en webbläsarbaserad bakgrundsborttagare dig en i en enda PNG, i den pixelstorlek du började med.