CodeKitHubWat is deze tool?
Base64 is een manier om binaire data — zoals de ruwe bytes van een afbeelding — als platte tekst weer te geven, met alleen letters, cijfers en een handvol symbolen. Omdat het platte tekst is, kan een Base64-gecodeerde afbeelding rechtstreeks worden ingebed in HTML, CSS of JSON in plaats van als apart bestand te worden verwezen.
Een "data-URL" verpakt die Base64-tekst met een klein voorvoegsel (data:image/png;base64,) dat de browser vertelt om wat voor bestandstype het gaat, zodat het direct in een src- of url()-attribuut kan worden geplaatst en weergegeven zonder extra verzoek.
Waarom gebruiken?
- Krijg beide formaten in één keer — de volledige data-URL voor HTML/CSS, en de ruwe Base64 (geen voorvoegsel) voor inbedding in JSON of configbestanden.
- Geen server-heen-en-weer: bespaart één HTTP-verzoek voor kleine iconen, avatars of inline afbeeldingen.
- Behoudt de originele bestandsbytes exact — geen hercodering of kwaliteitsverlies, anders dan bij tools die de afbeelding decoderen en opnieuw opslaan.
- Toont het verschil in grootte, zodat je weet wat je inruilt voor het gemak.
- Privé: het bestand wordt lokaal gelezen met de FileReader-API van de browser en verlaat nooit je apparaat.
Hoe te gebruiken
- Klik op het uploadvak of sleep een afbeeldingsbestand erop.
- Kopieer de volledige data-URL als je die plakt in een <img src> of CSS background-image.
- Kopieer de ruwe Base64 (zonder data:-voorvoegsel) als je de waarde inbedt in JSON, YAML of een ander configformaat dat het bestandstype al kent.
- Bekijk de opmerking over de grootte — Base64-tekst is ongeveer een derde groter dan het originele binaire bestand.
Voorbeeld
Invoer
Een PNG-icoonbestand van 12 KB.Uitvoer
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB tekst) plus dezelfde string zonder het data:-voorvoegsel.De toename van ~33% in grootte is inherent aan Base64-codering (3 bytes binaire data worden 4 tekens tekst) — het is geen fout in de tool.
Waar elk formaat wordt gebruikt
| Formaat | Typisch gebruik |
|---|---|
| Volledige data-URL | HTML <img src="...">, CSS background-image: url(...), inline e-mailafbeeldingen |
| Ruwe Base64 | JSON-API-payloads, YAML/configbestanden, database-BLOB-velden, aangepaste binaire protocollen |
Base64 en afbeeldingsgrootte — de afweging in de praktijk
De overhead van ongeveer 33% betekent dat Base64-inbedding het best geschikt is voor kleine assets: een icoon van 2 KB wordt een onschuldige ~2,7 KB inline tekst, maar een foto van 500 KB wordt ~665 KB tekst die inline in je HTML zit, wat het parsen vertraagt en niet apart van de pagina kan worden gecachet.
Als je meerdere of grotere afbeeldingen inbedt, weeg dan het voordeel van één bespaard verzoek af tegen de kosten in paginagewicht — en overweeg om eerst te comprimeren.
Veelgestelde vragen
Waarom is de Base64-string zoveel groter dan mijn afbeeldingsbestand?
Base64 codeert elke 3 bytes binaire data als 4 tekstkarakters, wat een vaste overhead van ongeveer 33% oplevert. Voor een afbeelding van 100 KB kun je ongeveer 133 KB aan Base64-tekst verwachten. Dit is normaal en onvermijdelijk — het is de prijs voor het weergeven van binaire data als veilige, overdraagbare tekst.
Wat is het verschil tussen de data-URL en de ruwe Base64-string?
De data-URL bevat een voorvoegsel data:image/png;base64, dat een browser of renderer vertelt naar welk MIME-type de volgende tekst decodeert. Plak de volledige data-URL in een HTML-src of CSS-url(). De ruwe Base64 (alles na de komma) is wat je wilt wanneer een systeem het bestandstype al apart kent — bijvoorbeeld een JSON-veld zoals { "format": "png", "data": "<ruwe base64>" }.
Wanneer moet ik een afbeelding als Base64 inbedden in plaats van naar een bestand te linken?
Base64-inbedding is nuttig voor kleine, veelgebruikte afbeeldingen (iconen, logo's, kleine UI-graphics) waarbij het besparen van één HTTP-verzoek opweegt tegen de overhead van ongeveer 33%, of in contexten waar een apart bestand niet praktisch is, zoals inline e-mails of single-file HTML-exports. Voor grote foto's of iets dat over meerdere pagina's wordt hergebruikt, is een normaal gelinkt bestand met browsercaching vrijwel altijd beter.
Verandert of comprimeert de conversie naar Base64 mijn afbeelding?
Nee. Base64 is een verliesvrije tekstcodering van de exacte originele bytes — het raakt geen pixels, resolutie of compressie aan. Als je een kleiner bestand wilt, comprimeer de afbeelding dan eerst met een afbeeldingscompressor, en zet het gecomprimeerde resultaat vervolgens om naar Base64.
Wordt mijn afbeelding ergens geüpload?
Nee. Het bestand wordt rechtstreeks in je browser gelezen met de FileReader-API en lokaal gecodeerd — het wordt nooit over het netwerk verzonden.