Wat is Base64?
Base64 is een coderingssysteem dat binaire data — zoals de bytes waaruit een afbeelding bestaat — omzet in een reeks gewone teksttekens. De naam verwijst naar de 64 verschillende tekens (hoofdletters, kleine letters, cijfers, + en /) waarmee elk type data wordt weergegeven.
In de praktijk betekent dat: elk afbeeldingsbestand kun je omzetten in een lange tekstreeks zoals deze:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4
BCVMAAAAJRQAAAAElFTkSuQmCCDat formaat heet een data URI (of data-URL). In plaats van naar een extern bestand te verwijzen, bevat de URL de inhoud van de afbeelding zelf, gecodeerd als tekst. De browser leest die reeks en tekent de afbeelding direct, zonder extra HTTP-verzoek.
Hoe een data URI is opgebouwd
Elke data URI van een afbeelding volgt hetzelfde patroon:
data:[MIME-type];base64,[gecodeerde data]De onderdelen zijn:
- data: — het vaste voorvoegsel dat het schema aangeeft
- [MIME-type] — het formaat van de afbeelding, zoals
image/png,image/jpeg,image/svg+xmlofimage/gif - ;base64, — geeft aan dat de inhoud in Base64 is gecodeerd
- [gecodeerde data] — de lange reeks met de binaire inhoud van de afbeelding, omgezet naar tekst
Let op: Base64-codering maakt de data ongeveer 33% groter. Een afbeelding van 3 KB wordt een reeks van zo'n 4 KB. Die kosten zijn onvermijdelijk, want het systeem heeft meer tekens nodig om dezelfde bytes weer te geven.
Base64 gebruiken in HTML
Om een Base64-afbeelding rechtstreeks in HTML te tonen, zet je de data URI in het src-attribuut van de <img>-tag:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Icoon">De browser behandelt dat element precies als een gewone afbeelding. Je kunt er CSS op toepassen, breedte en hoogte instellen en het overal gebruiken waar een <img> is toegestaan.
Base64 gebruiken in CSS
In CSS gebruik je de data URI vooral bij achtergrondafbeeldingen:
.icoon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucy...");
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}Die aanpak zie je vooral bij kleine SVG-iconen die je via CSS van kleur wilt wisselen, of bij achtergrondafbeeldingen in herbruikbare componenten uit een bibliotheek.
💡 Tip voor SVG: een SVG kun je als Base64 insluiten of als inline SVG rechtstreeks in je HTML zetten — zonder codering. Inline SVG is leesbaarder en makkelijker aan te sturen met CSS en JavaScript; Base64 heeft de voorkeur zodra de SVG in een extern CSS-bestand staat.
Wanneer je Base64 gebruikt — en wanneer niet
De keuze tussen Base64 en een extern bestand hangt vooral af van de bestandsgrootte en de situatie. De tabel hieronder vat de meest voorkomende gevallen samen:
| Situatie | Advies | Waarom |
|---|---|---|
| Kleine iconen en sprites (< 2 KB) | ✅ Base64 is prima | Scheelt een HTTP-verzoek zonder merkbaar extra gewicht |
| Favicons in je CSS | ✅ Base64 is prima | Handig en zonder afhankelijkheid van een extern bestand |
| Placeholders en laadskeletten | ✅ Base64 is prima | Laadt direct mee met de HTML, zonder zichtbaar knipperen |
| HTML-e-mails | ✅ Base64 is prima | Veel e-mailclients blokkeren externe afbeeldingen |
| Inhoudelijke beelden (foto's, banners) | ❌ Liever niet | Maakt je HTML zwaarder en blokkeert de browsercache |
| Afbeeldingen boven 5 KB | ❌ Liever niet | De extra 33% aan bytes gaat ten koste van de laadtijd |
| Beeld dat op meerdere pagina's terugkomt | ❌ Liever niet | Een extern bestand wordt gecachet; Base64 wordt elke pagina opnieuw gedownload |
Voordelen van Base64 voor afbeeldingen
Op de juiste plek levert Base64 echte voordelen op:
- Geen extra HTTP-verzoek — de afbeelding zit in je HTML of CSS zelf, wat de vertraging wegneemt bij kritieke beelden boven de vouw.
- Werkt offline en in e-mail — omdat er geen externe server nodig is, verschijnt de afbeelding ook zonder verbinding (in offline apps) of in e-mailclients die externe inhoud blokkeren.
- Volledig zelfstandig — één HTML-bestand met Base64-afbeeldingen kun je versturen of archiveren zonder dat er beeld verloren gaat.
- Alles in één keer — de afbeelding verschijnt precies wanneer het HTML-element wordt getekend, zonder extra vertraging. Ideaal om verspringende interface-iconen te voorkomen.
Nadelen en beperkingen
Base64 heeft ook kosten die je goed moet afwegen:
- 33% meer data — de omzetting naar tekst vergroot altijd het aantal verzonden bytes. Bij grote afbeeldingen zijn dat kilobytes extra zonder enig voordeel.
- Geen browsercache — externe afbeeldingsbestanden worden door de browser bewaard en op andere pagina's hergebruikt. Base64 in je HTML wordt elk bezoek opnieuw gedownload, want het zit vast aan het document.
- Lastiger onderhoud — een afbeelding vervangen betekent het bestand opnieuw converteren en een nieuwe lange reeks in je HTML of CSS plakken: bewerkelijk en foutgevoelig.
- Onleesbare code — lange Base64-reeksen in je CSS of HTML maken het bestand moeilijk te lezen en na te kijken.
- Comprimeert slecht met gzip — gzip en Brotli werken goed op repetitieve tekst, maar Base64-reeksen hebben een hoge entropie en winnen er weinig mee, anders dan een binair afbeeldingsbestand.
⚠️ Vuistregel: gebruik Base64 alleen onder de 2 KB. Voor al het andere is een geoptimaliseerd extern bestand — het liefst in WebP of AVIF — beter voor de snelheid van je site.
Base64 en de snelheid van je site (PageSpeed)
Wat Base64 met je snelheid doet, hangt volledig af van wat je codeert. Bij kleine iconen scheelt het een HTTP-verzoek, wat de gevoelde Time to First Byte verbetert en het aantal gelijktijdige verbindingen beperkt. Dat kan gunstig uitpakken voor je Core Web Vitals, en zeker voor de LCP (Largest Contentful Paint) als het belangrijkste element op de pagina een ingesloten icoon is.
Grote afbeeldingen in Base64 maken je HTML-document daarentegen meteen zwaarder, waardoor de pagina later begint te tekenen. Google PageSpeed Insights rekent overmatig zware HTML doorgaans af. Voor foto's en banners is een geoptimaliseerd extern bestand altijd de juiste route.
Wil je je beeld voor het web optimaliseren, begin dan met comprimeren en omzetten naar het efficiëntste formaat. De Afbeeldingscompressor van ImageTools doet dat rechtstreeks in je browser, zonder je bestanden naar een server te sturen.
Zo zet je een afbeelding om naar Base64
Er zijn verschillende manieren om een Base64-reeks uit een afbeelding te halen:
- Online tools — het snelst voor incidenteel gebruik. ImageTools heeft de tool Afbeelding naar Base64, die elke afbeelding in je browser omzet en de code kant-en-klaar teruggeeft.
- Terminal (Linux/macOS) — het commando
base64 afbeelding.pnggeeft de gecodeerde reeks. Voor de volledige data URI:echo "data:image/png;base64,$(base64 -w 0 afbeelding.png)". - JavaScript in de browser — met de
FileReader-API zet je elk door de gebruiker gekozen bestand asynchroon om naar Base64. - Webpack en andere bundlers — tools als Webpack, Vite en Rollup hebben plug-ins die kleine bestanden tijdens de build automatisch inline als Base64 opnemen, tot een instelbare grens.
Zet je afbeelding nu om naar Base64
Upload je afbeelding en krijg de volledige data URI terug, klaar voor je HTML of CSS. Alles wordt in je browser verwerkt.
Base64-tool openen →Veelgestelde vragen
Wat is Base64 bij afbeeldingen?
Base64 is een manier om binaire data (zoals afbeeldingen) te coderen als ASCII-tekst. In plaats van het afbeeldingsbestand apart te laden, wordt de inhoud omgezet in een lange reeks tekens die je rechtstreeks in je HTML of CSS zet: een data URI.
Maakt Base64 mijn site langzamer?
Dat hangt af van het gebruik. Bij kleine afbeeldingen (iconen, favicons, placeholders) kan Base64 juist sneller zijn, omdat er een HTTP-verzoek wegvalt. Bij grote afbeeldingen maakt het je pagina zwaarder en blokkeert het de browsercache, waardoor alles trager wordt.
Tot welke bestandsgrootte is Base64 verstandig?
De vuistregel is: alleen Base64 gebruiken onder de 2 KB. Daarboven wegen de extra bytes van de codering (ongeveer 33% meer) en het verlies van caching zwaarder, en is een extern bestand efficiënter.
Werkt Base64 in alle browsers?
Ja. Data URI's met Base64 worden ondersteund door alle moderne browsers, waaronder Chrome, Firefox, Safari, Edge en hun mobiele varianten. Heel oude browsers als IE6 kunnen er niet mee overweg, maar daar hoef je in de praktijk geen rekening meer mee te houden.
Hoe zet je online een afbeelding om naar Base64?
Gebruik de tool Afbeelding naar Base64 van ImageTools. Je uploadt je afbeelding en de tool genereert automatisch de Base64-string en de complete data URI, klaar om in je HTML of CSS te plakken.