Afbeelding naar Base64 Converter
Deze Image to Base64 Converter zet afbeeldingen om naar Base64 data-URL's in je browser zonder bestanden te uploaden, wat je privacy waarborgt.
De Image to Base64 Converter converteert afbeeldingen zoals JPEG, PNG, WebP en SVG direct in je browser naar Base64-codering. Base64-code vergroot de bestandsgrootte met ongeveer 33%, maar elimineert HTTP-verzoeken, wat handig is voor e-mailtemplates en CSS-sprites. Omdat de verwerking lokaal plaatsvindt via de FileReader API, worden geen afbeeldingen naar servers gestuurd, wat maximale privacy garandeert. Deze tool werkt uitstekend samen met Base64 Encode voor codering en Base64 Decode voor decodering van Base64-strings.
Hoe te gebruiken
- Klik op de uploadknop en selecteer een afbeelding in formaten zoals JPEG, PNG, GIF of SVG.
- De tool leest het bestand met de FileReader API en converteert het naar een Base64-string.
- Bekijk de gegenereerde Base64-raw string, een HTML
<img>tag snippet, en een CSS background-image snippet. - Kopieer de gewenste output voor gebruik in je project, bijvoorbeeld in e-mailtemplates of inline CSS.
Hoe werkt het
De tool gebruikt de JavaScript FileReader API om afbeeldingen als ArrayBuffer te laden. Daarna wordt deze binaire data omgezet naar een Base64-encoded string volgens de MIME-specificatie. Base64-codering converteert elke 3 bytes in 4 ASCII-tekens, wat resulteert in een bestandsgroei van ongeveer 33%. De output is een data-URL die direct in HTML of CSS kan worden ingesloten zonder extra HTTP-verzoeken.
Voorbeeld
Input: logo.png (5 KB JPEG-afbeelding)
Output raw Base64 string:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...
HTML snippet:
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..." alt="logo" />
CSS snippet:
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...');Wanneer te gebruiken
- Voor kleine iconen of afbeeldingen tot 10 KB om HTTP-verzoeken te verminderen.
- In e-mailtemplates waar externe afbeeldingen vaak geblokkeerd worden.
- Voor CSS sprites om meerdere afbeeldingen in één bestand te combineren.
- Tijdens ontwikkeling om snel inline afbeeldingen te testen zonder aparte hosting.
- In webdesign om kleine decoratieve afbeeldingen direct in CSS te embedden.
Gebruik ook de Base64 Encode tool voor algemene Base64-codering en Base64 Decode om Base64-strings terug te converteren naar binaire data. Voor beveiligingsdoeleinden kan de Hash Generator helpen om checksums of hashes van je bestanden te genereren.
Veelgestelde Vragen
Welke afbeeldingsformaten ondersteunt de Image to Base64 Converter?
Deze tool ondersteunt JPEG, PNG, WebP, GIF, BMP, TIFF en SVG. Dit maakt het geschikt voor de meest gebruikte webafbeeldingen en vectorafbeeldingen.
Waarom neemt de Base64-gecodeerde afbeelding meer ruimte in beslag?
Base64-codering zet elke 3 bytes om in 4 ASCII-tekens, wat leidt tot een grootteverhoging van ongeveer 33%. Dit komt doordat Base64 6-bits blokken gebruikt om data te representeren in tekstformaat.
Worden mijn afbeeldingen geüpload naar een server?
Nee, alle verwerking gebeurt lokaal in je browser via de JavaScript FileReader API. Er vindt geen datatransmissie plaats, wat je privacy volledig beschermt.
Wat is een praktisch maximum voor de afbeeldingsgrootte om te converteren?
Voor optimale prestaties en bruikbaarheid wordt meestal een maximale bestandsgrootte van 10 KB aanbevolen. Grotere bestanden veroorzaken langere laadtijden en aanzienlijke base64-groottevergroting.
Hoe kan ik de gegenereerde Base64 gebruiken in mijn CSS?
Je kunt de Base64-string in een background-image CSS-eigenschap plaatsen als een data-URL, bijvoorbeeld: background-image: url('data:image/png;base64,...'); Dit elimineert extra HTTP-verzoeken voor kleine afbeeldingen.