Sådan laver du en gennemsigtig PNG: den komplette guide

Du har brug for dit logo på et websteds mørke heltesektion. Designerens produktbillede skal placeres over en brand-farve. Din klistermærkepakke skal ligne klistermærker, ikke klistermærker-på-hvide-rektangler.

Svaret er det samme i hvert tilfælde: gennemsigtig PNG. Det magiske format, der lader resten af dit design ses, hvor billedet ikke er.

Denne guide forklarer præcis hvordan gennemsigtighed virker i billedfiler, de fire legitime måder at gøre en PNG gennemsigtig på, de tre fælder der i hemmelighed ødelægger din alfakanal, og hvorfor nogle “gratis baggrundsfjerner”-sider stille uploader dine billeder til AI-træningsdatasæt.

Hvad “gennemsigtig” faktisk betyder i en PNG

Et digitalt billede er et raster af pixels. Hver pixel gemmer farve som røde/grønne/blå værdier (0-255 hver). En standard-JPG har præcis det, tre værdier per pixel.

En gennemsigtig PNG tilføjer en fjerde værdi per pixel: alfakanalen. Den koder hvor synlig hver pixel er, fra 0 (helt gennemsigtig, du ser hvad der er bag den) til 255 (helt opak, solid farve). Værdier imellem producerer halvgennemsigtighed: nyttigt til bløde kanter, gløde-effekter, antialiased-kanter.

Standard-JPG-pixel:    [Rød, Grøn, Blå]
Gennemsigtig PNG-pixel: [Rød, Grøn, Blå, Alfa]

Denne gennemsigtighed per pixel er det, der gør PNG så fleksibel. Et logo på en gennemsigtig PNG kan placeres på enhver baggrund, lys eller mørk, billede eller solid farve, hvor som helst, og logoens kanter blander sig blødt med hvad end der er bagved.

De fire måder at gøre en PNG gennemsigtig

Der findes ingen enkelt “gør gennemsigtig”-knap. Den rigtige tilgang afhænger af, hvad du starter med.

Metode 1: Start fra en gennemsigtig kilde

Den reneste vej: tilføj ikke gennemsigtighed, bevar den gennemsigtighed, der allerede findes.

Hvis du arbejder med:

• SVG-filer (vektor, født gennemsigtig) → eksporter til PNG via SVG til PNG i enhver størrelse, gennemsigtighed bevares automatisk
• Photoshop / Affinity / Figma-filer → “Gem til web” eller “Eksporter som PNG” med “gennemsigtig baggrund” aktiveret
• Adobe Illustrator → Eksporter PNG med muligheden gennemsigtig baggrund afkrydset
• Canva → Kun Pro-plan, “PNG med gennemsigtig baggrund” download-mulighed

Gennemsigtigheden var allerede i kildedesignet; du eksporterer den blot korrekt.

Metode 2: Tryllestav / farvenøgle-fjernelse

Til billeder på simple farvede baggrunde (et logo på hvid, et produktbillede på gråt) er den hurtigste metode farvenøgle: marker alle pixels i baggrundsfarven, fjern dem.

I Photoshop, GIMP, Affinity eller Photopea (gratis browserbaseret):

1. Åbn billedet.
2. Brug tryllestavværktøjet (W-tast i Photoshop).
3. Klik på baggrunden.
4. Juster tolerance op eller ned for at fange de rigtige pixels.
5. Tryk Delete.
6. Gem som PNG.

Virker perfekt til rene studiebilleder og grafisk design med solide baggrunde. Virker ikke til billeder taget under reelle forhold, hvor “baggrunden” har subtile overgange (et logo mod en lyseblå himmel, et produkt mod en struktureret overflade).

Metode 3: AI-drevet baggrundsfjernelse

Moderne AI-modeller kan identificere et billedes motiv og adskille det fra baggrunden, selv når baggrunden er kompleks (hår, pels, løv, bevægelsesuskarphed).

De bemærkelsesværdige værktøjer:

• Remove.bg (online-tjeneste, gratis niveau begrænset, betalt til kommerciel brug)
• Adobe Photoshops “Remove Background” (Photoshop CC 2021+)
• Pixelcut, Photoroom (mobilapps, freemium)
• Lokale AI-værktøjer (kør modeller på din maskine, bedste privatliv, kræver teknisk opsætning)

Kvaliteten varierer. Til menneskelige portrætter med hår: AI-værktøjer gør det normalt godt. Til komplekst forgrund/baggrund-farvesamspil (solbriller mod skarpt lys, en person foran en lignende farvet væg): selv AI kæmper, og du har brug for manuel efterbehandling.

Metode 4: Manuel maskering (alternativet med højeste kvalitet)

Til professionel brug, brand-logoer, e-handelsproduktbilleder, der skal udskrives, producerer manuel maskering stadig de bedste resultater. Arbejdsflowet:

1. Åbn i Photoshop / Affinity / GIMP.
2. Brug Pen Tool til at spore motivets kontur præcist.
3. Konverter stien til en markering.
4. Anvend som en lagmaske.
5. Forfin maskens kanter (fjer lidt, glat ud, krymp med 1-2 pixels for et rent klip).
6. Gem som PNG med gennemsigtighed aktiveret.

Dette tager 5-30 minutter per billede afhængigt af kompleksitet, men producerer resultater, som ingen AI kan matche: pixelperfekte kanter, bevidst kontrol over hvad der er forgrund vs baggrund, ingen AI-hallucinationer.

Til engangs vigtige billeder (et brand-logo, et heltebillede) er manuel maskering investeringen værd.

Almindelige gennemsigtighedsfælder

Tre måder hvorpå din “gennemsigtige” PNG stille ikke er gennemsigtig:

Fælde 1: Gem som JPG et sted i kæden

JPG kan ikke gemme gennemsigtighed. Hvis filen på et tidspunkt i dit arbejdsflow passerede gennem JPG (nogen eksporterede som JPG, så konverterede til PNG, så tilbage), blev de gennemsigtige områder bagt ind i en solid farve (typisk hvid). PNG’en du har nu, har alfakanalen, men den er fyldt med opake pixels.

Løsning: regenerer fra kilden. Der findes ingen måde at gendanne gennemsigtighed, der blev ødelagt af en JPG-rundtur.

Fælde 2: PNG-8 vs PNG-24

PNG kommer i to varianter:

• PNG-8: indekseret farvepalet (maks 256 farver), kan have binær gennemsigtighed (hver pixel enten 0 % eller 100 % gennemsigtig, ingen bløde kanter)
• PNG-24: fuld RGB-farve, fuld 8-bits alfa (256 gennemsigtighedsniveauer per pixel, perfekte bløde kanter)

Gamle webværktøjer bruger PNG-8 som standard. Resultatet: chunky pixelerede kanter, hvor der burde være bløde antialiased-kurver.

Løsning: når du gemmer, sørg for, at dit værktøj bruger PNG-24 med alfa. I Photoshops “Gem til web”, kig efter muligheden “PNG-24” (ikke “PNG-8”). I moderne værktøjer er “PNG med gennemsigtighed” typisk PNG-24 som standard.

Fælde 3: “Hvid baggrund” autoudfyldning i skærmbilleder

Nogle værktøjer (særligt PowerPoints “Gem som billede” og Google Docs-eksport) flader stille gennemsigtighed til en hvid baggrund. Din designer kan tro, at de leverer en gennemsigtig PNG; modtageren får en hvid-rektangel-PNG.

Løsning: åbn filen i en billedredigerer og tjek lagpanelet for gennemsigtighed (typisk vist som et tern-mønster). Hvis du ser hvidt i stedet for tern, gik gennemsigtigheden tabt ved eksport.

Verificer at en PNG faktisk har gennemsigtighed

En simpel visuel test: placer PNG’en på en farvet baggrund. De fleste billedviewere viser et tern-mønster (lysegrå + hvide kvadrater), hvor der findes gennemsigtighed. Hvis du ser tern-mønsteret, er alfakanalen til stede.

Programmatisk verifikation: ethvert billedbibliotek kan læse pixelniveau-alfaværdier. I en browser:

// Indlæser PNG til canvas, læser alfa for pixel ved (10, 10)
const ctx = canvas.getContext('2d');
const data = ctx.getImageData(10, 10, 1, 1).data;
console.log('Alfa-værdi:', data[3]); // 0 = gennemsigtig, 255 = opak

Hvis du ser 255 for hver pixel, har PNG’en ingen faktisk gennemsigtighed på trods af, at den er en PNG-24-fil med en alfakanal.

Hvornår skal du bruge WebP i stedet

PNG er det mest understøttede gennemsigtighedsformat, men det har en ulempe: filstørrelse. Et logo som PNG er typisk 3-5× større end samme logo som WebP ved ligeværdig kvalitet (med fuld gennemsigtighed bevaret).

Til moderne webbrug:

• Brug PNG til garanteret kompatibilitet (Photoshop CS6, Office 2010, ældre browsere, prepress)
• Brug WebP til størrelseskritisk weblevering (97 %+ browserunderstøttelse 2026, meget mindre filer)
• Brug AVIF til cutting-edge web (bedste komprimering, men ~93 % understøttelse, har brug for fallback)

DuneTools PNG til WebP-konverter bevarer gennemsigtighed gennem konverteringen. WebP-output er mindre, identisk synlig kvalitet og virker i alle moderne browsere.

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Logo">
</picture>

Filstørrelse: hvor meget koster gennemsigtighed

Gennemsigtighed tilføjer bytes, der findes ingen gratis frokost. Den eksakte straf:

“Omkostningen” kommer fra de ekstra bytes i selve alfakanalen (typisk 8 bits per pixel for helt variabel gennemsigtighed, eller kun 1 bit for binær til/fra). Til typiske logo-PNG’er er dette ubetydeligt. Til meget højopløste PNG’er summerer det sig.

Den større størrelsesforskel mellem PNG og JPG er ikke gennemsigtighed, det er tabsfri vs tabsbaseret komprimering. PNG bevarer hver pixel præcist; JPG kasserer aggressivt detaljer. En PNG af et billede er typisk 3-10× større end JPG-tilsvarende, selv uden gennemsigtighed. Det er den vigtigste filstørrelsesstraf for at vælge PNG.

Privatliv: hvor man skal være forsigtig

At fjerne en baggrund involverer ofte at uploade billedet til en tjeneste. Risiciene varierer:

• Photoshops lokale Remove Background: kører helt på din maskine. Nul privatlivsbekymring.
• GIMP, Photopea (browserbaseret): åbner billedet lokalt. Photopea kører i browseren; intet uploades. Sikkert.
• Remove.bg, Cleanup.pictures: uploader dit billede til deres server. Privatlivspolitik varierer. Acceptabelt til offentligt indhold; risikabelt til personlige/professionelle billeder.
• AI-mobilapps (Photoroom, Pixelcut): uploader typisk til behandling. Nogle hævder lokal behandling, verificer i DevTools eller stol på deres privatlivspåstande.
• Lokale AI-værktøjer (rembg.py, BackgroundMattingV2): kører på din maskine. Bedste privatliv. Kræver teknisk opsætning.

Til engangs offentligt-indhold-baggrundsfjernelse: enhver af disse er OK. Til dine børns billede, klientens produkt før lancering eller dit ansigt i en lidet flatterende vinkel: hold det lokalt.

Reelle arbejdsflows

Den freelancende designer: modtager klientlogo som JPG (fotografens fejl). Beder om den oprindelige SVG eller lagdelte fil. Klienten har den ikke. Designeren sporer manuelt logoet i Illustrators Image Trace, eksporterer ren SVG, eksporterer derefter gennemsigtig PNG i flere størrelser (16, 32, 180, 1024 px) via SVG til PNG til forskellige leveringsoverflader.

E-handelsbutiksejeren: tager produktbilleder på hvid sømløs baggrund. Bruger Photoshops tryllestav på hvide pixels, fjerner, gemmer som gennemsigtig PNG-24. Resultat: produkter på gennemsigtig baggrund, klar til ethvert farvetema på butikken.

Brand-designeren ved lancering: har brug for logo til mørk tilstand + lys tilstand + animeret opstartsskærm. Designer i Figma med fuld gennemsigtighed. Eksporterer tre PNG-varianter fra Figmas “Export”-menu med “Gennemsigtig baggrund” aktiveret. Verificerer hver ved at vise på en farvet overflade (tern = gennemsigtig, hvid = tabt gennemsigtighed).

Marketingpersonen i et lille bureau: klientbillede at lægge over på Instagram-story. Bruger Remove.bg til AI-baggrundsfjernelse (acceptabelt fordi billedet alligevel skal til offentligt Instagram), derefter PNG til WebP til mindre filstørrelse i den endelige story. Beholder PNG-versionen til eventuelle klientrevisioner.

Almindelige spørgsmål

Min PNG ser gennemsigtig ud i Photoshop, men hvid i browseren

PNG’en selv har korrekt gennemsigtighed. Browserens standardsidebaggrund er hvid, så gennemsigtige områder viser hvid. Placer PNG’en på en farvet div eller sidens faktiske baggrund for at verificere.

Hvorfor er min gennemsigtige PNG så stor?

PNG er tabsfri og understøtter kompleks gennemsigtighed, hvilket koster bytes. Til weblevering, konverter til WebP via PNG til WebP, typisk 50-60 % størrelsesreduktion uden synlig kvalitetsforskel og fuld gennemsigtighed bevaret.

Kan jeg gøre en JPG gennemsigtig uden kvalitetstab?

Du kan slet ikke gøre en JPG gennemsigtig. Konverter til PNG først (JPG til PNG), fjern derefter baggrunden med en af metoderne ovenfor. Konverteringen til PNG er tabsfri (bevarer JPG’ens eksisterende pixeldata); baggrundsfjernelsen tilføjer derefter alfakanalen.

Hvorfor ser mine kanter takkede ud efter baggrundsfjernelse?

Sandsynligvis PNG-8 (indekseret farve med binær gennemsigtighed). Gem igen som PNG-24 med fuld alfa. Eller fjer maskens kant med 1-2 pixels i din billedredigerer, før du gemmer, producerer blødere, mere naturlige klip.

Hvordan tilføjer jeg en blød skygge til en gennemsigtig PNG?

I enhver billedredigerer: tilføj et nyt lag under dit motiv, fyld med en blød sort gradient, blur, positionér bagved. Gem som PNG med skyggen synlig. Skyggen bliver en del af PNG’ens gennemsigtige pixels (halvgennemsigtigt sort), så den vises korrekt på enhver baggrund.

Opsummeringen

Gennemsigtig PNG er det universelle svar til logoer, klistermærker, overlays, UI-elementer, produktbilleder, brand-aktiver, alt der skal vises på forskellige baggrunde uden et hårdt rektangel.

Vejen:

1. Start fra en gennemsigtig kilde når muligt (SVG, Figma, Photoshop med gennemsigtighed)
2. Brug den rigtige metode til indholdet: tryllestav til rene studiebilleder, AI til komplekse billeder, manuel maskering til vigtigt brand-arbejde
3. Gem som PNG-24 (ikke PNG-8) for at bevare bløde antialiased-kanter
4. Verificer gennemsigtighed ved at vise på en farvet baggrund, se tern eller din baggrundsfarve, ikke hvid

Til moderne web, konverter til WebP med PNG til WebP for 50-60 % størrelsesreduktion ved identisk synlig kvalitet. Behold PNG-versionen som fallback eller til kompatibilitet med ældre software.

Til AI-baggrundsfjernelse af følsomt indhold: hold det lokalt. Photoshops indbyggede værktøjer, GIMP eller lokale AI-arbejdsflows er de eneste strukturelt sikre alternativer. Skytjenester uploader dine billeder, OK til offentligt indhold, risikabelt til alt andet.

Gennemsigtig PNG er et af de mest undervurderede designværktøjer på nettet. Når du forstår, hvordan alfakanalen virker, bliver hvert brand-aktiv, hvert produktbillede, hvert socialt opslag mere fleksibelt.