Base64 afbeelding-encoder & -decoder
Converteer afbeeldingen naar base64-data-URL's en terug. Drop een bestand of plak een data-URL — verlaat je browser nooit.
Wat is een base64-data-URL?
Een data-URL stopt een klein bestand rechtstreeks in een string van de vorm data:<mime>;base64,<payload>. Browsers behandelen het als elke andere URL — je kunt er een in <img src>, een CSS-background-image of een e-mailhandtekening plaatsen. Base64 vergroot de oorspronkelijke bytes met ongeveer 33%, dus het werkt het best voor piepkleine assets (iconen, sprites, kleine avatars). Voor iets groters wil je meestal een gewoon afbeeldingsbestand achter een CDN.
Hoe gebruik je deze tool
In de modus Coderen sleep of kies je een afbeelding en kopieer je de smaak die je nodig hebt: volledige data-URL, ruwe base64 (zonder prefix) of een kant-en-klare <img>-tag. In de modus Decoderen plak je een willekeurige data-URL of ruwe base64-string en wordt de afbeelding teruggerenderd in het voorbeeld — handig als je er een vindt in andermans CSS of een geëxporteerde HTML-mail en wilt zien wat het echt is. Wissel van modus met de chip bovenaan.
Wanneer (en wanneer niet) afbeeldingen inlinen
Goede toepassingen: kleine logo's en iconen die in hetzelfde HTML/CSS-bestand meegaan, handtekeninggrafiek in transactionele e-mails, een asset insluiten in een single-file HTML-demo. Slechte toepassingen: heroafbeeldingen, fotogalerijen, alles wat over meerdere pagina's wordt hergebruikt — base64 schakelt HTTP-caching voor die asset uit, blokkeert parallel laden van afbeeldingen, blaast je HTML/CSS-payload op en schaadt Largest Contentful Paint. Vuistregel: onder ~2 KB gecodeerd is meestal prima; daarboven kies je liever een normaal bestand.
Veelvoorkomende MIME-types
Het MIME-type na data: vertelt de browser hoe de payload te decoderen — een verkeerde keuze (bijv. een JPG verzenden als image/png) breekt de afbeelding in sommige browsers stilletjes.
| Formaat | MIME-type | Opmerkingen |
|---|---|---|
| PNG | image/png | Lossless, supports transparency. Best for icons and UI. |
| JPG / JPEG | image/jpeg | Lossy. Best for photos. No transparency. |
| WebP | image/webp | Smaller than PNG/JPG; supported by all modern browsers. |
| GIF | image/gif | Animated, 256-colour. Heavier than WebP/MP4 for video. |
| SVG | image/svg+xml | Vector. Prefer URL-encoded over base64 in CSS. |
Veelgestelde vragen
Verlaat de afbeelding mijn browser?
Waarom is de base64-string zoveel langer dan het bestand?
data:<mime>;base64,.Kan ik een SVG insluiten zonder base64?
data:image/svg+xml;utf8,<svg…>) en blijven veel kleiner dan de base64-vorm. Deze tool geeft je de base64-versie voor compatibiliteit; gebruik in productie-CSS bij voorkeur de URL-gecodeerde variant.Worden inline-afbeeldingen door de browser gecachet?
Kan ik een willekeurige base64-string decoderen?
data:-prefix heeft, probeert de tool het afbeeldingstype te detecteren via de magic bytes (PNG, JPG, GIF, WebP, SVG). Lukt detectie niet, dan krijg je een "ongeldig"-foutmelding en kun je handmatig een prefix data:image/png;base64, ervoor plakken.Waarom bevat mijn data-URL regelafbrekingen?
<img src> maar enkele systemen niet. Deze tool produceert base64 altijd op één regel; als je een afgebroken string in decodeermodus plakt, verwijderen we de witruimte vóór het decoderen.