Zo gebruik je deze tool
- Kies Afbeelding → Base64 en selecteer een afbeeldingsbestand, of kies Base64 → Afbeelding om de omgekeerde bewerking uit te voeren.
- Selecteer de gewenste uitvoer: data-URL, gewone Base64, een HTML img-tag, een CSS background-image-regel of Markdown.
- Kopieer het resultaat en plak het in uw code, e-mailsjabloon of JSON.
- Plak om te decoderen een data-URL of gewone Base64. U krijgt een voorbeeld van de afbeelding en kunt deze downloaden.
Hoe het werkt
Base64 geeft binaire gegevens weer met 64 afdrukbare tekens, zodat een afbeelding rechtstreeks in tekstformaten kan worden opgenomen. Een data-URL zet het mediatype ervoor, bijvoorbeeld data:image/png;base64, gevolgd door de gecodeerde bytes. Browsers accepteren data-URL's overal waar een afbeeldings-URL is toegestaan: als de src van een img-tag, in een CSS url() of als verwijzing naar een SVG-afbeelding.
De gecodeerde tekst is altijd ongeveer een derde groter dan het oorspronkelijke bestand (4 tekens voor elke 3 bytes). Kleine pictogrammen en tijdelijke afbeeldingen inline opnemen kan een apart netwerkverzoek besparen, maar inline gegevens kunnen niet afzonderlijk in de cache worden opgeslagen en worden bij elke pagina of stylesheet waarin ze staan opnieuw gedownload. Daarom loont dit zelden bij bestanden groter dan een paar kilobytes. Veel e-mailprogramma's blokkeren of verwijderen afbeeldingen via data-URL's. Test dit dus voordat u ze in nieuwsbrieven gebruikt.
Het bestand wordt byte voor byte gecodeerd: er wordt niets opnieuw gecomprimeerd en metadata in het bestand (zoals EXIF) blijft behouden. Bij het decoderen accepteert de tool een volledige data-URL, gewone Base64, URL-veilige Base64 en tekst die samen met een CSS url(…)-wrapper is gekopieerd. Het afbeeldingstype wordt vastgesteld aan de hand van de gedecodeerde bytes, niet op basis van het opgegeven label.
Voorbeelden
Klein pictogram in een stylesheet
Een PNG-pictogram van 600 bytes wordt een Base64-string van 800 tekens. Met de CSS-uitvoer krijgt u een background-image-regel die u in een class kunt plakken, zonder dat u een apart bestand hoeft te hosten.
Afbeelding uit een API-respons
Een API retourneert een JSON-veld zoals "iVBORw0KGgoAAAANSUhEUg…". Plak het bij Base64 → Afbeelding om de afbeelding te bekijken, het formaat te controleren en als PNG te downloaden.
SVG-logo in HTML
Een SVG coderen levert een data:image/svg+xml;base64-URL op die werkt in een img-tag. Voor SVG is de niet-gecomprimeerde SVG-markup zelf vaak korter dan Base64. Overweeg daarom om de SVG rechtstreeks inline op te nemen.
Veelgestelde vragen
Waarom is de Base64-versie groter dan mijn afbeelding?
Base64 gebruikt 4 teksttekens om 3 bytes op te slaan. Dat is ongeveer 33% extra, plus een beetje voor het voorvoegsel van de data-URL. Gzip- of Brotli-compressie op een webserver verkleint het verschil, maar neemt het niet weg.
Verandert of comprimeert coderen de afbeelding?
Nee. De exacte bytes van het bestand worden gecodeerd, inclusief eventuele metadata. Comprimeer of verklein de afbeelding eerst om de string korter te maken.
Wat is het verschil tussen een data-URL en gewone Base64?
Gewone Base64 bestaat alleen uit gecodeerde bytes. Een data-URL voegt een voorvoegsel toe, zoals data:image/jpeg;base64,, dat de browser vertelt om welk bestandstype het gaat. Zo kan de URL rechtstreeks als afbeeldingsbron worden gebruikt.
Is er een limiet voor de bestandsgrootte?
U kunt hier bestanden tot 10 MB coderen. Zeer lange strings kunnen tekstvelden en editors vertragen, en data-URL's van die omvang zijn niet praktisch voor websites.
Privacy
Coderen en decoderen gebeurt in uw browser. Uw afbeelding en de Base64-tekst worden niet geüpload, opgeslagen of opgenomen in analyses.