Base64 naar afbeelding converter

Wat is Base64 naar Afbeelding decoderen?

// A Base64 PNG payload (no prefix)
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

// The decoder infers the format from the leading bytes:
//   iVBORw0KGgo → PNG
//   /9j/        → JPEG
//   R0lGOD      → GIF
//   UklGR       → WebP
//   PHN2Zy      → SVG (<svg)

// Reconstructed as a real file, downloadable as image.png
// (1 × 1 transparent PNG, 68 bytes — lossless round trip)

Belangrijkste functies

Voorbeelden

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

1 × 1 PNG, transparant — voorbeeld weergegeven, te downloaden als .png

/9j/4AAQSkZJRgABAQEAYABgAAD…

JPEG gedetecteerd uit magic bytes — voorbeeld + download als .jpg

iVBORw0KGgoAAAANS
UhEUgAAAAEAAAAB
CAYAAAA…

Witruimte automatisch verwijderd — geldige PNG gedecodeerd

Base64 naar een afbeelding converteren

1. 1

   Plak de Base64-string

   Plak een volledige data-URI of alleen de ruwe Base64-payload. De decoder verwijdert automatisch witruimte en regeleinden en accepteert invoer met of zonder de data:-prefix.

2. 2

   Controleer het voorbeeld en de metadata

   De afbeelding verschijnt direct tegen een schaakbord zodat transparantie zichtbaar is. De tool toont de gedecodeerde afmetingen, het MIME-type en de bytegrootte — en leidt het formaat af uit magic bytes wanneer geen prefix aanwezig is.

3. 3

   Download de afbeelding

   Klik op Downloaden om het gereconstrueerde bestand met de juiste extensie op te slaan. Het decoderen is verliesvrij, dus het resultaat is byte-voor-byte identiek aan de originele geëncodeerde afbeelding.

Veelgemaakte fouten

…WjR9awAAAABJRU5ErkJggg
// missing trailing == — fails to decode

…WjR9awAAAABJRU5ErkJggg==
// complete with padding — decodes cleanly

JVBERi0xLjcN…
// this is a Base64 PDF (%PDF header), not an image

iVBORw0KGgo…
// this is a Base64 PNG — renders correctly

url("data:image/png;base64,iVBORw0KGgo…")
// the url(" and ") are not part of the data

data:image/png;base64,iVBORw0KGgo…
// just the data URI

data:image/png;base64,iVBORw0KGgo%2B%2F…
// %2B / %2F are URL-encoded + and /

data:image/png;base64,iVBORw0KGgo+/…
// URL-decode first, then decode the image

Veelvoorkomende toepassingen

Een asset uit een data-URI extraheren

Een afbeelding gevonden die inline in een stylesheet of HTML als data-URI staat en je hebt het echte bestand nodig? Plak de string, bevestig het voorbeeld en download de originele PNG, JPG of SVG — geen noodzaak om te hosten of opnieuw te maken.

Een API-respons-miniatuur inspecteren

Een API gaf een Base64-afbeeldingsveld terug en je wilt zien wat het is. Plak de payload om het direct te renderen, lees de echte afmetingen en het type en sla het op voor nadere inspectie of bugrapporten.

Een gebroken inline afbeelding debuggen

Een ingesloten afbeelding wordt niet weergegeven op je pagina. Zet de Base64 ervan hier neer: als het voorbeeld correct verschijnt, is de data geldig en zit het probleem in je opmaak of MIME-type; als het mislukt, is de string zelf afgekapt of beschadigd.

Een afbeelding herstellen uit een configuratie- of themabestand

Build-tools en thema-bundels zetten pictogrammen en logo's vaak inline als Base64. Decodeer de string om de asset weer als normaal bestand naar buiten te halen dat je kunt bewerken, opnieuw exporteren of elders hergebruiken.

Een build-tool-uitvoer verifiëren

Een bundler of script genereerde een data-URI en je wilt bevestigen dat deze geldig en correct is vóór je hem verzendt. Hier decoderen is de snelste visuele controle dat de encodeerstap de afbeelding produceerde die je verwachtte.

Base64 terug omzetten naar een deelbaar bestand

Iemand stuurde je een afbeelding als Base64-blob in een chat of document. Plak het, bekijk het voorbeeld en download een echt bestand dat je kunt openen, bijvoegen of normaal uploaden.

Technische details

Hoe decoderen werkt

De ingebouwde atob van de browser zet de Base64-payload om naar een binaire string, die de tool byte voor byte naar een Uint8Array kopieert. Die typed array wordt verpakt in een Blob met het gedetecteerde MIME-type, en een object-URL wijst het voorbeeld en de downloadlink ernaar. Elke groep van vier Base64-tekens levert drie bytes op; afsluitende =-opvulling markeert de rest van één of twee bytes. Het proces is exact en verliesvrij — de gereconstrueerde bytes komen precies overeen met het originele bestand.

Formaatdetectie via magic bytes

Wanneer de invoer geen data:-prefix heeft om een MIME-type aan te geven, identificeert de decoder het formaat uit de eerste paar Base64-tekens, die de handtekeningbytes van het bestand encoderen. iVBORw0KGgo decodeert naar de PNG-header, /9j/ naar de JPEG SOI-marker, R0lGOD naar GIF, UklGR naar de RIFF/WebP-container, PHN2Zy en PD94bWw naar SVG's

Geen netwerk, geen opslag

Decoderen, voorbeeld en download zijn allemaal lokaal. Er is geen fetch, geen XMLHttpRequest en geen serverrondgang — de enige netwerkactiviteit die de pagina ooit uitvoert, is zichzelf laden. Geplakte strings worden in het geheugen bewaard voor de levensduur van de pagina en weggegooid wanneer je deze sluit of opnieuw laadt. Dit maakt de tool veilig voor vertrouwelijke beelden en bruikbaar offline.

Aanbevolen werkwijzen

Kopieer de hele string, inclusief opvulling

Een Base64-afbeeldingsstring moet compleet zijn om te kunnen decoderen. Zorg dat je elk teken kopieert, vooral de afsluitende = of ==-opvulling — een waarde die middenin eindigt, mislukt. Als decoderen mislukt, is de volledige string opnieuw selecteren en kopiëren het eerste om te proberen.

Vertrouw de magic-byte-detectie voor strings zonder prefix

Als je alleen de ruwe payload hebt, plak deze dan zoals hij is — je hoeft geen data:-prefix met de hand te bouwen. De decoder leidt het formaat af uit de eerste bytes en wijst het juiste MIME-type en de juiste extensie toe. Voeg alleen handmatig een prefix toe als je het gedetecteerde type specifiek wilt overschrijven.

Controleer de afmetingen vóór het downloaden

Gebruik de gemelde pixelafmetingen en het MIME-type als controle dat je de bedoelde asset hebt gedecodeerd — vooral wanneer je één string uit een bestand met meerdere haalt. Een resultaat van 1×1 betekent bijvoorbeeld meestal dat je een trackingpixel hebt gepakt in plaats van de gewenste afbeelding.

Onthoud dat Base64 niet veilig is

Decoderen vereist geen sleutel, dus vertrouw nooit op Base64 om afbeeldingsinhoud te verbergen. Als je een string ontving in de verwachting dat deze beschermd was, is dat niet zo — iedereen kan deze hier in seconden decoderen. Echte bescherming vereist versleuteling en toegangscontrole, geen encodering.

Opnieuw encoderen verloopt verliesvrij

Decoderen en vervolgens opnieuw encoderen van dezelfde afbeelding is verliesvrij, dus je kunt veilig heen en weer gaan door beide tabbladen om een pipeline te testen. Als je de asset moet verkleinen, comprimeer het gedecodeerde bestand dan met onze Afbeelding comprimeren-tool vóór je het opnieuw encodeert naar een kleinere data-URI.

Veelgestelde vragen