> PNG | encode | data-uri <

S: Den konverterar det binära innehållet i en .png-fil till en ASCII-sträng med hjälp av Base64-alfabetet som definieras i RFC 4648. Den kodade texten kan släppas direkt in i en HTML-<img>-tagg, en CSS-background-image, ett e-postmeddelande, en JSON-API-nyttolast eller någon annan transport med enbart text. Själva PNG-byten är oförändrade — varje IHDR-, IDAT-, tRNS- och IEND-chunk kodas och kan återskapas exakt.

S: Dra din PNG till släppzonen (eller klicka för att bläddra). Verktyget läser filen med FileReader.readAsDataURL(), som redan returnerar en färdig data:image/png;base64,…-URI. Välj Data-URI om du vill klistra in den direkt i <img src="…">, eller Endast Base64-nyttolast om ditt API/din databas förväntar sig den råa Base64-delen utan prefixet data:image/png;base64,.

S: Nej. Base64 är en ren binär-till-text-transformation — varje byte i den ursprungliga PNG:n bevaras, inklusive alfakanalen, paletten och färgprofilen (iCCP/sRGB-chunkar). När du avkodar strängen tillbaka är filen bit-identisk med originalet. En SHA-256-hash av den avkodade PNG:n kommer att matcha originalet. Det är därför Base64 är rätt verktyg för att bädda in ikoner, logotyper och skärmdumpar där pixelnoggrannhet spelar roll.

S: Base64 använder 4 tecken för var 3:e indatabyte, så den kodade strängen är ~33 % större än den ursprungliga PNG-filen. Den exakta storleken är 4 × ⌈n / 3⌉ tecken, där n är PNG-storleken i byte. En 10 KB stor PNG blir ~13,6 KB Base64-text. Eftersom HTTP-komprimering (gzip, Brotli) hanterar Base64-text ganska bra ligger overheaden över nätet i praktiken oftast närmare 10–15 %.

S: Varje PNG-Base64-sträng börjar med iVBORw0KGgo. Det prefixet är den 8-byte långa PNG-signaturen 89 50 4E 47 0D 0A 1A 0A omkodad till Base64. Så iVBORw0KGgoAAAANSUhEUg... är alltid en PNG, och att se det prefixet är en snabb visuell kontroll på att dina data är intakta. När den paketeras som en data-URI ser den ut så här:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==

S: Klistra in hela data-URI:n i src-attributet på en <img>-tagg:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
Webbläsaren avkodar Base64-nyttolasten och renderar PNG:n exakt som om den hade laddats från en URL. Ingen extra HTTP-begäran görs, vilket är användbart för ikoner i kritiska sökvägar, e-postsignaturer och offline-first-appar.

S: Slå in data-URI:n i url()-funktionen:
.icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
För återanvändning, lagra den i en CSS-anpassad egenskap:
:root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); }
.brand { background: var(--logo); }
Inbäddade bakgrunder eliminerar en HTTP-begäran per ikon men blåser upp din CSS-fil, så använd dem endast för små ikoner (< 4 KB).

S:
JavaScript (webbläsare): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))

S: Använd Base64-PNG-data-URI:er när:
• bilden är < 4 KB (för att spara en HTTP-tur)
• du behöver bädda in den i ett HTML-e-postmeddelande (många klienter blockerar fjärrbilder)
• du levererar en HTML-rapport eller -instrumentpanel som en enda fil
• du lagrar bilden inuti en JSON-nyttolast eller en databaskolumn
Föredra en extern .png-fil när bilden är stor, återanvänds på många sidor eller behöver separat CDN-cachning.

S: Ja. Eftersom Base64 är en bit-för-bit-transformation stöds varje PNG-färgläge lika:
• RGBA / truecolor + alfa — 32-bitars färg, full transparens
• Palett (PLTE) + tRNS — indexerade palett-PNG:er med 1-bitars transparens
• Gråskala + alfa — 8/16-bitars gråskala med alfa
• 16-bitars deep color-PNG:er — PNG:er i HDR-stil som används inom medicinsk bildbehandling och vetenskaplig visualisering
Alla dessa går rent genom Base64-rundresan och visas korrekt i webbläsare som förstår PNG.

S: Nej. Base64 är en kodning, inte kryptering. Alla som kan läsa strängen kan avkoda den tillbaka till den ursprungliga PNG:n på millisekunder. Om en skärmdump innehåller ett lösenord, en API-token eller personlig information skyddar Base64-kodning den inte — använd ett riktigt krypteringslager (AES-GCM, age, PGP) ovanpå Base64-utdatan, eller transportera bilden över TLS till en server som tillämpar åtkomstkontroller.

S: Det finns ingen konstgjord gräns. Eftersom kodningen körs lokalt är gränsen din webbläsares minne — vanligtvis 100 MB+ på dator och 40–60 MB på mobil. För mycket stora PNG:er (högupplösta medicinska bilder eller satellitbilder) läser vi filen i delar och anropar btoa() på varje del så att huvudtråden förblir responsiv. Om din bild är större än ~100 MB, överväg att strömma den direkt från en kodare på serversidan i stället för att ladda in den i webbläsaren.

S: Använd PNG → Base64 för logotyper, UI-ikoner, skärmdumpar, diagram och allt med transparens eller skarpa kanter (text, grafer). PNG är förlustfritt och alfa-medvetet. Använd JPG → Base64 för fotografier eller bilder med många färger där förlustfylld komprimering är acceptabel. JPEG-filer är vanligtvis 5–20× mindre än PNG för foton, så Base64-nyttolasten är mycket kortare. Som tumregel: om bilden kommer från en kamera eller innehåller fotografiska gradienter, använd JPG; annars PNG.