Afbeelding naar Base64

Converteer elke afbeelding direct naar een Base64 data-URI. Kopieer de gecodeerde string voor CSS-achtergronden, HTML img-tags of sluit direct in in JSON.

PNG · JPG · GIF · SVG · WebPDirecte coderingGeen upload

① Sleep of selecteer een afbeeldingsbestand ② Kies het uitvoerformaat (Base64 / Data URL) ③ Kopieer de gecodeerde string

Sleep afbeelding hierPNG, JPG, GIF, SVG, WebP — of klik om te bladeren
Hoe het werkt

De FileReader API leest je afbeeldingsbestand en converteert het naar een Base64-gecodeerde data-URI. Alles draait in de browser — je bestand verlaat nooit je apparaat.

Wat is Base64?

Base64 codeert binaire gegevens als ASCII-tekst met 64 afdrukbare tekens. Een data-URI combineert het MIME-type en de Base64-string in een enkele insluitbare string die begint met data:.

Wanneer gebruiken

Gebruik Base64-afbeeldingen om HTTP-verzoeken voor kleine iconen te elimineren, afbeeldingen in CSS in te sluiten, afbeeldingen in JSON API's op te slaan, of in e-mail HTML waar externe afbeeldingen worden geblokkeerd.

Afbeelding naar Base64 — hoe data-URI codering werkt

Base64-codering converteert binaire gegevens (zoals afbeeldingsbestanden) naar een tekstreeks met alleen ASCII-tekens. Een Data URL (data:image/png;base64,...) sluit de gecodeerde gegevens direct in HTML of CSS in, zonder een apart HTTP-verzoek. De FileReader API genereert de string volledig client-side. Ideaal voor kleine iconen in <img src="data:...">-tags of CSS background-image. De gecodeerde string is ongeveer 33% groter dan het originele binaire bestand.

Veelgestelde vragen

Base64-codering converteert binaire afbeeldingsgegevens naar een string van ASCII-tekens. Een data-URI omhult deze string met een MIME-type prefix (bijv. data:image/png;base64,...) zodat het overal kan worden gebruikt waar een URL wordt verwacht.
De FileReader API van de browser leest het bestand als binaire buffer, codeert vervolgens elke 3 bytes binaire data als 4 Base64-tekens. Het resultaat is een zelfstandige string met het bestandstype en alle pixelgegevens.
Een Base64-string bevat alleen de ruwe gecodeerde gegevens. Een data-URI is de volledige insluitbare string: data:[MIME-type];base64,[Base64-string]. Voor HTML of CSS heb je de volledige data-URI nodig.
Elk afbeeldingsformaat dat de browser kan lezen: PNG, JPG, GIF, SVG, WebP, BMP, ICO, AVIF. Het MIME-type wordt automatisch gedetecteerd.
Base64-gecodeerde afbeeldingen zijn ongeveer 33% groter dan het originele binaire bestand. Ze kunnen niet apart door de browser worden gecacht. Gebruik Base64 alleen voor bestanden kleiner dan 10-20 KB.
In CSS: background-image: url('data:image/png;base64,...'). De knop 'Kopieer als CSS-achtergrond' formatteert de waarde klaar om te plakken.
Nee. De conversie draait volledig in je browser via de FileReader API. Je afbeeldingsbestand verlaat nooit je apparaat.

Ontdek ons netwerk