Question 1

Wat is een Base64-afbeelding en waarom zou ik het gebruiken?

Accepted Answer

Een Base64-afbeelding is een afbeeldingsbestand dat is omgezet naar een Base64-gecodeerde tekenreeks. Hierdoor kan de afbeelding als tekst direct worden ingesloten in HTML, CSS of JSON, zonder apart bestand. Veelgebruikte toepassingen:

kleine afbeeldingen insluiten in HTML/CSS om HTTP-verzoeken te verminderen

afbeeldingen opnemen in JSON-API-responses

afbeeldingen insluiten in SVG-bestanden

data-URI’s maken voor webapps

afbeeldingen opslaan in databases zonder binaire ondersteuning

Hoewel de bestandsgrootte ~33% groter wordt, wegen de voordelen vaak zwaarder bij kleine afbeeldingen.

Question 2

Hoe gebruik ik Base64-afbeeldingen in HTML, CSS en JavaScript?

Accepted Answer

Gebruik in verschillende webtechnieken:
HTML:
CSS: background-image: url('data:image/jpeg;base64,ABC123...');
JavaScript: const img = new Image(); img.src = 'data:image/png;base64,ABC123...';
Altijd het formaat data:[MIME type];base64,[data]. Werkt goed voor kleine afbeeldingen; voor grote bestanden zijn traditionele verwijzingen efficiënter.

Question 3

Wat zijn de voor- en nadelen van Base64-afbeeldingen?

Accepted Answer

Voordelen:

minder HTTP-verzoeken

eenvoudiger deployment (minder bestanden)

afbeeldingen kunnen in JSON worden opgenomen

geen CORS-problemen (inline)

cache-synchronisatie met code

Nadelen:

bestandsgrootte stijgt met ~33%

geen aparte caching door browser

grotere HTML/CSS-bestanden

lastiger onderhoud van ingesloten afbeeldingen

prestatieproblemen bij grote afbeeldingen

Aanbevolen voor kleine iconen of UI-elementen, niet voor grote foto’s.

Question 4

Welke afbeeldingsformaten kunnen worden omgezet naar Base64?

Accepted Answer

Alle formaten, meest gebruikt voor web:

PNG (transparantie, logo’s)

JPEG (foto’s)

SVG (vectorafbeeldingen)

GIF (eenvoudige animaties)

WebP (moderne compressie)

ICO (favicons)

Geef het juiste MIME-type aan (bijv. data:image/png;base64,). De tool detecteert dit automatisch.

Question 5

Is er een limiet aan de grootte van Base64-afbeeldingen?

Accepted Answer

Technisch niet, maar praktisch wel:

bestand ~33% groter

lange strings vertragen browsers

limieten op lengte van CSS data-URI’s

grotere HTML/CSS-bestanden vertragen de laadtijd

Beste gebruik: kleine afbeeldingen (<10KB). Voor grote bestanden zijn traditionele HTTP/HTTPS-bestanden beter.

Base64 Afbeeldingsconverter – Conversie tussen afbeeldingen en Base64

Veelgestelde vragen

Gerelateerde hulpmiddelen

Kleurmodelconverter – Converteer tussen HEX, RGB, HSL, HSV, OKLCH en OKLAB

JSON-XML-converter – Converteren tussen JSON en XML

JSON-TOML-converter – Converteren tussen JSON en TOML