Afbeelding ⇔ Base64 Converter

Converteer tussen afbeeldingsbestanden en Base64 (Data URI)

Codeer afbeeldingen naar Base64 Data URI of decodeer Base64-strings terug naar afbeeldingen. Ondersteunt de formaten PNG, JPEG, GIF en WebP. Eenvoudige slepen-en-neerzetten bewerking. Alle verwerking gebeurt in uw browser - er worden geen gegevens opgeslagen of verzonden.

Hoe te Gebruiken

Converteer in 3 eenvoudige stappen:

Selecteer de conversiemodus
Kies het tabblad 'Afbeelding → Base64' of 'Base64 → Afbeelding'.
Voer uw gegevens in
Voor de afbeeldingsmodus: sleep en laat vallen of selecteer een afbeeldingsbestand. Voor de Base64-modus: plak uw Base64-string.
Gebruik het resultaat
Conversieresultaten worden direct weergegeven. Kopieer Base64 met de kopieerknop, of download de afbeelding met de downloadknop.

Privacybescherming: Alle verwerking gebeurt in uw browser. Afbeeldingsgegevens worden nooit naar een server verzonden of daar opgeslagen.

Afbeelding ⇔ Base64 Converter

📁

Sleep en zet het afbeeldingsbestand hier neer, of klik om te selecteren

Ondersteunde formaten: PNG, JPEG, GIF, WebP, SVG (max. 10MB aanbevolen)

Voorbeeld

Bestandsnaam

Bestandsgrootte

Afmetingen

Formaat

Base64 Gecodeerd Resultaat (Data URI)

Voer Base64-string in

Voorbeeld

Praktische Gebruikssituaties voor Afbeelding Base64 Conversie

Base64-codering van afbeeldingen wordt vaak gebruikt in webontwikkeling voor de volgende doeleinden:

1. Afbeeldingen insluiten in HTML of CSS

Sluit kleine pictogrammen of logo-afbeeldingen direct in in HTML <img>-tags of CSS background-image-eigenschappen om HTTP-verzoeken te verminderen en de laadsnelheid van de pagina te verbeteren. Vooral handig als alternatief voor icon fonts.

2. Alternatief voor CSS-sprites

In plaats van meerdere kleine afbeeldingen te combineren in één 'CSS sprite'-bestand, codeert u elke afbeelding naar Base64 en sluit u deze in in CSS voor eenvoudiger beheer.

3. Afbeeldingen insluiten in HTML-e-mails

Sommige e-mailclients blokkeren het laden van externe afbeeldingen. Het insluiten van belangrijke afbeeldingen (zoals logo's) als Data URI's zorgt ervoor dat ze betrouwbaar worden weergegeven.

4. Afbeeldingsoverdracht via REST API

Bij het verzenden/ontvangen van afbeeldingsgegevens via JSON API's maakt Base64-codering de verwerking van binaire gegevens als tekstformaat mogelijk. Breng afbeeldingen over in een eenvoudig JSON-formaat zonder multipart-communicatie.

5. Offline applicaties

In Progressive Web Apps (PWA) of Electron-apps zorgt het insluiten van Base64-gecodeerde afbeeldingen in HTML ervoor dat afbeeldingen betrouwbaar worden weergegeven, zelfs in offline omgevingen.

6. Ontwikkeling van mobiele apps

Het gebruik van Base64-gecodeerde afbeeldingen in cross-platform frameworks zoals React Native, Ionic en Flutter zorgt voor een uniforme afbeeldingsverwerking op alle platforms.

Wat is Data URI? Het Mechanisme Begrijpen

Data URI (ook wel Data URL genoemd) is een URL-schema waarmee kleine bestanden zoals afbeeldingen of lettertypen rechtstreeks in HTML of CSS kunnen worden ingesloten. Het converteert de bestandsinhoud naar tekst met behulp van Base64-codering en geeft deze weer als onderdeel van een URL.

Data URI Formaat

Data URI wordt in het volgende formaat geschreven:

data:[MIME type];[coderingsmethode],[gecodeerde gegevens]

Voorbeeld (PNG):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

Voordelen van Data URI

Gereduceerde HTTP-verzoeken: Geen externe bestandsverzoeken nodig, wat de laadsnelheid van de pagina verbetert
Pakket in één bestand: Compleet in één enkel HTML- of CSS-bestand voor eenvoudige distributie en beheer
Betrouwbare weergave: Voorkomt verbroken of geblokkeerde externe afbeeldingslinks

Nadelen van Data URI

Verhoogde bestandsgrootte: Base64-codering verhoogt de gegevensgrootte met ongeveer 33%
Lagere cache-efficiëntie: Het bijwerken van afbeeldingen vereist het opnieuw downloaden van het volledige HTML/CSS-bestand
Verminderde leesbaarheid: De broncode wordt lang en moeilijker te onderhouden

Beste Praktijken

Wanneer Data URI Gebruiken

✅ Kleine pictogrammen of logo's (5KB of minder aanbevolen)
✅ Veelgebruikte decoratieve afbeeldingen (knopachtergronden, enz.)
✅ Belangrijke afbeeldingen die offline ondersteuning vereisen

Wanneer GEEN Data URI Gebruiken

❌ Grote afbeeldingen (10KB+): De bestandsgrootte wordt opgeblazen
❌ Vaak bijgewerkte afbeeldingen: Slechte cache-efficiëntie
❌ Afbeeldingen die op meerdere pagina's worden hergebruikt: Dubbele insluiting op elke pagina

⚠️ Over het algemeen wordt het gebruik van Data URI aanbevolen voor kleine afbeeldingen (5KB of minder). Voor grotere afbeeldingen zijn standaard <img>-tags of externe bestandsinvoer efficiënter.

Veelgestelde Vragen (FAQ)

Welke afbeeldingsformaten worden ondersteund?

Alle door de browser ondersteunde afbeeldingsformaten, inclusief PNG, JPEG, GIF, WebP en SVG, kunnen worden geconverteerd. PNG en JPEG zijn het meest gebruikelijk.

Is er een groottelimiet voor afbeeldingsconversie?

Er is geen technische limiet, maar voor prestaties en browsergeheugen wordt 10MB of minder aanbevolen. In de praktijk zijn afbeeldingen van 5KB of minder het meest effectief.

Hoeveel neemt de afbeeldingsgrootte toe met Base64-codering?

Base64-codering vergroot de bestandsgrootte tot ongeveer 133% van het origineel (ongeveer 33% toename). Een afbeelding van 9KB wordt bijvoorbeeld een Base64-string van ongeveer 12KB.

Kunnen transparante PNG-afbeeldingen naar Base64 worden geconverteerd?

Ja, transparante PNG-afbeeldingen kunnen worden geconverteerd zoals ze zijn. De transparantie-informatie blijft behouden, zodat ze correct worden weergegeven met transparantie wanneer ze zijn ingesloten in HTML of CSS.

Hoe sluit ik de Base64-string in HTML in?

Plak direct in het src-attribuut van de <img>-tag. Voorbeeld: <img src="data:image/png;base64,iVBORw0KG...">

Hoe gebruik ik het als CSS background-image?

Plak in de url()-functie als volgt: background-image: url('data:image/png;base64,iVBORw0KG...');

Worden geüploade afbeeldingen op de server opgeslagen?

Nee, alle verwerking gebeurt in uw browser. Afbeeldingsgegevens worden nooit naar een server verzonden.

Kan ik dit gebruiken voor commerciële websites?

Ja, deze tool is volledig gratis en kan vrij worden gebruikt voor zowel commerciële als niet-commerciële doeleinden.