Afbeelding ↔ Base64-converter
Zet afbeeldingen om in Base64-data-URL’s en terug — met CSS- en HTML-snippets
Over deze tool
Sleep, kies of plak een afbeelding en krijg de Base64-vorm in elke smaak die je nodig kunt hebben: een kant-en-klare data-URL, een CSS-declaratie background-image, een volledige <img>-tag met intrinsieke afmetingen, en de ruwe Base64-payload. De omgekeerde richting werkt ook — plak een data-URL of een kale Base64-blob en de afbeelding wordt gedecodeerd, getoond en is als bestand te downloaden.
Het formaat wordt uit de magic bytes bepaald, niet uit de bestandsextensie of het opgegeven mimetype, dus een PNG die is hernoemd naar .jpg (of een data-URL met het verkeerde label) converteert alsnog correct. Het formaatpaneel is eerlijk over de kosten: Base64 blaast data met ongeveer een derde op, en de exacte gecodeerde grootte staat naast het origineel, zodat je kunt beslissen of inline zetten het waard is.
Anders dan bij de meeste image-to-Base64-sites wordt er niets geüpload — het bestand wordt gelezen met de FileReader-API van de browser en in de pagina gecodeerd. Daardoor is het veilig voor schermafbeeldingen van interne dashboards, nog niet uitgebrachte productfoto’s, of wat je verder liever niet aan de server van een vreemde geeft.
Veelgestelde vragen
- Wanneer moet ik een afbeelding als Base64 inline zetten in plaats van een bestand te linken?
- Wanneer de afbeelding klein is (ruwweg onder 10 kB), zelden verandert en anders een extra HTTP-verzoek zou kosten — denk aan iconen, logo’s in e-mails, of HTML-documenten die één bestand moeten blijven. Voor alles wat groter is wint een apart bestand: het cachet onafhankelijk, laadt parallel en blaast je HTML of CSS niet met 33% op.
- Waarom is de Base64-versie ongeveer een derde groter dan mijn bestand?
- Base64 stelt elke 3 bytes binair voor als 4 ASCII-tekens, een structurele overhead van +33% (plus maximaal twee paddingtekens). Gzip of Brotli op je server haalt een deel terug, maar de opblazing zit in de codering zelf — het ruilt grootte in voor de mogelijkheid binaire data in tekst in te bedden.
- Kan ik een data-URL decoderen die ik in een stylesheet of HTML vond?
- Ja — schakel naar Base64 → afbeelding en plak het geheel, inclusief het data:-voorvoegsel. Percent-gecodeerde SVG-data-URL’s (die zonder ;base64) decoderen ook, en regeleinden of witruimte binnen de payload worden automatisch verwijderd. Het resultaat wordt in de pagina getoond en downloadt met de juiste extensie.
- Werkt dit voor SVG-, GIF- en ICO-bestanden, of alleen voor PNG en JPEG?
- Alles wat de sniffer herkent converteert naar Base64: PNG, JPEG, WebP, GIF, SVG, BMP, ICO en AVIF. Bedenk bij SVG dat de XML-bron vaak kleiner en leesbaarder is als je hem direct inline zet — SVG in Base64 coderen is vooral zinvol wanneer aanhalingstekens of escapes een probleem worden.