🔐
← Terug naar handleidingen

Hoe converteer je afbeeldingen naar Base64-data-URL's

· Tags: image-to-base64, base64, data-url, image-embedding, web-performance, html, css

Wat is een Base64-afbeeldingsdata-URL?

Een Base64-afbeeldingsdata-URL sluit het volledige afbeeldingsbestand rechtstreeks in een webdocument in als tekstreeks, waardoor een afzonderlijk HTTP-verzoek om de afbeelding te laden niet nodig is. In plaats van dat de browser een extern bestand ophaalt, is de afbeeldingsgegevens al aanwezig in de HTML of CSS.

Het formaat ziet er als volgt uit:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

Uitgesplitst:

  • data: — het data-URI-schemavoorvoegsel
  • image/png — het MIME-type van de ingesloten afbeelding
  • ;base64 — geeft Base64-codering aan
  • ,iVBORw0... — de daadwerkelijke Base64-gecodeerde afbeeldingsgegevens

Waarom afbeeldingen naar Base64 converteren?

Het insluiten van afbeeldingen als Base64 is in verschillende situaties nuttig:

HTTP-verzoeken verminderen

Elk extern afbeeldingsbestand vereist een afzonderlijk HTTP-verzoek. Base64-data-URL's elimineren deze verzoeken, wat de laadtijd van de pagina kan verbeteren — vooral op verbindingen met hoge latentie of voor pagina's met veel kleine assets.

Zelfstandige documenten

Base64-afbeeldingen maken uw HTML-bestanden volledig draagbaar. Een e-mailsjabloon met Base64-afbeeldingen werkt zelfs wanneer de e-mailclient van de ontvanger externe bronnen blokkeert. Evenzo kan een HTML-document met ingesloten afbeeldingen als één bestand worden gedeeld zonder zorgen over gebroken afbeeldingspaden.

Prestatiekritische pagina's

Voor hero-afbeeldingen boven de vouw en kritieke UI-elementen kan het elimineren van de extra round trip statistieken zoals Largest Contentful Paint (LCP) verbeteren. Dit is echter alleen gunstig voor kleine afbeeldingen — voor grote afbeeldingen werkt inlining averechts.

Werkt offline

Wanneer een afbeelding is ingesloten als data-URL, werkt deze zonder netwerktoegang. Dit is waardevol voor offline webapplicaties en progressive web apps (PWA's).

Hoe converteert u een afbeelding naar Base64

Methode 1: Een online tool gebruiken (makkelijkst)

De snelste manier om een afbeelding naar Base64 te converteren is het gebruik van een speciale online tool. Upload of sleep uw afbeelding naar onze gratis online Base64-coder en u krijgt de volledige data-URL die klaar is om in uw code te plakken.

Methode 2: JavaScript in de browser gebruiken

De FileReader-API biedt een eenvoudige manier om door de gebruiker geselecteerde afbeeldingen naar Base64 te converteren:

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage with a file input
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

Methode 3: De Canvas-API gebruiken

Als u een afbeelding wilt verkleinen, bijsnijden of comprimeren voordat u deze naar Base64 converteert, is de Canvas-API de juiste keuze:

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Example: Resize an image before converting
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

Methode 4: Node.js gebruiken

Aan de serverzijde gebruikt u de module fs met Buffer om afbeeldingsbestanden naar Base64 te converteren:

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Detect MIME type from extension
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

Methode 5: De opdrachtregel gebruiken

Op Linux en macOS kunt u het ingebouwde base64-commando gebruiken:

# Encode to Base64 and wrap as a data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

Hoe u Base64-afbeeldingen in HTML gebruikt

Rechtstreeks in een <img>-tag:

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

Hoe u Base64-afbeeldingen in CSS gebruikt

Als achtergrondafbeelding:

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

Prestatieoverwegingen en best practices

Wanneer Base64-afbeeldingen helpen

  • Kleine pictogrammen en UI-elementen onder 10 KB
  • Kritieke afbeeldingen boven de vouw die de weergave blokkeren
  • Sprites en SVG-pictogrammen die op een pagina worden gebruikt
  • E-mailsjablonen waar externe afbeeldingen vaak worden geblokkeerd
  • Offline-first webapps en zelfstandige documenten

Wanneer Base64-afbeeldingen schadelijk zijn

  • Grote foto's of afbeeldingen met hoge resolutie (100 KB+) — de Base64-overhead en parseringsvertraging schaden de prestaties
  • Afbeeldingen die vaak veranderen — het ongeldig maken van de browsercache voor een grote HTML-payload is verspilling
  • Afbeeldingen die over veel pagina's worden gedeeld — externe bestanden profiteren van gedeelde browsercaching
  • Via een CDN aangeboden afbeeldingen — CDN's optimaliseren de levering van bestanden beter dan ingebedde gegevens

De 10 KB-regel als vuistregel

Een veel geciteerde richtlijn: als een afbeelding kleiner is dan 10 KB, overweeg dan om deze als Base64 in te sluiten. Is hij groter, lever hem dan als afzonderlijk bestand. Dit balanceert de overhead van HTTP-verzoeken tegen de overhead van Base64-gecodeerde gegevens in uw HTML.

De optimale drempel hangt echter af van uw specifieke situatie:

  • HTTP/2-multiplexing vermindert de straf van meerdere verzoeken, waardoor externe bestanden aantrekkelijker worden
  • Op langzame verbindingen kan het elimineren van verzoeken waardevol zijn, zelfs voor grotere afbeeldingen
  • Voor resources in het kritieke weergavepad kunt u zelfs grotere afbeeldingen inline plaatsen als dat één round trip minder betekent

Compressieoverweging

Als u JPEG- of PNG-afbeeldingen naar Base64 converteert, overweeg dan om in plaats daarvan WebP te gebruiken. WebP biedt superieure compressie bij hetzelfde kwaliteitsniveau, wat resulteert in kleinere Base64-tekenreeksen. Veel online tools laten u afbeeldingen opnieuw coderen voordat u ze naar Base64 converteert.

Converteer uw afbeeldingen naar Base64

Klaar om afbeeldingen rechtstreeks in uw code in te sluiten? Gebruik onze gratis online Base64-coder en -decoder om afbeeldingen te uploaden en volledige data-URL's te krijgen voor HTML, CSS en JavaScript — geen installatie vereist.