Why is the Base64 string larger than the original file?

Base64 encoding represents binary data using only 64 ASCII characters (A-Z, a-z, 0-9, +, /). Since each Base64 character encodes 6 bits of data but takes up 8 bits (1 byte) in text, the encoded output is approximately 33% larger than the original binary file. For example, a 30 KB PNG image becomes roughly 40 KB as a Base64 string. This overhead is the trade-off for being able to embed binary data directly in text formats like HTML, CSS, and JSON.

Is my image uploaded to any server?

No. This tool runs entirely in your browser using the JavaScript FileReader API. Your image file never leaves your device — all encoding is performed client-side. No data is sent to any server, making this tool completely private and safe for sensitive images. You can verify this by disconnecting from the internet and using the tool — it will still work.

What image formats are supported?

This tool supports all common web image formats: PNG, JPEG (JPG), GIF, WebP, SVG, BMP, and ICO. The encoder reads the file's binary data and converts it to Base64 regardless of the image content. The correct MIME type is automatically detected from the file extension and included in the Data URI (e.g., data:image/png;base64,... for PNG files).

Can I use Base64 images in emails?

Yes, but with caveats. Base64-encoded images can be embedded in HTML emails using the Data URI scheme in an img tag's src attribute. This eliminates the need for external image hosting and avoids images being blocked by email clients. However, some email clients (notably older versions of Outlook) may not render Data URI images. For maximum compatibility, keep Base64 images small (under 50 KB original size) and test across target email clients.

Is there a recommended size limit for Base64 images?

For practical use, keep Base64-encoded images under 20-30 KB (original file size). Larger images significantly increase HTML/CSS file size, cannot be cached separately by browsers, and slow down page rendering because the browser must decode the entire string before displaying. For images larger than 30 KB, it's generally better to use a regular image file served via HTTP — the browser can cache it, load it in parallel, and decode it more efficiently.

A Data URI (Uniform Resource Identifier) is a scheme that allows you to embed file data directly in a document instead of linking to an external file. The format is: data:[MIME-type];base64,[encoded-data]. For images, this looks like data:image/png;base64,iVBORw0KGgo... — you can use this string anywhere a URL is expected: in HTML img src attributes, CSS url() values, or JavaScript image sources. Data URIs are defined in RFC 2397.

Afbeelding naar Base64 Encoder

Converteer elke afbeelding naar Base64-gecodeerde string. Haal gereed-om-te-gebruiken code voor HTML <img>, CSS background-image en Markdown. 100% client-side — je bestanden verlaten je browser nooit.

100% Client-Side Geen Upload Nodig Instant Codering Klaar om te Kopieëren & Plakken

Sleep je afbeelding hierTik om je afbeelding te kiezen

PNG, JPEG, GIF, WebP, SVG, BMP, ICO

Je bestanden verlaten je browser nooit. Alle codering gebeurt client-side — niets wordt geüpload naar enige server.

Hoe Afbeelding naar Base64 Coderen

Upload

Sleep of selecteer je afbeelding. Ondersteunt PNG, JPEG, GIF, WebP, SVG, BMP en ICO-formaten.

Codeer

Je afbeelding wordt onmiddellijk geconverteerd naar Base64 in je browser. Geen upload nodig — codering gebeurt client-side.

Kopieëren

Kopieer het gereed-om-te-gebruiken codefragment voor HTML, CSS of Markdown. Plak het rechtstreeks in je project.

Wat is Base64 Afbeeldingcodering?

Base64 is een binair-naar-tekst-coderingsschema dat binaire gegevens converteert naar een reeks ASCII-tekens. Wanneer toegepast op afbeeldingen, transformeert het de onbewerkte binaire bestandsgegevens naar een tekstrepresentatie met 64 tekens (A–Z, a–z, 0–9, +, /) plus het = opvulkarakter.

De gecodeerde string kan rechtstreeks worden ingebed in HTML, CSS, JavaScript, JSON, XML en andere tekstgebaseerde indelingen met behulp van het Data URI-schema. In plaats van naar een extern afbeeldingsbestand via een URL te verwijzen, neem je de volledige afbeeldingsgegevens inline op als een data:image/png;base64,... string. De browser decodeert deze string en geeft de afbeelding weer zonder een extra HTTP-verzoek.

Base64-codering is gedefinieerd in RFC 4648 en het Data URI-schema in RFC 2397. Beide worden wijd ondersteund in alle moderne browsers, e-mailclients en ontwikkelingskaders.

Wanneer Base64-afbeeldingen Gebruiken

Base64-gecodeerde afbeeldingen zijn ideaal in specifieke scenario's waar het elimineren van externe bestandsafhankelijkheden belangrijker is dan bestandsgrootte:

Inline in HTML — Plaats kleine pictogrammen, logo's of decoratieve afbeeldingen rechtstreeks in je HTML. Elimineert een extra HTTP-verzoek, wat de waargenomen laadtijd voor kleine afbeeldingen (onder 2–5 KB) kan verbeteren.
CSS-achtergronden — Plaats kleine achtergrondpatronen, sprites of UI-pictogrammen rechtstreeks in je stylesheet. Geen extern bestand om te beheren, en de afbeelding laadt met de CSS zonder een afzonderlijk verzoek.
E-mailsjablonen — HTML-e-mails kunnen niet vertrouwen op externe afbeeldingshosting die toegankelijk is. Het insluiten van afbeeldingen als Base64 Data URIs zorgt ervoor dat ze worden weergegeven, zelfs wanneer de e-mailclient van de ontvanger externe afbeeldingen blokkeert.
Toepassingen met één bestand — Bij het bouwen van zelfstandige HTML-bestanden, dashboards of rapporten die offline moeten werken, kunt u met Base64 alle afbeeldingen in één bestand bundelen.
API-payloads — Wanneer afbeeldingsgegevens via JSON-API's worden verzonden, converteert Base64-codering binaire afbeeldingsgegevens naar een JSON-veilige string. Gebruikelijk in upload-API's, avatar-systemen en datapijplijnen.
Dynamische afbeeldingsgenerering — Server-side scripts die afbeeldingen on-the-fly genereren, kunnen Base64-strings retourneren in plaats van tijdelijke bestanden te beheren.

Wanneer NIET Base64-afbeeldingen Gebruiken

Base64-codering is niet altijd de juiste keuze. Hier zijn situaties waarin normale afbeeldingsbestanden beter zijn:

Grote afbeeldingen (over 20–30 KB) — Base64-codering voegt ongeveer 33% aan de bestandsgrootte toe. Een 100 KB-afbeelding wordt ~133 KB Base64-tekst ingebed in je HTML of CSS. Dit vergroot de documentgrootte, vertraagt het parseren en verspilt bandbreedte.
Browsercaching — Externe afbeeldingsbestanden kunnen onafhankelijk door de browser in cache worden opgeslagen. Base64-afbeeldingen ingebed in HTML worden elke keer dat de pagina laadt opnieuw gedownload. Ingebed in CSS worden zij in cache opgeslagen met de stylesheet, maar kunnen niet tussen pagina's worden gedeeld.
Render-prestaties — De browser moet de Base64-string terug naar binair decoderen voordat deze wordt weergegeven. Voor grote afbeeldingen voegt deze decodeer-stap meetbare vertraging toe in vergelijking met het rechtstreeks weergeven van een gecached binair bestand.
SEO en toegankelijkheid — Zoekmachines kunnen Base64-gecodeerde afbeeldingen niet indexeren voor afbeeldingszoeken. Gebruik passende <img>-tags met src URL's voor afbeeldingen die je wilt weergeven in afbeeldingszoekresultaten.
Content Delivery Networks — CDN's zijn ontworpen om statische assets (inclusief afbeeldingen) van edge-servers dicht bij de gebruiker te bedienen. Base64-inline afbeeldingen omzeilen CDN-voordelen volledig.

Base64 Grotteoverhead

Base64-codering verhoogt de bestandsgrootte met ongeveer 33%. Dit is een inherente eigenschap van de codering: elke 3 bytes binaire gegevens worden 4 bytes Base64-tekst (elk Base64-karakter vertegenwoordigt 6 bits, maar gebruikt 8 bits in tekst). De exacte formule is:

Base64-grootte = ceil(originele grootte / 3) × 4

Voor praktische referentie:

Een 1 KB pictogram wordt ~1,33 KB in Base64 — verwaarloosbare overhead
Een 10 KB miniatuur wordt ~13,3 KB — nog steeds redelijk voor inline gebruik
Een 100 KB foto wordt ~133 KB — overweeg in plaats daarvan een normaal bestand te gebruiken
Een 1 MB afbeelding wordt ~1,33 MB — gebruik zeker een extern bestand

De zoet plek voor Base64-afbeeldingen is onder 10–20 KB originele bestandsgrootte. In dit bereik compenseert het elimineren van een HTTP-verzoek vaak voor de grootteverhoging, vooral bij verbindingen met hoge latentie.

Veelgestelde vragen

Waarom is de Base64-string groter dan het originele bestand?

Base64-codering vertegenwoordigt binaire gegevens met slechts 64 ASCII-tekens (A–Z, a–z, 0–9, +, /). Omdat elk Base64-karakter 6 bits gegevens codeert maar 8 bits (1 byte) in tekst in beslag neemt, is de gecodeerde uitvoer ongeveer 33% groter dan het originele binaire bestand. Een 30 KB PNG-afbeelding wordt bijvoorbeeld ongeveer 40 KB als een Base64-string. Deze overhead is het compromis voor het vermogen om binaire gegevens rechtstreeks in tekstindelingen zoals HTML, CSS en JSON in te sluiten.

Wordt mijn afbeelding naar een server geüpload?

Nee. Deze tool wordt volledig in je browser uitgevoerd met de JavaScript FileReader API. Je afbeeldingsbestand verlaat je apparaat nooit — alle codering wordt client-side uitgevoerd. Geen gegevens worden naar enige server verzonden, waardoor deze tool volledig privé en veilig is voor gevoelige afbeeldingen. Je kunt dit verifiëren door je internet uit te schakelen en de tool te gebruiken — deze zal nog steeds werken.

Welke afbeeldingsformaten worden ondersteund?

Deze tool ondersteunt alle veelgebruikte webafbeeldingsformaten: PNG, JPEG (JPG), GIF, WebP, SVG, BMP en ICO. De encoder leest de binaire gegevens van het bestand en converteert het naar Base64, ongeacht de afbeeldingsinhoud. Het juiste MIME-type wordt automatisch gedetecteerd uit de bestandsextensie en opgenomen in de Data URI (bijv. data:image/png;base64,... voor PNG-bestanden).

Kan ik Base64-afbeeldingen in e-mails gebruiken?

Ja, maar met voorbehoud. Base64-gecodeerde afbeeldingen kunnen worden ingebed in HTML-e-mails met het Data URI-schema in het src-attribuut van een <img>-tag. Dit elimineert de behoefte aan externe afbeeldingshosting en vermijdt dat afbeeldingen worden geblokkeerd door e-mailclients. Sommige e-mailclients (opmerkelijk oudere versies van Outlook) geven Base64 Data URI-afbeeldingen echter mogelijk niet weer. Voor maximale compatibiliteit moet je Base64-afbeeldingen klein houden (minder dan 50 KB originele grootte) en testen in doele-mailclients.

Is er een aanbevolen groottelimiet voor Base64-afbeeldingen?

Voor praktisch gebruik moet je Base64-gecodeerde afbeeldingen onder 20–30 KB houden (originele bestandsgrootte). Grotere afbeeldingen vergroten de HTML/CSS-bestandsgrootte aanzienlijk, kunnen niet afzonderlijk door browsers in cache worden opgeslagen en vertragen de paginarendering omdat de browser de volledige string moet decoderen voordat deze wordt weergegeven. Voor afbeeldingen groter dan 30 KB is het over het algemeen beter een normaal afbeeldingsbestand via HTTP te gebruiken — de browser kan het cachen, parallel laden en efficiënter decoderen.

Wat is een Data URI?

Een Data URI (Uniform Resource Identifier) is een schema waarmee je bestandsgegevens rechtstreeks in een document kunt insluiten in plaats van naar een extern bestand te verwijzen. De indeling is: data:[MIME-type];base64,[encoded-data]. Voor afbeeldingen ziet dit eruit als data:image/png;base64,iVBORw0KGgo... — je kunt deze string overal gebruiken waar een URL wordt verwacht: in HTML <img> src-attributen, CSS url()-waarden of JavaScript-afbeeldingsbronnen. Data URI's zijn gedefinieerd in RFC 2397.

Gerelateerde Hulpmiddelen

Base64 naar Afbeelding JPG naar PNG PNG naar JPG Afbeelding Comprimeren