Base64 naar Afbeelding

Base64 invoer0 Tekens

Zet Base64-gecodeerde gegevens online om naar afbeeldingen die je direct kunt previewen en downloaden, met ondersteuning voor 7+ gangbare afbeeldingsformaten zoals PNG/JPG/WebP/GIF/SVG. Automatische herkenning van Data URL-voorvoegsels, directe preview in de browser, geschikt voor API-debugging en coderingverificatie.

Gerelateerde aanbevelingen

Wat is Base64 naar Afbeelding?

Base64 naar Afbeelding is het omgekeerde proces van Base64-codering: het herstelt een Base64-gecodeerde tekenreeks naar de originele binaire afbeeldingsgegevens (formaten zoals PNG/JPG/WebP/GIF/SVG) en geeft deze direct weer in de browser of downloadt deze als lokaal afbeeldingsbestand. Dit is een essentiële tool voor het verwerken van afbeeldingen van API's, inline bronnen (Data URL), Base64 e-mailbijlagen en vergelijkbare scenario's.

**Kernprincipe:** Base64 codeert binaire gegevens naar 64 afdrukbare ASCII-tekens (A-Z, a-z, 0-9, +, /). Bij het converteren naar afbeelding wordt deze ASCII-tekenreeks teruggezet naar de originele binaire bytestroom, die vervolgens door de browser wordt geparseerd en weergegeven als afbeeldingspixels op basis van het opgegeven MIME-type (zoals image/png). Een Data URL (zoals `data:image/png;base64,iVBORw0KGgo...`) is een combinatie van Base64 + MIME-voorvoegsel; de tool herkent en verwerkt dit automatisch.

**Typische gebruiksscenario's:** ①API-debugging: Veel API's retourneren Base64-tekenreeksen voor afbeeldingscaptcha's, gebruikersavatars, elektronische handtekeningen die de frontend moet herstellen en bekijken; ②Frontend-ontwikkeling: Kleine pictogrammen embedded in Data URL (CSS background-image: url(data:image/png;base64,...)) kunnen in de tool worden geplakt om het werkelijke effect te bekijken; ③E-mailbijlage herstel: MIME Base64-gecodeerde bijlagen kunnen worden gedecodeerd en opgeslagen als originele afbeeldingen; ④Webscraper-gegevens: Afbeeldingen in Base64 van webscraping kunnen worden gedecodeerd en opgeslagen als lokale bestanden; ⑤OCR-voorverwerking: Decodeer afbeeldingen en gebruik OCR-tools om de inhoud te herkennen.

**Ondersteunde afbeeldingsformaten:** De tool ondersteunt alle afbeeldings-MIME-typen die browsers standaard herkennen: PNG (image/png), JPG/JPEG (image/jpeg), WebP (image/webp), GIF (image/gif), SVG (image/svg+xml), BMP (image/bmp), AVIF (image/avif), ICO (image/x-icon), etc. Elk formaat heeft verschillende compressie-algoritmen en toepassingsscenario's: PNG is lossless en geschikt voor pictogrammen en screenshots, JPG is lossy en geschikt voor foto's, WebP wordt aanbevolen voor moderne browsers, SVG is vector en geschikt voor pictogrammen en logo's.

**Decodeerveiligheid:** Alle decodeerbewerkingen worden in de browser uitgevoerd met JavaScript (gebaseerd op `atob()` + `TextDecoder` of `Blob` API); binaire afbeeldingsgegevens worden naar geen enkele server geüpload. Base64-tekenreeksen met gevoelige informatie (zoals gebruikersavatars, interne screenshots) kunnen veilig worden gebruikt; alle gegevens worden automatisch gewist wanneer de pagina wordt gesloten.

Toepassingsgevallen

  • Base64-afbeeldingsgegevens van API's herstellen naar afbeeldingsbestanden die kunnen worden bekeken en gedownload
  • Controleren of frontend inline afbeeldingsbronnen (Data URL-formaat) correct zijn gecodeerd
  • Bij het debuggen van afbeeldingsupload-API's bevestigen of de Base64-inhoud compleet is
  • Base64-afbeeldingen opslaan als lokale PNG/JPG-bestanden voor ontwerp of documentatie
  • Base64-gecodeerde e-mailbijlagen decoderen en herstellen naar afbeeldingen
  • Base64-afbeeldingen van webscraping herstellen en opslaan op schijf
  • Data URL decoderen om de werkelijke renderweergave van SVG-pictogrammen te controleren
  • Base64-afbeeldingen van OCR/AI API's herstellen naar lokale bestanden om te bekijken

Hoe te gebruiken

  1. Plak de Base64-gecodeerde afbeeldingsgegevens (met of zonder Data URL-voorvoegsel, zoals data:image/png;base64,iVBORw0KG...)
  2. De tool detecteert automatisch het MIME-type en decodeert (herkent in Data URL, of snift op basis van inhoudsheader)
  3. Rechts wordt realtime de afbeeldingspreview en bestandsgrootte, afmetingen weergegeven
  4. Klik op "Download" om op te slaan als lokaal afbeeldingsbestand, of rechtermuisknop op afbeelding "Afbeelding opslaan als"
  5. Als decodering mislukt, kun je handmatig het MIME-type opgeven of de Base64 Clean-tool gebruiken voor voorbewerking

Functies

  • Online afbeelding preview: Na decodering wordt de afbeelding direct in de browser weergegeven, zonder downloaden naar lokaal
  • Multi-formaat ondersteuning: Ondersteunt 7+ gangbare afbeeldings-MIME-typen zoals PNG/JPG/WebP/GIF/SVG/BMP/AVIF
  • Automatische Data URL-herkenning: Verwijdert automatisch data:image/png;base64, voorvoegsel en extraheert pure Base64-inhoud voor decodering
  • Pure Base64-invoer: Ondersteunt pure Base64-tekenreeksen zonder voorvoegsel, MIME-type kan worden opgegeven
  • Afbeeldingsbestand downloaden: Met één klik de gedecodeerde afbeelding opslaan als lokaal PNG/JPG-bestand
  • Realtime tekenstelling: Toont realtime het aantal ingevoerde tekens, gedecodeerde bytes, handig voor het schatten van afbeeldingsgrootte
  • Foutdetectie: Bij mislukte decodering wordt de specifieke foutlocatie weergegeven (ongeldige Base64-tekens, onjuiste lengte, MIME-mismatch)
  • Lokaal in browser, geen uploads: Alle decodering en preview gebeuren in de browser, zonder tussenkomst van servers
  • Volledig achterwaarts compatibel: Werkt samen met de tool "Afbeelding naar Base64" voor een complete bidirectionele conversieworkflow

Codevoorbeelden

JavaScript: Standaard browserdecodering + Blob URL preview

javascript

Gebruik standaard browser atob() + TextDecoder + Blob API om Base64 te decoderen en afbeeldingen in de browser weer te geven.

// Base64 → Afbeelding (standaard browserimplementatie)
function base64ToImage(base64String, mimeType = 'image/png') {
  // 1. Verwijder Data URL-voorvoegsel (indien aanwezig)
  const clean = base64String.replace(/^data:image\/\w+;base64,/, '');

  // 2. Standaard browser atob() decoderen naar binaire tekenreeks
  const binary = atob(clean);

  // 3. Converteren naar Uint8Array
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }

  // 4. Blob URL aanmaken voor <img> tag preview
  const blob = new Blob([bytes], { type: mimeType });
  const url = URL.createObjectURL(blob);

  // 5. img.src instellen voor preview
  const img = document.createElement('img');
  img.src = url;
  img.onload = () => {
    console.log(`Afbeeldingsgrootte: ${img.width}x${img.height}`);
    console.log(`Bestandsgrootte: ${bytes.byteLength} bytes`);
  };

  return { img, url, size: bytes.byteLength };
}

// Gebruiksvoorbeeld:
const result = base64ToImage('iVBORw0KGgoAAAANSUhEUgAAAAUA...');
document.body.appendChild(result.img);

// Blob URL vrijgeven (geheugenlek voorkomen)
setTimeout(() => URL.revokeObjectURL(result.url), 60000);

Python: base64 bibliotheek decoderen en afbeelding opslaan

python

Python standaardbibliotheek base64 decodeert Base64-gegevens naar binaire afbeeldingsstroom, op te slaan met PIL/Pillow of ingebouwde bestandsbewerkingen.

import base64
from pathlib import Path

def base64_to_image(base64_string: str, output_path: str, mime_type: str = 'image/png'):
    """Decodeer Base64-tekenreeks en sla op als afbeeldingsbestand"""

    # 1. Verwijder Data URL-voorvoegsel
    if base64_string.startswith('data:image'):
        # Formaat: data:image/png;base64,iVBORw0...
        header, base64_string = base64_string.split(',', 1)
        # Automatisch MIME uit header extraheren
        if 'image/' in header:
            mime_type = header.split('data:')[1].split(';')[0]

    # 2. Decoderen
    image_bytes = base64.b64decode(base64_string)

    # 3. Opslaan naar bestand
    output_file = Path(output_path)
    output_file.parent.mkdir(parents=True, exist_ok=True)
    output_file.write_bytes(image_bytes)

    print(f"✅ Opgeslagen: {output_file}")
    print(f"   Bestandsgrootte: {len(image_bytes):,} bytes")
    print(f"   MIME-type: {mime_type}")

    return output_file


# Gebruiksvoorbeeld:
# 1. Base64-tekenreeks uit API-antwoord
api_base64_response = "iVBORw0KGgoAAAANSUhEUgAA..."

# 2. Decoderen en opslaan
base64_to_image(api_base64_response, 'output/captcha.png')

# 3. Optioneel: Verdere verwerking met PIL
try:
    from PIL import Image
    img = Image.open('output/captcha.png')
    print(f"Afbeeldingsgrootte: {img.size}")
    img.save('output/captcha.png', optimize=True)
except ImportError:
    print('Installeer Pillow voor afbeeldingsverwerking: pip install Pillow')

Java: java.util.Base64 + ImageIO afbeelding decoderen

java

Java standaardbibliotheek Base64 decodeert binaire afbeeldingsstroom, met ImageIO/BufferedImage voor afbeeldingsmetadataverwerking.

import java.io.*;
import java.util.Base64;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;

public class Base64ToImage {
    public static void main(String[] args) throws Exception {
        String base64String = "iVBORw0KGgoAAAANSUhEUgAA...";
        String mimeType = "image/png";

        // 1. Verwijder Data URL-voorvoegsel (indien aanwezig)
        if (base64String.startsWith("data:image")) {
            int commaIdx = base64String.indexOf(',');
            String header = base64String.substring(0, commaIdx);
            base64String = base64String.substring(commaIdx + 1);
            // MIME uit header extraheren
            if (header.contains("image/")) {
                mimeType = header.substring(header.indexOf("data:") + 5, header.indexOf(";"));
            }
        }

        // 2. Base64 decoderen
        byte[] imageBytes = Base64.getDecoder().decode(base64String);

        // 3. Opslaan naar bestand
        String extension = mimeType.substring("image/".length());
        File outputFile = new File("output." + extension);
        try (FileOutputStream fos = new FileOutputStream(outputFile)) {
            fos.write(imageBytes);
        }
        System.out.println("✅ Opgeslagen: " + outputFile.getAbsolutePath());
        System.out.println("   Bestandsgrootte: " + imageBytes.length + " bytes");

        // 4. (Optioneel) Afbeeldingsmetadata lezen
        ByteArrayInputStream bais = new ByteArrayInputStream(imageBytes);
        BufferedImage image = ImageIO.read(bais);
        if (image != null) {
            System.out.println("Afbeeldingsgrootte: " + image.getWidth() + "x" + image.getHeight());
        }
    }
}

Veelgestelde vragen

Welke afbeeldingsformaten worden ondersteund?

Ondersteunt alle afbeeldings-MIME-typen die browsers standaard herkennen, zoals PNG, JPG, WebP, GIF, SVG, BMP, AVIF, ICO. De tool bepaalt automatisch op basis van het MIME-voorvoegsel in de Data URL of invoerkarakteristieken; je kunt ook handmatig het MIME-type opgeven in de interface. Het juiste formaat selecteren zorgt ervoor dat de browser correct decodeert en weergeeft.

Moet de invoer het voorvoegsel data:image/png;base64 hebben?

Nee. De tool ondersteunt twee invoerformaten: ①Pure Base64-tekenreeks (zoals iVBORw0KGgoAA...), waarbij je in de interface het MIME-type moet selecteren (zoals PNG/JPG); ②Data URL-formaat (zoals data:image/png;base64,iVBORw0KGgo...), waarbij de tool automatisch het MIME-type in het voorvoegsel herkent en decodeert. Beide invoermethoden worden ondersteund.

Kan ik direct in de browser previewen?

Ja. De gedecodeerde afbeelding wordt via Blob URL direct in de browser weergegeven, met ondersteuning voor online preview. Nadat je de inhoud hebt gecontroleerd, kun je deze downloaden als lokaal bestand of de Data URL kopiëren voor insluiting in HTML/CSS. Het gehele previewproces vereist geen netwerkverzoeken.

Wat is het verschil met de Base64 naar Bestand-tool?

Base64 naar Afbeelding is specifiek geoptimaliseerd voor afbeeldingsformaten: ①Automatische MIME-type herkenning; ②Directe preview in de browser via Blob URL; ③Automatische bestandsextensie op basis van MIME (.png/.jpg etc.); ④Weergave van afbeeldingsafmetingen. Base64 naar Bestand is een algemene tool, geschikt voor het herstellen en downloaden van willekeurige binaire bestanden (zoals PDF, ZIP, audio, etc.).

Wat te doen als de afbeelding na decodering onvolledig wordt weergegeven?

Mogelijke oorzaken: ①Base64-tekenreeks is afgebroken (controleer of de lengte compleet is); ②Verkeerd MIME-type opgegeven (bijv. PNG-gegevens decoderen als JPG); ③Originele gegevens zelf zijn beschadigd. Aanbevelingen: ①Bevestig dat de bron-Base64 compleet is; ②Probeer verschillende MIME-typen; ③Gebruik de Base64 Validate-tool om de geldigheid te controleren.

Hoeveel groter wordt Base64 dan de originele afbeelding?

Base64-codering vergroot het formaat van originele binaire gegevens met ongeveer 33% (3 bytes → 4 tekens). Bijv. 100KB PNG wordt na codering ongeveer 133KB Base64-tekenreeks. Daarom is Base64 geschikt voor kleine afbeeldingen (<10KB); voor grote afbeeldingen wordt aanbevolen om direct via HTTP URL te verzenden.

Worden SVG-vectorafbeeldingen ondersteund?

Ja. SVG is een op XML gebaseerd vectorafbeeldingsformaat, dat na Base64-codering direct in HTML <img> of CSS background-image kan worden ingesloten. Na decodering wordt het in de browser vectorieel gerenderd en kan het verliesvrij worden geschaald. Let op: SVG kan JavaScript-code bevatten, let op XSS-veiligheid bij gebruik.

Hoe opslaan in een opgegeven formaat?

Klik na decodering op de downloadknop; de tool voegt automatisch de bijbehorende extensie toe op basis van het MIME-type bij decodering (image/png → .png, image/jpeg → .jpg). Voor formaatconversie (bijv. PNG → JPG) wordt aanbevolen om eerst te decoderen en vervolgens te converteren met andere tools (zoals Canvas/ImageMagick).

Afbeelding na decodering is leeg of beschadigd?

Veelvoorkomende oorzaken: ①Base64 bevat regeleinden of spaties die niet zijn opgeschoond — gebruik eerst de Base64 Clean-tool voor voorbewerking; ②Ontbrekende padding (=) — deze tool vult dit automatisch aan; ③MIME-type komt niet overeen met originele gegevens — controleer de Content-Type van de bron-API of probeer handmatig andere MIME-typen; ④Bron-Base64 is afgebroken tijdens verzending — haal de complete tekenreeks opnieuw op.

Worden grote afbeeldingen (>10MB) ondersteund?

Ja, maar browsers hebben verminderde renderprestaties voor extreem grote afbeeldingen. 10MB Base64 (ongeveer 7,5MB originele afbeelding) decodeert meestal soepel; boven 50MB kunnen geheugenwaarschuwingen optreden. Aanbevelingen: ①Gebruik eerst base64-clean om witruimte te verwijderen; ②Decodeer grote afbeeldingen in blokken; ③Bevestig dat de browser voldoende geheugen heeft (4GB+ aanbevolen).

Probleemoplossing

Afbeelding na decodering wordt leeg weergegeven

Mogelijk MIME-type mismatch of onvolledige Base64. Controleer: 1) Content-Type header van bron-API; 2) Schakel handmatig MIME-type en probeer opnieuw; 3) Bevestig dat Base64-tekenreeks compleet is (lengte zoals verwacht).

InvalidCharacterError decodeerfout

Base64-tekenreeks bevat ongeldige tekens (spaties, regeleinden, Chinese tekens etc.). Gebruik eerst de Base64 Clean-tool om alle witruimte en ongeldige tekens te verwijderen, converteer daarna.

Gedownloade afbeelding heeft verkeerde extensie

Controleer of het MIME-type bij decodering overeenkomt met de originele afbeelding. Als de bron-API bijvoorbeeld image/jpeg retourneert maar de Base64-gegevens eigenlijk PNG zijn, is de extensie na download .jpg maar is het werkelijk PNG-formaat. Aanbevolen om het originele formaat te bevestigen vanuit MIME-voorvoegsel of Content-Type header.

Browser loopt vast bij decoderen van grote afbeeldingen

Base64-tekenreeksen groter dan 50MB kunnen geheugenoverloop veroorzaken. Aanbevelingen: ①Gebruik eerst base64-clean tool om witruimte tekens te verwijderen; ②Decodeer grote afbeeldingen in delen (bijv. opgedeeld in tegels); ③Bevestig dat browser voldoende geheugen heeft (4GB+ beschikbaar geheugen aanbevolen); ④Gebruik server-side Node.js/Python scripts voor extreem grote afbeeldingen.

SVG-afbeelding kan na decodering niet worden weergegeven

SVG is een op XML gebaseerd vectorformaat; na decodering moet je ervoor zorgen: 1) MIME-type gebruikt image/svg+xml; 2) SVG mag geen niet-escapete speciale tekens bevatten; 3) Sommige browsers hebben beveiligingsbeperkingen voor JavaScript-code in SVG. Aanbevolen om eerst XML-parsetool te gebruiken om SVG-geldigheid te verifiëren.

Woordenlijst

Base64
Een coderingsmethode die binaire gegevens weergeeft met 64 ASCII-tekens, gedefinieerd in RFC 4648. Deze tool doet het omgekeerde: Base64-tekenreeksen herstellen naar originele binaire afbeeldingen.
Data URL
Een inline URL-formaat gedefinieerd in RFC 2397: data:image/<MIME>;base64,<gegevens>. Kan direct worden gebruikt in HTML img src, CSS background-image. Deze tool herkent en verwijdert het voorvoegsel automatisch.
MIME-type
Internet mediatype, zoals image/png, image/jpeg. Browsers bepalen op basis van MIME hoe de bytestroom als afbeelding moet worden geparseerd.
PNG
Lossless gecomprimeerd bitmapformaat met ondersteuning voor alfakanaal (transparantie). Vaak gebruikt voor pictogrammen, screenshots, afbeeldingen die details moeten behouden. Na Base64 is het formaat ongeveer 1,33x het origineel.
JPG/JPEG
Lossy gecomprimeerd bitmapformaat, geschikt voor foto's. Hoge compressieratio maar geen transparantieondersteuning. Na Base64 is het formaat ongeveer 1,33x het origineel.
WebP
Modern afbeeldingsformaat ontwikkeld door Google, ondersteunt zowel lossy/lossless compressie als alfakanaal. 25-35% kleiner dan PNG/JPG.
Blob (Binary Large Object)
Standaard browser binair object, kan de gedecodeerde bytestroom van Base64 verpakken als afbeelding Blob URL voor preview en download.

Vergelijkingstabel van 8 afbeeldingsformaten

Verschillende afbeeldingsformaten hebben verschillende compressie-algoritmen, eigenschappen en toepassingsscenario's.

FormaatMIME-typeCompressietypeTransparantieTypisch scenario
PNGimage/pngLosslessPictogrammen / Screenshots / Logo
JPGimage/jpegLossyFoto's / Landschapsafbeeldingen
WebPimage/webpLossy/LosslessAanbevolen voor modern Web
GIFimage/gifLossless (256 kleuren)✅ (1-bit)Kleine animaties / Eenvoudige pictogrammen
SVGimage/svg+xmlVectorLogo / Pictogrammen / Illustraties
BMPimage/bmpGeenOptioneelWindows-systeemafbeeldingen
AVIFimage/avifLossy/LosslessVolgendegeneratie afbeeldingsformaat
ICOimage/x-iconLosslessWebsite favicon

Vergelijking Data URL vs HTTP URL afbeeldingslading

Gedecodeerde afbeeldingen kunnen als Data URL direct in HTML/CSS worden ingesloten, vergeleken met traditionele HTTP URL.

DimensieData URLHTTP URL
Aantal HTTP-verzoeken01 keer
CachehergebruikMoeilijkEenvoudig (CDN/browser)
FormaatOrigineel + 33%Originele grootte
Geschikte grootte< 10 KBElke grootte
CompressietransmissieNee (reeds gecodeerd)gzip/Brotli
CSP-beperkingenMogelijkMeestal toegestaan
ServeropslagNiet nodigVereist
Offlinetoegang✅ (bestandsniveau)❌ (cache vereist)

5 veelvoorkomende fouten bij Base64 naar Afbeelding

Bij decodeerfouten kun je snel het probleem lokaliseren met onderstaande tabel.

FoutverschijnselMogelijke oorzaakOplossing
Decodeerfout: InvalidCharacterErrorBevat spaties, regeleinden, niet-Base64-tekensGebruik Base64 Clean-tool voor voorbewerking
Afbeelding wordt leeg weergegevenMIME-type komt niet overeen met originele gegevensSelecteer juiste MIME (bijv. PNG-gegevens met image/png)
Afbeelding wordt onvolledig weergegevenBase64-tekenreeks is afgebrokenHaal complete Base64-tekenreeks opnieuw op
Padding-foutURL-safe Base64 laat padding wegGebruik Base64 Padding-tool om = aan te vullen
Browser geheugenoverloopAfbeelding te groot (> 50MB)Decodeer in blokken of gebruik afbeeldingscompressietool

Authoritative References