Een afbeelding coderen naar Base64 / Data URI

Een Data URI is een URL die direct de gegevens van een bron bevat in plaats van naar een extern bestand te wijzen. De algemene vorm is data:[<mediatype>][;base64],<data>. Voor een afbeelding heeft men typisch data:image/png;base64,iVBORw0KGgo…. De bron is ingebed in de HTML, CSS of JSON en wordt geladen zonder enige extra HTTP-aanvraag.

Veelvoorkomende redenen:

• HTTP-aanvragen verminderen: een pictogram direct in CSS integreren in plaats van het naast het document te laden
• E-mailhandtekening met inline afbeelding: geen risico dat de afbeelding wordt geblokkeerd als externe inhoud
• Web Components / Web Workers: waar het laden van een externe bron vaak een scope- of CORS-probleem oplevert
• Lokale opslag (LocalStorage, IndexedDB, database): een avatar-thumbnail serialiseren als string
• Self-contained snippets: een HTML-bestand dat zichzelf voldoet, zonder externe afhankelijkheid

Enkele concrete contexten waarin Base64-afbeeldingscodering gerechtvaardigd is:

• Inline SVG-pictogrammen in CSS (background-image: url("data:image/svg+xml;base64,…"))
• Gepersonaliseerde e-mailhandtekeningen met logo
• Snel prototypen van een zelfstandige pagina die per e-mail wordt gedeeld
• Zelfstandige web components (één enkel implementeerbaar bestand)
• PDF-generatie aan browserkant (jsPDF) met ingebedde miniaturen
• Testgegevens (mocks) die afbeeldingen bevatten

Drie stappen:

1. Upload uw afbeelding (PNG, JPG, SVG, WebP, GIF) via de drop-zone
2. Klik op "Coderen"
3. Kopieer de resulterende Data URI met de speciale knop en plak deze in uw HTML, CSS of JSON

Base64 is geen wondermiddel. Enkele voorzorgsmaatregelen:

• Base64 verhoogt de grootte met ~33%: 4 ASCII-tekens voor elke 3 binaire bytes
• Gecodeerde afbeeldingen worden niet apart in de cache geplaatst door de browser; ze worden opnieuw geladen met de HTML/CSS die ze bevat
• Verkies voor afbeeldingen van minder dan 10 KB; daarboven is een extern bestand over het algemeen efficiënter
• Voor SVG, verkies URL-codering (via encodeURIComponent) boven Base64: het resultaat is korter en blijft parseerbaar als tekst
• Moderne buildtools (Webpack, Vite) automatiseren de keuze Base64 vs. extern bestand via een instelbare drempelgrootte

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Wat is het verschil tussen Base64 en binair?

Binair vertegenwoordigt de ruwe bytes van een bestand. Base64 is een codering die deze bytes omzet in 64 afdrukbare ASCII-tekens (A-Z, a-z, 0-9, +, /). Tekstcontexten (HTML, JSON, e-mail) kunnen geen binair transporteren; Base64 lost dit probleem op ten koste van een groottetoename van 33%.

Waarom is mijn Data URI zo lang?

Een afbeelding van 30 KB binair wordt ~40 KB in Base64. En elk teken is een ASCII-byte, dus ja, de tekenreeks is lang. Het is inherent aan de codering. Voor grote afbeeldingen, houd een extern bestand.

Ondersteunen alle browsers Data URI's?

Ja, zonder uitzondering onder moderne browsers (Chrome, Firefox, Safari, Edge, zelfs sinds IE8). Historische limieten: IE8 was gelimiteerd op 32 KB. Geen probleem meer vandaag op het web.

Hoe decodeer ik een Data URI?

Onze Base64-afbeeldingsdecoder voert de omgekeerde bewerking uit: plak uw Data URI, krijg het afbeeldingsbestand (PNG, JPG, SVG, WebP) klaar om te uploaden of op te slaan.

Base64 vs. URL-codering voor SVG's?

Voor SVG produceert URL-codering (met encodeURIComponent) een kortere tekenreeks dan Base64 en blijft deze leesbaar als tekst. Het is de aanbevolen keuze in CSS bij het inline integreren van een SVG. Voor binaire formaten (PNG, JPG) blijft Base64 verplicht.

Beïnvloedt Base64-codering de kwaliteit van de afbeelding?

Nee. De codering is lossless: het is een bijectie binaire byte ↔ Base64-tekenreeks. De originele pixels blijven strikt behouden. Alleen de grootte van het getransporteerde bestand neemt toe met 33%.