Hoe de conversie van afbeelding naar Base64 werkt
De volledige conversie verloopt in uw browser via de File API en de ingebouwde btoa-functie — er wordt geen codecbibliotheek gedownload en geen server ziet de afbeelding. Dit is de volledige pipeline:
- U sleept of selecteert een afbeelding. De browser leest het als Blob van uw lokale schijf, zonder bytes naar een server te kopiëren.
- Het bestand wordt in blokken van 1 MB gelezen en de bytes van elk blok worden toegevoegd aan een binaire string. Blokverwerking voorkomt dat grote afbeeldingen de JavaScript-aanroepstapel doen overlopen.
- De binaire string wordt doorgegeven aan btoa, dat elke drie bytes omzet in vier Base64-tekens uit het alfabet A–Z, a–z, 0–9, plus /.
- Het MIME-type van het bestand (image/png, image/jpeg, enzovoort) wordt gelezen uit het File-object en voorafgegaan als data:-voorvoegsel, waardoor een volledige data:image/…;base64,…-URI ontstaat.
- De pagina assembleert vier outputs uit die URI — de volledige data-URI, de ruwe Base64 zonder voorvoegsel, een plakklare
-tag en een CSS background-image-fragment — elk met een eigen kopieerknop.
Waarom een afbeelding als data-URI coderen?
- Een klein logo of pictogram inline als data-URI opnemen elimineert een afzonderlijk netwerkverzoek, waardoor de pagina of e-mail zijn eerste frame iets sneller toont.
- Een pagina of stylesheet met inline afbeeldingen is zelfvoorzienend. Het werkt offline en u kunt het kopiëren zonder een map met assets mee te slepen.
- Veel e-mailprogramma's blokkeren gekoppelde externe afbeeldingen standaard. Integreer een logo in Base64 en het verschijnt zodra het bericht wordt geopend, zonder extern verzoek.
- De codering vindt volledig in uw browser plaats, zodat gevoelige afbeeldingen nooit naar een server van derden reizen. Dit geldt voor screenshots, identiteitsdocumenten en interne diagrammen.
Veelvoorkomende toepassingen van Base64-afbeeldingen
Data-URI's verschijnen waar een afbeelding klein genoeg is dat een afzonderlijk verzoek meer kost dan de ~33% grotere bestandsgrootte die Base64 toevoegt. Drie patronen komen steeds terug:
- Inline CSS-pictogrammen: een sprite of pictogram van 1–2 KB in een stylesheet als background-image: url(data:…) zodat de regel volledig zelfvoorzienend is.
- E-mailhandtekeningen en nieuwsbrieven: een logo ingesloten als
met een data:-URI als src wordt weergegeven zelfs wanneer de client externe afbeeldingen blokkeert.
- Inlining in buildtools: bundlers als Webpack en Vite sluiten assets onder een byte-drempel automatisch in, en dit hulpmiddel laat u precies zien hoe die output eruitziet.
Hoe ziet een Base64-afbeelding eruit?
Neem een transparante PNG van 1×1 pixel. De ruwe bytes zijn slechts 67 bytes, maar gecodeerd wordt het de string iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, en de volledige data-URI is data:image/png;base64,iVBORw0KGgo…. Merk op dat de gecodeerde vorm ongeveer een derde groter is dan het origineel. Dat is de afweging voor het veilig insluiten van binaire data direct in tekst.
Wordt mijn afbeelding ergens naartoe geüpload?
Nee. De conversie gebruikt de File API van de browser en de native btoa-functie om de afbeelding volledig op uw apparaat te coderen. U kunt dit zelf bevestigen: open de ontwikkelaarstools van uw browser, ga naar het tabblad Netwerk en converteer een afbeelding — de enige verzoeken die u ziet zijn het laden van de pagina en eventuele advertenties. Niets in de vorm van een afbeelding wordt naar een server gestuurd, waardoor dit veilig is voor screenshots, identiteitsdocumenten en interne diagrammen.
Waarom is de Base64-output groter dan mijn originele afbeelding?
Base64 stelt elke drie bytes binaire data voor met vier ASCII-tekens, zodat de gecodeerde tekst ongeveer 33% groter is dan het bronbestand. De grootteaanduiding van de data-URI op deze pagina toont de exacte opgeblazen lengte. Daarom zijn data-URI's alleen zinvol voor kleine afbeeldingen — een foto van 2 MB inline opnemen zou uw HTML of CSS veel meer opblazen dan een afzonderlijk verzoek had gekost. Als vuistregel geldt: verwerk afbeeldingen kleiner dan ongeveer 4 KB inline en koppel aan alles wat groter is.
Welke afbeeldingsformaten kan ik converteren?
Elk formaat dat uw browser als afbeelding herkent werkt, omdat het hulpmiddel de ruwe bytes leest in plaats van de afbeelding te decoderen. Dit omvat PNG, JPEG, GIF, WebP, SVG en BMP. Het MIME-type wordt rechtstreeks uit het bestand gelezen, zodat het data:-voorvoegsel altijd overeenkomt met het werkelijke formaat — een JPEG geeft data:image/jpeg en een SVG geeft data:image/svg+xml. SVG verdient een speciale vermelding: het is al tekst, dus voor SVG's is een URL-gecodeerde data-URI vaak kleiner dan de Base64-versie, hoewel dit hulpmiddel de Base64-vorm uitvoert voor consistentie.
Sleep een afbeelding, kopieer de data-URI of het fragment dat u nodig hebt, en plak het in uw HTML, CSS of e-mailtemplate. Elke byte blijft op uw apparaat. Geen upload, geen account, geen serververzoek.