> base64 | decode | PNG <
// Avkoda Base64-strängar och data-URI:er tillbaka till PNG-bilder — alfa bevaras, omedelbar förhandsvisning, nedladdning med ett klick
Avkodad PNG visas här
Bit-perfekt
Den avkodade PNG:n är byte-identisk med originalet — alfa, palett och färgprofil överlever rundresan oskadda.
Lokal avkodning
Base64-nyttolasten avkodas i din webbläsare med atob(). Ingen serveruppladdning, ingen loggning av dina PNG-byte.
Liveförhandsvisning
Se den avkodade bilden, dess dimensioner och ungefärliga filstorlek omedelbart innan du laddar ner.
// OM BASE64 TILL PNG
Vad detta verktyg accepterar
- >Data-URI: data:image/png;base64,iVBORw0KGgo…
- >Rå PNG-Base64-nyttolast (börjar med iVBORw0KGgo)
- >Base64 med inbäddade blanksteg / radbrytningar
- >Standard RFC 4648-alfabet (+/, valfri =-utfyllnad)
- >URL-säker Base64 (-_) — normaliseras automatiskt vid avkodning
- >Unicode-medveten inklistring — BOM:er tas bort
Vanliga användningsfall
- >Spara en skärmdump från en DOM-inspektörs data-URI
- >Extrahera en logotyp från en data-uri CSS-bakgrund
- >Återställa en bild från ett JSON-API-svar
- >Återställa en bild från en TEXT-kolumn i en databas
- >Återställa en PNG från en e-post-MIME-del
- >Inspektera en ikon inbäddad i en inline-SVG
- >Felsöka en trasig <img src="data:image/png;base64,…">-tagg
Så fungerar Base64 → PNG-avkodning
Avkodaren tar bort eventuella data-URI-prefix, normaliserar blanksteg och URL-säkra tecken och anropar sedan atob() för att konvertera varje grupp på 4 tecken tillbaka till 3 binära byte. Byte-arrayen lindas in i en Blob med MIME-typen image/png, får en object-URL och renderas i ett <img>-element. Eftersom Base64 är bijektiv med binär är utdatan bit-identisk med den ursprungliga PNG:n — en SHA-256 av den avkodade filen matchar originalet.
Exempel på PNG-data-URI:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
Prestanda och kompatibilitet
- >Avkodningen är O(n) på nyttolastens längd — hanterar 100 MB+ utan problem
- >Använder webbläsarens inbyggda atob() — ingen tung JS-shim
- >Stöder APNG med flera bildrutor när visaren stöder det
- >Fungerar i alla moderna webbläsare (Chrome, Firefox, Safari, Edge)
- >Mobilanpassad förhandsvisning med nyp-för-att-zooma
- >Nedladdning använder en Blob-URL — ingen mellanliggande server-rundresa
// SÅ AVKODAR DU BASE64 TILL PNG
Steg 1: Klistra in
Klistra in Base64-strängen eller hela data-URI:n i inmatningsfältet
Steg 2: Avkoda
Klicka på [DECODE] — PNG:n renderas omedelbart i förhandsvisningen
Steg 3: Inspektera
Kontrollera dimensioner, filstorlek och alfakanal innan du sparar
Steg 4: Ladda ner
Klicka på [DOWNLOAD .png] för att spara en bit-identisk PNG på disk
// KODEXEMPEL — BASE64 TILL PNG
JavaScript (Browser)
// Decode Base64 → PNG Blob → download link
const b64 = 'iVBORw0KGgoAAAANSUhEUg...';
const bin = atob(b64);
const arr = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
const blob = new Blob([arr], { type: 'image/png' });
const url = URL.createObjectURL(blob);
window.open(url);Avkoda en rå Base64-nyttolast till en Blob och öppna den. För en fullständig data-URI accepterar <img>-taggen den direkt.
Node.js
const fs = require('fs');
const b64 = 'iVBORw0KGgoAAAANSUhEUg...';
fs.writeFileSync('out.png', Buffer.from(b64, 'base64'));En rad som använder Nodes inbyggda Buffer för att avkoda Base64 och skriva en PNG-fil.
Python
import base64
with open('out.png', 'wb') as f:
f.write(base64.b64decode('iVBORw0KGgoAAAANSUhEUg...'))Endast standardbiblioteket — avkoda Base64-text tillbaka till PNG-byte.
PHP
<?php
file_put_contents('out.png', base64_decode('iVBORw0KGgoAAAANSUhEUg...'));En rad som använder de inbyggda base64_decode() och file_put_contents().
Shell (macOS / Linux)
echo 'iVBORw0KGgoAAAANSUhEUg...' | base64 -d > out.pngPOSIX base64 -d / -D läser text från stdin och skriver den avkodade PNG:n till stdout.
// FAQ — BASE64 TILL PNG
Q: Vad är Base64-till-PNG-avkodning?
A: Den vänder en Base64-kodad PNG tillbaka till dess ursprungliga binära form. Strängen du klistrar in är 4 ASCII-tecken per 3 binära byte; avkodaren läser 4 tecken i taget, tillämpar RFC 4648-alfabetuppslagningen och skriver 3 byte per grupp tills strängen är slut. Den resulterande byte-arrayen är en fullständig, giltig PNG-fil som du kan förhandsvisa, spara eller skicka var som helst där en vanlig PNG accepteras.
Q: Hur vet jag att Base64-strängen verkligen är en PNG?
A: De första 8 byten i varje PNG är den magiska signaturen 89 50 4E 47 0D 0A 1A 0A. Base64-kodade börjar dessa 8 byte alltid med iVBORw0KGgo. Så varje Base64-sträng som börjar med iVBORw0KGgo är en PNG. Andra format har olika prefix: /9j/ är JPEG, R0lGOD är GIF, UklGR är WebP. Vår avkodare upptäcker PNG:er automatiskt från detta magiska prefix och faller tillbaka på MIME-typen i data-URI:n om den finns.
Q: Kan jag klistra in en data-URI eller bara rå Base64?
A: Båda. Om din sträng börjar med data:image/png;base64, tar avkodaren bort prefixet automatiskt. Om du klistrar in bara nyttolastdelen härleder vi PNG-MIME-typen från de magiska byten. Blanksteg, radbrytningar, vagnreturer och tabbar normaliseras före avkodning, så du kan klistra in ett snyggt formaterat JSON-svar utan att förstöra något.
Q: Den avkodade PNG:n är trasig — varför?
A: Vanliga orsaker:
• Avkortad sträng — Base64 klipptes av någonstans (t.ex. av en radgräns i din kopieringskälla). En fullständig PNG-Base64 slutar med RU5ErkJggg== (IEND-chunken); om den saknas är filen ofullständig.
• URL-säkert alfabet — om strängen använder -_ i stället för +/ (base64url) normaliserar vårt verktyg det; andra avkodare kan avvisa det.
• Dubbelkodad — PNG:n Base64-kodades två gånger. Avkoda den igen.
• Inte en PNG — nyttolasten är faktiskt JPEG eller WebP. Använd vår generiska Base64 → Bild-avkodare som upptäcker vilket format som helst automatiskt.
Q: Förlorar avkodning tillbaka till PNG någon kvalitet eller transparens?
A: Nej. Base64 är en bit-för-bit reversibel transformation. Den avkodade PNG:n är byte-identisk med originalet: alfakanal, palett (PLTE), transparens (tRNS), färgprofil (iCCP/sRGB), gamma (gAMA) och fysiska pixeldimensioner (pHYs) överlever alla. En SHA-256-hash av den avkodade filen matchar hashen av originalet. Om du ser någon skillnad skedde ändringen före kodning, inte under Base64-rundresan.
Q: Kan jag avkoda Base64 till PNG med terminalen?
A: Ja. På macOS och Linux: echo 'iVBORw0KGgo…' | base64 -d > out.png
(macOS använder -D i äldre versioner.)
På Windows PowerShell: [IO.File]::WriteAllBytes('out.png', [Convert]::FromBase64String('iVBORw0KGgo…'))
Om strängen är en fullständig data-URI, ta först bort prefixet data:image/png;base64, (de flesta shell accepterar sed 's|^data:.*base64,||').
Q: Hur stor kan Base64-PNG-inmatningen vara?
A: Vi avkodar i webbläsaren, så gränsen är din enhets minne — bekvämt 100 MB+ på skrivbordet. En avkodad PNG på 100 MB skulle behöva ~135 MB Base64-text, vilket de flesta webbläsare klistrar in utan att klaga. Om du arbetar med mycket stora vetenskapliga eller medicinska PNG:er, överväg avkodning på serversidan i stället, eftersom prestandan för atob() i webbläsaren försämras nära minnestaket.
Q: Fungerar denna avkodare offline?
A: Ja. All avkodning använder de inbyggda API:erna atob() + Uint8Array + Blob, som finns inbyggda i alla moderna webbläsare. Efter att sidan har laddats en gång kan du koppla bort nätverket och fortsätta avkoda. Inga externa tjänster, ingen server-rundresa, ingen analys av din bildnyttolast.
Q: Vad är skillnaden mellan en Base64-PNG och en vanlig PNG-fil?
A: De innehåller exakt samma byte. En vanlig .png-fil är den råa binären; en Base64-PNG-sträng är samma binär omskriven i det 64-teckens ASCII-alfabetet. Base64-formen är 33 % större men säker att lägga in i HTML-attribut, JSON-strängar, CSS-url():er och e-post. Du kan inte lägga rå PNG-byte i HTML — de innehåller noll-byte och high-bit-tecken som förstör textparsrar. Base64 är lösningen.
Q: Laddas en Base64-PNG snabbare än en separat .png-fil?
A: Bara för pyttesmå bilder. Base64 sparar en HTTP-rundresa, som kan vara 50–100 ms på en ny anslutning — användbart för kritiska UI-ikoner under 4 KB. För allt större vinner en separat .png-fil som serveras med långlivade cache-rubriker nästan alltid eftersom (a) gzip komprimerar Base64-text dåligt, (b) data-URI:er inte kan cachas oberoende och (c) de blockerar HTML-parsning. Använd Base64 för mikrotillgångar ovanför vikningen, inte hero-bilder.
Q: Kan jag avkoda Base64 till PNG utan att ladda upp datan någonstans?
A: Ja — detta verktyg körs 100 % på klientsidan. Din Base64-sträng avkodas i JavaScript på din enhet, lindas in i en Blob lokalt och visas via URL.createObjectURL(). Ingenting laddas upp. Du kan verifiera detta genom att öppna fliken Nätverk i webbläsarens dev-verktyg medan du avkodar — inga förfrågningar skickas ut. Att köra hela flödet offline (flygplansläge) fungerar också efter den första sidladdningen.
Q: Hur avkodar jag Base64 till PNG i produktionskod?
A: I Node.js: fs.writeFileSync('out.png', Buffer.from(b64, 'base64')). I Python: open('out.png','wb').write(base64.b64decode(b64)). I Go: b, _ := base64.StdEncoding.DecodeString(b64); os.WriteFile("out.png", b, 0644). I Java: Files.write(Path.of("out.png"), Base64.getDecoder().decode(b64)). I Rust: std::fs::write("out.png", base64::decode(b64)?)?. I PHP: file_put_contents('out.png', base64_decode($b64)). Standardbiblioteket i varje runtime levereras med en Base64-avkodare — du behöver sällan ett tredjepartsberoende.
Q: Base64 till PNG vs Base64 till JPG — vilken avkodare ska jag använda?
A: Använd Base64 → PNG när Base64-strängen börjar med iVBORw0KGgo (eller data-URI:n säger data:image/png;base64,). Använd Base64 → JPG när strängen börjar med /9j/4AAQ eller /9j/2wC. Om du är osäker, använd vår generiska Base64 → Bild-avkodare som inspekterar de magiska byten och väljer rätt format automatiskt. Tvinga aldrig fram ett format som inte matchar nyttolasten — den avkodade filen blir giltiga byte men oläslig.