Afbeelding → Base64-converter

Codeer elke afbeelding naar een Base64 data-URI, of plak een data-URI om deze terug te decoderen naar een afbeelding. Kopieer het resultaat of pak het CSS-url()-fragment. Er verlaat niets je apparaat.

Hoe Afbeelding naar Base64 werkt

Afbeelding naar Base64 leest je afbeeldingsbestand en codeert het als een Base64-data-URI die je direct in HTML, CSS of JSON kunt insluiten zonder een apart bestandsverzoek nodig te hebben. De conversie maakt gebruik van de FileReader API in je browser; er worden geen bytes van je afbeelding naar een server gestuurd. Je kunt ook een Base64-string terugplakken om hem te decoderen en een voorbeeld van de afbeelding te zien, allemaal lokaal.

Een Base64-data-URI is ongeveer 33% groter dan het binaire origineel, omdat elke groep van drie bytes wordt uitgebreid naar vier ASCII-tekens. Deze toename in grootte is de verwachte afweging voor het gemak van het insluiten van een afbeelding in een document of stylesheet. Het hulpmiddel toont je zowel de onbewerkte Base64-string als een kant-en-klare HTML img-tag-snippet en een CSS background-image-snippet voor snelle kopieer-plak in je project.

Geschreven door Bastien Sulyan

Hoe je Afbeelding naar Base64 gebruikt, stap voor stap

Sleep een afbeeldingsbestand naar het uploadgebied of klik om te bladeren. Ondersteunde formaten: JPEG, PNG, WebP, GIF, SVG.
De Base64-data-URI verschijnt onmiddellijk in het uitvoerveld.
Kopieer de onbewerkte Base64-string, of gebruik de vooraf opgemaakte HTML img-tag of CSS background-image-snippet.
Om te decoderen, plak je een Base64-string in het invoerveld en schakel je over naar de decoderingsmodus om de afbeelding te bekijken.
Klik op de kopieerknop naast een snippet om het naar het klembord te kopiëren.

Veelvoorkomende toepassingen

Een front-end ontwikkelaar sluit een klein pictogram in als data-URI in een CSS-bestand om een extra HTTP-verzoek te vermijden.
Een ontwikkelaar sluit een kleine laadspinner in als Base64 src-attribuut zodat de tijdelijke afbeelding beschikbaar is voordat de JavaScript-bundel laadt.
Een QA-engineer kopieert de Base64 van een testafbeelding om direct in een JSON-payload te plakken voor een API-test.
Een e-mailsjabloonbouwer sluit een handtekeninglogo in als Base64-data-URI omdat sommige e-mailclients externe afbeeldingsverzoeken blokkeren.

Veelgestelde vragen

Waarom is de Base64-uitvoer ongeveer een derde groter dan mijn originele bestand?

Base64-codering vertegenwoordigt elke drie binaire bytes als vier ASCII-tekens (een verhouding van 4/3). Een afbeelding van 100 KB in binaire vorm wordt ongeveer 133 KB als Base64-string. Dit is inherent aan het coderingsschema, niet een beperking van het hulpmiddel.

Wordt de afbeeldingsinhoud naar een server verzonden tijdens het coderen?

Nee. De FileReader API leest het binaire bestand van je lokale schijf en geeft het resultaat rechtstreeks door aan de JavaScript-codeerfunctie binnen je browsertabblad. De afbeeldingsdata verlaat je apparaat niet.

Kan ik de data-URI-uitvoer in elke HTML- of CSS-context gebruiken?

Ja. Een data-URI die begint met data:image/jpeg;base64, gevolgd door de gecodeerde string, kan worden gebruikt als het src-attribuut van een img-tag of als de url()-waarde in een CSS background-image-eigenschap. Alle moderne browsers ondersteunen data-URI's. Zeer grote data-URI's kunnen de paginaweergave vertragen, dus insluiting is doorgaans voorbehouden aan kleine afbeeldingen van een paar kilobytes.

Ondersteunt het hulpmiddel geanimeerde GIF's?

Het hulpmiddel codeert de volledige binaire inhoud van elk bestand dat je aanbiedt, inclusief geanimeerde GIF's. De resulterende data-URI, wanneer gebruikt als src van een img-tag, zal de animatie afspelen in browsers die GIF-animatie ondersteunen.

Hoe ga ik de andere kant op en decodeer ik een Base64-string terug naar een afbeelding?

Schakel het hulpmiddel over naar de decoderingsmodus, plak je Base64-string (met of zonder het data:-voorvoegsel), en het hulpmiddel zal het decoderen en de binaire afbeelding aanbieden als download en ook een voorbeeld tonen.

Gerelateerde tools

Houd alles lokaal, verken aanvullende tools.

Alle afbeeldingstools