Afbeelding naar Base64 converter

Wat het doet

Deze tool zet een afbeelding om in Base64-tekst en een data-URI die je direct kunt plakken. Een data-URI sluit de afbeelding rechtstreeks in HTML, CSS, Markdown, JSON of een e-mail in, zodat de pagina één HTTP-verzoek minder nodig heeft en het snippet werkt zonder een apart bestand te hosten. Het werkt ook andersom: plak Base64 of een data-URI om de afbeelding te bekijken en te downloaden.

Zo gebruik je het

1. Sleep een afbeelding op het dropveld, klik op Afbeelding kiezen of klik op Voorbeeld om een SVG-logo te laden.
2. Het voorbeeld toont de afbeelding met type, bestandsgrootte, Base64-grootte en afmetingen.
3. Kies een formaat bij Uitvoer:
   • Data-URI: data:image/png;base64,…, voor src-attributen en JSON.
   • Alleen Base64: de kale string, eventueel afgebroken na 76 tekens voor gebruik in MIME- en PEM-stijl.
   • CSS-achtergrond: een volledige background-image: url("…");-declaratie.
   • HTML <img>: een img-tag met de data-URI als src.
   • Markdown: ![image](data:…).
4. Kopieer het resultaat. Wil je juist decoderen, plak dan Base64 of een data-URI in het invoerveld en klik op Afbeelding downloaden.

Voorbeeld

Een PNG van 2×1 pixel wordt:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

Gebruikt in CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Wanneer afbeeldingen inline zetten

Inline zetten helpt bij kleine, vaak gebruikte afbeeldingen zoals iconen, kleine achtergronden, laadspinners en e-mailhandtekeningen. Voor foto’s en grote afbeeldingen is het geen goed idee: Base64 maakt ze ongeveer een derde groter, de afbeelding kan niet los van de pagina of stylesheet worden gecachet, en het vertraagt het parsen van de rest van het bestand. Vuistregel: houd inline afbeeldingen onder een paar kilobyte. Voor SVG is een percent-encoded data-URI (data:image/svg+xml,…) vaak kleiner dan Base64, en de tool accepteert beide.