Base64 naar Afbeelding
Foto's links plakken
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
- Plak de Base64-gecodeerde afbeeldingsgegevens (met of zonder Data URL-voorvoegsel, zoals data:image/png;base64,iVBORw0KG...)
- De tool detecteert automatisch het MIME-type en decodeert (herkent in Data URL, of snift op basis van inhoudsheader)
- Rechts wordt realtime de afbeeldingspreview en bestandsgrootte, afmetingen weergegeven
- Klik op "Download" om op te slaan als lokaal afbeeldingsbestand, of rechtermuisknop op afbeelding "Afbeelding opslaan als"
- 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
javascriptGebruik 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
pythonPython 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
javaJava 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.
| Formaat | MIME-type | Compressietype | Transparantie | Typisch scenario |
|---|---|---|---|---|
PNG | image/png | Lossless | ✅ | Pictogrammen / Screenshots / Logo |
JPG | image/jpeg | Lossy | ❌ | Foto's / Landschapsafbeeldingen |
WebP | image/webp | Lossy/Lossless | ✅ | Aanbevolen voor modern Web |
GIF | image/gif | Lossless (256 kleuren) | ✅ (1-bit) | Kleine animaties / Eenvoudige pictogrammen |
SVG | image/svg+xml | Vector | ✅ | Logo / Pictogrammen / Illustraties |
BMP | image/bmp | Geen | Optioneel | Windows-systeemafbeeldingen |
AVIF | image/avif | Lossy/Lossless | ✅ | Volgendegeneratie afbeeldingsformaat |
ICO | image/x-icon | Lossless | ✅ | Website 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.
| Dimensie | Data URL | HTTP URL |
|---|---|---|
| Aantal HTTP-verzoeken | 0 | 1 keer |
| Cachehergebruik | Moeilijk | Eenvoudig (CDN/browser) |
| Formaat | Origineel + 33% | Originele grootte |
| Geschikte grootte | < 10 KB | Elke grootte |
| Compressietransmissie | Nee (reeds gecodeerd) | gzip/Brotli |
| CSP-beperkingen | Mogelijk | Meestal toegestaan |
| Serveropslag | Niet nodig | Vereist |
| Offlinetoegang | ✅ (bestandsniveau) | ❌ (cache vereist) |
5 veelvoorkomende fouten bij Base64 naar Afbeelding
Bij decodeerfouten kun je snel het probleem lokaliseren met onderstaande tabel.
| Foutverschijnsel | Mogelijke oorzaak | Oplossing |
|---|---|---|
| Decodeerfout: InvalidCharacterError | Bevat spaties, regeleinden, niet-Base64-tekens | Gebruik Base64 Clean-tool voor voorbewerking |
| Afbeelding wordt leeg weergegeven | MIME-type komt niet overeen met originele gegevens | Selecteer juiste MIME (bijv. PNG-gegevens met image/png) |
| Afbeelding wordt onvolledig weergegeven | Base64-tekenreeks is afgebroken | Haal complete Base64-tekenreeks opnieuw op |
| Padding-fout | URL-safe Base64 laat padding weg | Gebruik Base64 Padding-tool om = aan te vullen |
| Browser geheugenoverloop | Afbeelding te groot (> 50MB) | Decodeer in blokken of gebruik afbeeldingscompressietool |
Authoritative References
- Veilige String Vergelijking
- Binair naar Tekst
- Caesar Cipher
- Morsecodering Vertaler
- Hex naar Tekst
- Video naar Base64
- Base64 naar Video
- Afbeelding naar Base64
- Base64 naar Afbeelding
- Tekst naar Base64
- Base64 naar Tekst
- Bestandshash-controle
- Bestand naar Base64
- Base64 naar Bestand
- Audio naar Base64
- Base64 naar Audio
- AES versleutelen en ontsleutelen
- DES Encryptie
- Base32 Encoder Decoder
- Base58 coderen en decoderen
- Base64 Codering
- Base64 Decoderen
- Base64 Vergelijken
- Base64 Opsplitsen
- Base64 meerregelige samenvoegen
- Base64 Opmaak
- Base64 Valideren
- Base64 batch-encodering
- Base64 Batch Decoderen
- Base64 Opschonen
- Base64-paddingverwerking
- Base64 Statistieken
- Base64 naar Hex
- Base64 DataURL Converter
- Base64-Hex-omzetter
- Base85 Encoderen / Decoderen
- HMAC Generator & Verificateur
- PBKDF2 Sleutelafleiding
- MD5-hash
- SHA-256 hash
- SHA1 Hash
- SHA512-hash
- JWT Decoder
- HTML Entity Encoder en Decoder
- Unicode Escape
- URL-codering
- URL-Veilige Base64
- MIME Base64
- Java Obfuscator
- JS Obfuscator
- PHP Obfuscator
- Python Obfuscator