Afbeelding naar Base64
Codeer een afbeelding als Base64-data-URI voor CSS of HTML.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
- Bestandsgrootte
- —
- Gecodeerde grootte
- —
Grote afbeelding: zo’n grote data-URI maakt je pagina zwaar. Boven enkele tientallen KB is een gewoon bestand beter.
Lokaal verwerkt: je afbeelding verlaat het apparaat niet.
Codeer een afbeelding naar Base64 in twee seconden
Met een data-URI sluit je een afbeelding direct in je code in, zonder extern bestand. Sleep je afbeelding, kies het uitvoerformaat — ruwe data-URI, CSS-eigenschap of HTML-tag — en kopieer het resultaat.
-
Sleep je afbeelding
PNG, JPG, WebP, GIF, SVG… elk afbeeldingsformaat wordt geaccepteerd en ongewijzigd gehouden: geen hercodering, geen verlies.
-
Kies de uitvoer
Ruwe data-URI, kant-en-klare CSS background-image, of een complete HTML <img>-tag.
-
Kopieer
Eén klik op Kopiëren en de code staat op je klembord, met de groottes voor/na in beeld.
Wanneer Base64 gebruiken (en vermijden)
| Situatie | Data-URI? | Waarom |
|---|---|---|
| Icoon of logo < 10 KB | Ja | Bespaart een HTTP-verzoek, directe weergave |
| HTML-e-mail | Ja | Externe afbeeldingen worden vaak standaard geblokkeerd |
| Foto of banner > 100 KB | Nee | +33 % gewicht, geen aparte caching, trager renderen |
| Afbeelding herhaald op meerdere pagina’s | Nee | Een gewoon bestand wordt één keer gecachet |
Tip: voor vectoriconen is inline SVG (direct in de HTML geplakt) vaak lichter en scherper dan de Base64-versie.
Veelgestelde vragen
Wat is een data-URI?
Een URL die de bestandsdata direct bevat, in de vorm data:image/png;base64,iVBOR… Bruikbaar overal waar een afbeeldings-URL wordt verwacht: src-attribuut, CSS background-image, favicon…
Waarom een afbeelding als Base64 coderen?
Om de afbeelding direct in HTML, CSS of JSON in te sluiten, zonder apart bestand of extra HTTP-verzoek. Handig voor kleine iconen, HTML-e-mails of zelfstandige prototypes.
Maakt Base64 het bestand groter?
Ja, ongeveer 33 % groter dan het originele binaire bestand. Dat is de prijs van tekstweergave. Gzip/brotli-compressie van de server haalt een deel terug, maar voor grote afbeeldingen blijft een gewoon bestand efficiënter.
Tot welke grootte is het een goed idee?
Vuistregel: gebruik data-URI’s alleen voor afbeeldingen onder enkele tientallen KB (iconen, logo’s, kleine patronen). Daarboven blazen ze je pagina’s op, blokkeren ze aparte caching en vertragen ze het renderen.
Wordt mijn afbeelding ergens naartoe gestuurd?
Nee. Het lezen en coderen gebeurt door de FileReader-API van je browser. De afbeelding verlaat je apparaat nooit.