Afbeelding naar Base64 Codering Volledige Gids

Base64-codering zet binaire afbeeldingsgegevens om in een tekstreeks van 64 afdrukbare ASCII-tekens. Dit maakt het mogelijk om afbeeldingen rechtstreeks in te sluiten in HTML, CSS en JSON zonder externe bestandsreferenties.

De techniek wordt veel gebruikt voor kleine pictogrammen, e-mailsjablonen en offline-apps. Begrijpen wanneer Base64 helpt en wanneer het schaadt is essentieel voor moderne webontwikkeling.

Wat is Base64-afbeeldingscodering

Base64 is een binair-naar-tekst coderingsschema dat binaire gegevens representeert met 64 tekens: A–Z, a–z, 0–9, + en /. Elke groep van 3 bytes binaire gegevens wordt afgebeeld op 4 Base64-tekens. In Base64 gecodeerde afbeeldingen kunnen worden opgenomen in HTML als data-URI's of in CSS als background-image-waarden.

Hoe Base64-codering werkt

De encoder leest de afbeelding als ruwe bytes, splitst ze in 6-bit groepen en koppelt elke groep aan een van de 64 tekens. De uitvoer eindigt met = of == als opvulling. Een PNG-bestand van 1KB wordt ongeveer 1,37KB Base64-tekst. De browser decodeert de string terug naar binair vóór het renderen.

Base64 in HTML en CSS

Een Base64-gecodeerde afbeelding kan overal worden gebruikt waar een URL wordt verwacht. In HTML als img-src, in CSS als background-image. Het data-URI-formaat is:

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." />

/* CSS */
.icon &#123;
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
&#125;

Grootte-overhead en prestaties

Base64 voegt ongeveer 33% overhead toe. Een PNG van 10KB wordt ~13,3KB Base64. Het insluiten elimineert echter het HTTP-verzoek — voor kleine bestanden (< 5KB) is deze afweging gunstig. Voor grotere afbeeldingen weegt de overhead zwaarder. Base64-strings zijn niet apart cachebaar.

Wanneer Base64-afbeeldingen gebruiken

Gebruik Base64 voor: kleine pictogrammen en favicons (< 5KB) in CSS; e-mailsjablonen waar externe afbeeldingen geblokkeerd kunnen worden; offline-PWA's; SVG-bestanden met ingebedde bitmap-texturen; JSON-payloads. Vermijd voor: afbeeldingen > 10KB, vaak veranderende afbeeldingen, afbeeldingen die profiteren van CDN-caching.

Beperkingen en alternatieven

Beperkingen: geen aparte browsercaching, 33% grootte-toename, lange strings in broncode. Alternatieven: CSS-sprites, HTTP/2-multiplexing, inline SVG's. Voor e-mails gehoste afbeeldingen op CDN gebruiken wanneer Base64-strings te lang zijn.

FAQ

Wat is Base64-afbeeldingscodering? +

Base64-codering zet binaire afbeeldingsgegevens om in een afdrukbare tekstreeks van 64 ASCII-tekens, waarmee afbeeldingen in HTML, CSS of JSON kunnen worden ingebed zonder aparte bestanden.

Hoeveel groter is een Base64-afbeelding? +

Base64 voegt ongeveer 33% overhead toe. Een PNG van 10KB wordt ~13,3KB Base64-tekst.

Hoe gebruik ik een Base64-afbeelding in HTML? +

Als data-URI in het src-attribuut: . Hetzelfde formaat werkt in CSS als background-image.

Werkt Base64 met alle afbeeldingsformaten? +

Ja. Het MIME-type in de data-URI specificeert het formaat: image/png, image/jpeg, image/gif, image/webp, image/svg+xml.

Moet ik Base64 gebruiken voor grote afbeeldingen? +

Nee. Voor afbeeldingen > 5–10KB weegt de 33% overhead zwaarder dan de besparing op HTTP-verzoeken. Gebruik Base64 alleen voor kleine pictogrammen en placeholders.

Worden Base64-afbeeldingen gecachet door browsers? +

Niet apart. De Base64-string maakt deel uit van het HTML- of CSS-bestand en wordt als onderdeel daarvan gecachet.

Kan ik Base64-afbeeldingen in e-mails gebruiken? +

Ja. Sommige e-mailclients blokkeren externe afbeeldingen maar renderen altijd inline Base64-afbeeldingen. Ze vergroten echter de e-mailgrootte aanzienlijk.