Afbeelding naar Base64 converter

Wat is een Base64-afbeelding (data-URI)?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

Belangrijkste functies

Voorbeelden

transparent-1x1.png  (een PNG van 68 bytes)

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

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 KB)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

Een afbeelding naar Base64 converteren

1. 1

   Voeg je afbeelding toe

   Sleep een afbeelding op de dropzone, klik om te bladeren, of plak vanaf het klembord met Ctrl+V / Cmd+V. PNG, JPG, GIF, WebP, SVG, ICO en BMP worden allemaal ondersteund en volledig in je browser geëncodeerd.

2. 2

   Kies een uitvoerformaat

   Kies Data URI, ruwe Base64, HTML , CSS-achtergrond, Markdown of JSON via de tabbladen. Controleer de metadatabalk voor de grootte-toename en de adviesbadge of inline zetten de moeite waard is.

3. 3

   Kopieer of download

   Klik op Kopiëren om het fragment te pakken, of op Downloaden om het als bestand op te slaan. Om het proces om te keren, schakel je naar het Base64 → Afbeelding-tabblad, plak je een string en download je de gereconstrueerde afbeelding.

Veelgemaakte fouten

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Veelvoorkomende toepassingen

Een logo of pictogram inline in CSS zetten

Sleep een klein PNG- of SVG-pictogram, kopieer het CSS background-image-fragment en plak het in je stylesheet om een HTTP-verzoek weg te nemen voor een asset die zelden verandert. Houd het onder ~2 KB (let op de groene badge) zodat de stylesheet slank blijft.

Afbeeldingen insluiten in HTML-e-mail

E-mailclients blokkeren vaak externe afbeeldingen. Encodeer je logo als data-URI en plak het -element in de sjabloon zodat het zonder serververzoek wordt weergegeven. Test in meerdere clients — houd ingesloten afbeeldingen klein, pictogrammen, geen foto's.

Zelfstandige Markdown en README's

Wanneer je een afbeelding niet kunt hosten — een GitHub-issue, een notebook, een offline document — sluit de Markdown-uitvoer de afbeelding rechtstreeks in het bestand in, zodat ze met de tekst meereist. Ideaal voor kleine diagrammen en badges.

Afbeeldingen binnen JSON of API-payloads

Moet je een miniatuur meesturen in een JSON-document of een configuratiebestand? De JSON-uitvoer geeft je een { mime, data }-object dat je direct kunt plaatsen, en de decoder herstelt de afbeelding aan de andere kant.

Snel data-URI's debuggen

Een mysterieuze data:-URI gevonden in een stylesheet of een API-respons? Plak deze in het Base64 → Afbeelding-tabblad om te zien wat het werkelijk is, de echte afmetingen te lezen en het als normaal bestand te downloaden voor nadere inspectie.

Zelfstandige widgets en bookmarklets

Bookmarklets en insluitbare widgets moeten op zichzelf staan zonder externe afhankelijkheden. Hun pictogrammen inline zetten als Base64 houdt alles in één bestand dat werkt ongeacht waar het wordt neergezet.

Technische details

Hoe Base64-encodering werkt

Base64 neemt de binaire stroom van de afbeelding telkens drie bytes (24 bits) tegelijk en splitst die in vier 6-bits-groepen, elk toegewezen aan één teken in het 64-symbolenalfabet. Wanneer de invoerlengte geen veelvoud van drie is, markeren één of twee =-opvultekens de rest. Deze 3-op-4-verhouding is waarom de geëncodeerde tekst ongeveer 33% groter is dan de bron. De tool berekent de gedecodeerde bytelengte direct uit de stringlengte en opvulling, zodat de grootte-cijfers die hij meldt exact zijn, niet geschat.

MIME-detectie en magic bytes

Wanneer je een bestand encodeert, komt het MIME-type uit het File-object van de browser. Wanneer je een ruwe Base64-string zonder data:-prefix decodeert, inspecteert de tool de eerste tekens, die overeenkomen met de magic bytes van de afbeelding: iVBORw0KGgo voor PNG, /9j/ voor JPEG, R0lGOD voor GIF, UklGR voor WebP, en PHN2Zy of PD94bWw voor SVG. Hierdoor kan de decoder een correcte data-URI reconstrueren en met de juiste bestandsextensie downloaden, zelfs wanneer de invoer slechts de kale payload is.

Verwerking alleen lokaal

Encodering gebruikt readAsDataURL van de FileReader-API, dat een data-URI teruggeeft die volledig in de browser is samengesteld. Decoderen voor downloaden gebruikt atob plus een Uint8Array om de binaire data te herbouwen, vervolgens een Blob en een object-URL — opnieuw zonder enig netwerk. Het resultaat is een tool die je offline kunt draaien en die je vertrouwelijke afbeeldingen kunt toevertrouwen, omdat de bytes de pagina nooit verlaten. Je kunt het gedrag zonder verzoeken verifiëren in de ontwikkelaarstools van je browser.

Aanbevolen werkwijzen

Zet alleen kleine, stabiele assets inline

De ideale zone voor Base64 zijn assets onder ~2 KB die zelden veranderen en op weinig pagina's verschijnen — pictogrammen, kleine logo's, UI-sprites. Boven ~10 KB wegen de groottepenalty en verloren caching zwaarder dan het bespaarde verzoek, zeker nu HTTP/2 extra verzoeken goedkoop maakt. Laat de adviesbadge je leiden en serveer foto's en grote graphics als gewone gecachete bestanden.

Geef de voorkeur aan URL-encodering voor SVG

SVG is tekst, dus Base64 blaast het op zonder winst. Wanneer je SVG inline zet in CSS of HTML, URL-encodeer de opmaak dan — het is meestal kleiner, blijft leesbaar voor mensen en comprimeert beter met gzip/brotli. Reserveer Base64 SVG voor pipelines die het specifiek vereisen. Onze URL-encoder/decoder verzorgt de percent-encodering.

Stel altijd het juiste MIME-type in

Een data-URI wordt alleen weergegeven als het MIME-type overeenkomt met de inhoud: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. Een verkeerd of ontbrekend type is de nummer-één reden dat een ingesloten afbeelding niet wordt weergegeven. Wanneer je vanuit deze tool kopieert is het type voor je ingesteld; als je URI's met de hand samenstelt, controleer de prefix dan dubbel.

Comprimeer vóór je encodeert

Omdat Base64 ~33% bovenop de bestandsgrootte legt, loont het verkleinen van de bron dubbel. Haal afbeeldingen door onze Afbeelding comprimeren-tool — of exporteer op de juiste afmetingen — vóór het encoderen, zodat de resulterende data-URI zo klein mogelijk is. Een gecomprimeerde PNG van 4 KB verslaat een origineel van 40 KB, zowel als bestand als inline.

Vertrouw nooit op Base64 voor privacy

Base64 is triviaal omkeerbaar en biedt geen bescherming. Gebruik het niet om gevoelige afbeeldingsinhoud te verhullen — iedereen kan het direct decoderen, ook met het tabblad op deze pagina. Als inhoud beschermd moet worden, gebruik dan echte toegangscontrole en versleuteling op de server, en serveer de afbeelding via een geauthenticeerd endpoint.

Veelgestelde vragen

Wat doet deze Afbeelding naar Base64 converter?

Hij leest een afbeelding die je erin sleept, plakt of selecteert en encodeert de bytes ervan als een Base64-string — volledig binnen je browser. Je krijgt de ruwe Base64, een kant-en-klare data-URI (data:image/png;base64,…) en kopieer-en-plak-fragmenten voor HTML , CSS background-image, Markdown en JSON. Een metadatabalk meldt de originele bestandsgrootte, de geëncodeerde grootte, het exacte percentage toename (Base64 is ongeveer 33% groter), de pixelafmetingen en het MIME-type. Er wordt niets geüpload: de encodering verloopt lokaal via de FileReader-API, zodat dezelfde tool veilig is voor screenshots, interne assets en ongepubliceerde illustraties. Voor de omgekeerde richting gebruik je het Base64 → Afbeelding-tabblad of onze Base64 naar Afbeelding decoder.

Worden mijn afbeeldingen naar een server geüpload?

Nee. Elke stap gebeurt client-side in je browser via de FileReader-API en JavaScript-stringencodering. Je afbeelding wordt nooit verzonden, nooit opgeslagen en nooit gelogd. Je kunt dit bevestigen door het tabblad Netwerk in je browser te openen — het encoderen van een afbeelding veroorzaakt nul netwerkverzoeken. Dit maakt de tool veilig voor gevoelig materiaal: productscreenshots vóór de lancering, interne diagrammen, klantassets en alles wat onder een geheimhoudingsverklaring valt. Er is geen bestandsgroottelimiet opgelegd door een uploadlimiet, alleen de praktische grens van hoe groot een Base64-string je browser en doelsysteem comfortabel aankunnen.

Hoeveel groter maakt Base64 een afbeelding?

Base64 encodeert elke 3 bytes binaire data als 4 ASCII-tekens, dus de geëncodeerde string is ongeveer 33% groter dan het originele bestand (plus enkele bytes opvulling en de data:-prefix). Een PNG van 9 KB wordt ongeveer 12 KB tekst. Deze overhead is veruit de belangrijkste reden om grote afbeeldingen niet naar Base64 te encoderen: je verzendt meer bytes en, omdat de string is ingesloten in je HTML of CSS, worden die bytes opnieuw gedownload telkens als het omliggende bestand verandert en kunnen ze niet apart worden gecachet. De tool toont de exacte toename voor jouw specifieke bestand in de metadatabalk, zodat je de keuze met echte cijfers kunt maken.

Wanneer gebruik ik een Base64-afbeelding in plaats van een normaal bestand?

Base64 (als data-URI) past goed bij kleine, zelden veranderende assets waarbij het vermijden van een apart HTTP-verzoek zwaarder weegt dan caching: kleine pictogrammen en logo's inline in CSS, afbeeldingen ingesloten in HTML-e-mail (veel clients blokkeren externe afbeeldingen maar tonen data-URI's wel), zelfstandige widgets of bookmarklets die op zichzelf moeten staan, SVG-sprites en afbeeldingen die binnen JSON/API-payloads zijn opgeslagen. Een praktische vuistregel: onder ongeveer 2 KB en gebruikt op één of twee pagina's, dan wint inline zetten meestal. De adviesbadge in deze tool legt precies die heuristiek vast — groen onder 2 KB, oranje tot 10 KB, rood erboven.

Wanneer gebruik ik Base64-afbeeldingen NIET?

Vermijd Base64 voor alles wat groot is of over meerdere pagina's wordt hergebruikt. Vier concrete redenen: (1) de toename van ~33% betekent meer bytes over de lijn; (2) een inline afbeelding kan niet op zichzelf worden gecachet — ze wordt opnieuw gedownload bij elke wijziging van de HTML of CSS die ze bevat, en herhaald op elke pagina die ze insluit; (3) het decoderen van een grote data-URI kost CPU en accu, wat merkbaar is op mobiel; en (4) je verliest responsieve afbeeldingen (srcset/sizes) en lazy-loading. Omdat HTTP/2 veel kleine verzoeken goedkoop multiplext, is de oorspronkelijke reden om inline te zetten — het aantal verzoeken beperken — nauwelijks nog van toepassing. Voor foto's, hero-afbeeldingen of alles boven ~10 KB laadt een normaal gecachet bestand bijna altijd sneller. Als het doel een kleiner bestand is, haal het dan eerst door onze Afbeelding comprimeren-tool.

Hoe gebruik ik de Base64-uitvoer in HTML en CSS?

Voor HTML schakel je naar het HTML-tabblad en plak je het gegenereerde element: . Voor CSS gebruik je het CSS-tabblad, dat de data-URI verpakt in background-image: url("data:image/png;base64,…"). Beide werken overal waar een URL wordt geaccepteerd — img src, CSS-achtergrond, mask-image, zelfs favicon-link-tags. Het data:-schema wordt door elke moderne browser ondersteund. Eén kanttekening: zeer lange data-URI's in inline HTML kunnen de leesbaarheid schaden en, in CSS, de stylesheet opblazen die naar elke bezoeker wordt verzonden, dus reserveer inline zetten voor echt kleine assets.

Welke afbeeldingsformaten worden ondersteund?

PNG, JPEG/JPG, GIF (inclusief geanimeerd), WebP, SVG, ICO en BMP worden allemaal ondersteund, plus AVIF waar de browser het kan decoderen. Omdat de tool de ruwe bytes encodeert in plaats van de afbeelding opnieuw te renderen, blijven geanimeerde GIF's geanimeerd, behouden transparante PNG's hun alfakanaal en blijven SVG's volledig schaalbaar. Het MIME-type wordt uit het bestand zelf gelezen en, wanneer je ruwe Base64 in de decoder plakt, afgeleid uit de magic bytes van de data. Er vindt geen formaatconversie plaats tijdens het encoderen — de uitvoer vertegenwoordigt precies het bestand dat je hebt aangeleverd.

Waarom is SVG een speciaal geval?

SVG is XML-tekst, geen binaire data, dus Base64 maakt het juist groter en moeilijker leesbaar zonder enig voordeel. Voor het inline zetten van SVG in CSS of HTML is URL-encodering van de opmaak (een handvol tekens zoals #, <, > en aanhalingstekens percent-encoderen) meestal kleiner dan Base64 en houdt de broncode leesbaar en gzip-vriendelijk. Deze tool biedt nog steeds Base64 SVG-uitvoer omdat sommige pipelines die vereisen, maar als je CSS met de hand optimaliseert, kies dan voor een URL-geëncodeerde data-URI. Onze URL-encoder/decoder helpt bij die aanpak.

Is Base64 hetzelfde als versleuteling?

Nee. Base64 is een encodering, geen versleuteling — het is volledig omkeerbaar door iedereen, zonder dat een sleutel nodig is. Het bestaat om binaire data weer te geven met een veilige set afdrukbare ASCII-tekens, zodat de data het transport overleeft door systemen die alleen tekst verwerken (HTML, JSON, e-mailheaders, URL's). Iedereen kan een Base64-string in seconden terugdecoderen naar de originele afbeelding, ook met het Base64 → Afbeelding-tabblad hier. Beschouw Base64 nooit als een manier om gevoelige afbeeldingsinhoud te verbergen of te beschermen; het biedt nul vertrouwelijkheid.

Kan ik een Base64-afbeelding insluiten in een e-mail?

Ja, en het is een van de betere toepassingen van de techniek. Veel e-mailclients blokkeren standaard extern gehoste afbeeldingen voor de privacy, wat lay-outs breekt die op externe logo's vertrouwen. Kleine afbeeldingen insluiten als data-URI's zorgt ervoor dat ze direct worden weergegeven zonder een serververzoek. De afwegingen: sommige oudere clients (met name bepaalde versies van Outlook) hebben gebrekkige data-URI-ondersteuning, en grote ingesloten afbeeldingen blazen de berichtgrootte op die elke ontvanger downloadt. Houd ingesloten afbeeldingen klein — logo's en pictogrammen, geen foto's — en test ze in je doel-clients.

Waarom wordt mijn Base64-afbeelding niet weergegeven?

De meest voorkomende oorzaken: een ontbrekend of verkeerd MIME-type in de data:-prefix (gebruik image/png voor PNG, image/jpeg voor JPG, image/svg+xml voor SVG), witruimte of regeleinden die per ongeluk in de string zijn ingevoegd, een afgekapte kopie die de afsluitende opvulling (= of ==) heeft laten vallen, of alleen de ruwe Base64 plakken zonder de data:…;base64,-prefix terwijl een URL wordt verwacht. De decoder in deze tool is tolerant — hij verwijdert witruimte, accepteert invoer met of zonder de prefix en leidt het MIME-type af uit de magic bytes van de afbeelding — dus je string in het Base64 → Afbeelding-tabblad plakken is de snelste manier om te bevestigen of de data zelf geldig is.