image Base64 Afbeeldingsconverter star

Hoe het werkt

Deze tool werkt in twee richtingen. In de modus Afbeelding → Base64 kiest u een bestand met de native bestandskiezer van uw browser; de tool leest het met de FileReader.readAsDataURL()-API en genereert een volledige data-URI — een tekenreeks zoals data:image/png;base64,iVBORw0KG... — die in één vak wordt getoond, met de kale Base64-payload (zonder voorvoegsel) in een tweede vak, zodat u kunt pakken wat uw gebruiksdoel nodig heeft, elk met een kopieerknop met één klik. In de modus Base64 → Afbeelding plakt u ofwel een volledige data-URI, ofwel enkel de kale Base64-tekst in het tekstvak; als u kale Base64 zonder voorvoegsel plakt, voegt de tool automatisch een data:image/png;base64,-header toe zodat de browser hem alsnog kan weergeven, waarna een live <img>-voorbeeld verschijnt met een downloadknop die de gedecodeerde bytes weer als een echt afbeeldingsbestand opslaat.

Base64-codering neemt binaire gegevens en representeert ze met slechts 64 afdrukbare ASCII-tekens (A–Z, a–z, 0–9, + en /), wat het mogelijk maakt om een inherent binaire afbeelding in te bedden in tekst-only formaten zoals HTML, CSS, JSON of een URL. Het mechanisme is vast en wiskundig: elke 3 bytes (24 bits) van het originele bestand worden precies 4 Base64-tekens (4 × 6 bits), aangevuld met = wanneer de invoerlengte geen veelvoud van 3 is. Diezelfde verhouding van 3 bytes in, 4 tekens uit is ook waarom Base64-uitvoer altijd ongeveer 33% groter is dan het originele binaire bestand — 4 gedeeld door 3 is ongeveer 1,333 — een vaste wiskundige overhead, geen benadering of kwaliteitsinstelling.

Goed om te weten

Een afbeelding als data-URI rechtstreeks in uw HTML of CSS insluiten heeft een echt voordeel: het elimineert een aparte HTTP-verzoek, wat van belang is voor zeer kleine, vaak hergebruikte assets zoals icoontjes, kleine sprites, of een minuscuul logo dat in een e-mailsjabloon is gebakken waar externe afbeeldingen mogelijk geblokkeerd worden. De afweging werkt de andere kant op voor alles wat groter is: een data-URI kan niet onafhankelijk door de browser worden gecachet zoals een gelinkt .png- of .jpg-bestand dat wel kan, het vergroot de omvang van het HTML/CSS-bestand waarin het staat (met datzelfde ~33%), en het blokkeert dat bestand om te renderen totdat de volledige gecodeerde blob is gedownload. Als vuistregel: data-URI's zijn geschikt voor assets van enkele kilobytes en ongeschikt voor foto's, hero-afbeeldingen, of alles wat een gebruiker het liefst gecachet ziet tussen paginaladingen door.

Het MIME-type-voorvoegsel — het deel image/png, image/jpeg of image/webp in data:image/png;base64,... — is niet decoratief. Het vertelt de browser (of elk ander programma dat de tekenreeks leest) aan welke decoder de volgende bytes moeten worden overhandigd; zonder dit voorvoegsel, of met het verkeerde, kan een verder geldige Base64-payload niet renderen of als volledig verkeerd bestandstype worden weergegeven. Precies daarom voegt deze tool automatisch een PNG-voorvoegsel toe wanneer u kale Base64 zonder voorvoegsel plakt — een redelijke standaardwaarde, al kunt u die het beste aanpassen aan het werkelijke formaat van het oorspronkelijke bestand als u weet dat het een JPEG of WebP was.