0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Instellingen
Converteer afbeeldingen naar Base64 om ze in HTML, CSS of JSON in te sluiten, of decodeer een Base64-string terug naar afbeelding. Het ondersteunt PNG, JPEG, GIF, WebP, SVG en BMP.
Werking

Sleep een afbeelding of klik om te selecteren

PNG, JPEG, GIF, WebP, SVG, BMP

Hoe het werkt

Het zet een afbeelding om in een Base64-string in de vorm van een Data-URI (data:image/…;base64,…), die je rechtstreeks in HTML of CSS kunt insluiten zonder apart bestand of extra HTTP-verzoek.

Het resultaat neemt ongeveer 33% meer ruimte in dan het originele bestand, daarom kun je het het beste voor kleine afbeeldingen reserveren: pictogrammen, logo's, patronen of placeholders.

In de decodeermodus accepteert het een Base64-string of een volledige Data-URI, detecteert het beeldtype aan de hand van de eerste bytes en toont een downloadbare voorbeeldweergave.

Voorbeelden

logo.pngdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…Het voorvoegsel data:image/png;base64, geeft het type aan. Elke gecodeerde PNG begint met iVBORw0KGgo, wat overeenkomt met zijn bestandshandtekening.
background-image: url("data:image/png;base64,iVBORw0KGgo…");De Data-URI kan ongewijzigd binnen een CSS-regel worden gebruikt om de afbeelding zonder extern bestand in te sluiten.

Gebruiksscenario's

  • Kleine pictogrammen of logo's in CSS/HTML insluiten via data-URI's en zo extra verzoeken vermijden.
  • Een afbeelding opslaan binnen een JSON, een configuratiebestand of een database.
  • Afbeeldingen verzenden via API's of e-mails (MIME) die alleen tekst accepteren.
  • Een afbeelding herstellen en bekijken vanuit een Base64-string of een Data-URI.

Veelgestelde vragen

Moet ik alle afbeeldingen naar Base64 converteren?

Nee. Het vergroot de grootte met ongeveer 33% en de browser kan de afbeelding niet apart cachen. Het is ideaal voor kleine afbeeldingen, maar voor grote is een apart bestand bijna altijd beter.

Welke afbeeldingsformaten ondersteunt het?

Elk formaat bij het coderen (PNG, JPEG, GIF, WebP, BMP, SVG). Bij het decoderen detecteert het het type automatisch uit de eerste bytes van het bestand.

Waarom is mijn Data-URI zo lang?

Omdat Base64 elke 3 bytes met 4 tekens weergeeft, groeit de tekst met ongeveer 33% ten opzichte van het originele binaire bestand. Dit is normaal, vooral bij afbeeldingen.

Wordt mijn afbeelding naar een server geüpload?

Nee. De afbeelding wordt volledig in je browser gelezen en gecodeerd; hij verlaat nooit je computer.

Zie ook