Afbeelding naar Base64 converteren
Zet een afbeelding om in een Base64-string die je in code kunt plakken.
Base64-tekst is ongeveer 37% groter dan het originele bestand. Dat is prima voor kleine iconen, niet voor volledige foto's.
Draait in je browser. Je bestanden verlaten nooit je apparaat.
- Data-URL, CSS- en HTML-output
- Werkt met elk afbeeldingstype
- Niets wordt geüpload
Zo zet je een afbeelding om naar Base64
- Sleep een afbeelding hierheen, of tik op Bestanden kiezen.
- Kopieer de data-URL, ruwe Base64, of een kant-en-klare CSS- of HTML-snippet.
- Plak het in je code.
Hoe het coderen werkt
Base64 zet elke 3 bytes van de afbeelding om in 4 tekens tekst, met de 64 tekens A tot Z, a tot z, 0 tot 9, plus en schuine streep: het standaardalfabet uit RFC 4648.
Een data-URL is die tekst met een kort voorvoegsel, zoals data:image/png;base64, zodat een browser of app meteen weet waar hij naar kijkt, zonder apart bestand.
| Origineel bestand | Base64-tekst (ongeveer 37% groter) |
|---|---|
| 5 KB icoon | Ongeveer 6,9 KB |
| 20 KB logo | Ongeveer 27 KB |
| 100 KB foto | Ongeveer 137 KB |
Die overhead is waarom data-URL's het beste werken voor kleine graphics, niet voor volledige foto's.
Waar data-URL's worden gebruikt
- CSS, binnen background-image, zodat een klein icoon met het stylesheet meeladet in plaats van via een apart verzoek.
- HTML, binnen een img src-attribuut of inline SVG-markup.
- JSON API-responses en databasevelden die een afbeelding als tekst opslaan.
- HTML in e-mails, omdat sommige e-mailclients gekoppelde afbeeldingen blokkeren maar inline data wel toestaan.
Wanneer je beter een normaal bestand gebruikt
Data-URL's worden niet apart gecachet van de pagina die ze bevat, dus een foto die op tien pagina's wordt gebruikt, wordt tien keer gedownload in plaats van één keer. Voor alles groter dan een klein icoon laadt een normaal afbeeldingsbestand met browsercaching sneller.
Veelgestelde vragen over Afbeelding naar Base64
Wat is een Base64 data-URL?
Het zijn de bytes van een afbeelding, uitgeschreven als tekst, zodat je een afbeelding rechtstreeks in HTML, CSS of JSON kunt plakken zonder apart bestand.
Wordt het bestand groter door Base64?
Ja, ongeveer 37 procent, omdat encoderen elke 3 bytes van de afbeelding omzet in 4 tekens tekst.
Wanneer gebruik ik een data-URL in plaats van een bestand?
Voor kleine iconen en eenvoudige graphics, waarbij het besparen van een netwerkverzoek belangrijker is dan paginagrootte. Gebruik voor foto's gewoon een normaal afbeeldingsbestand.
Wordt mijn afbeelding ergens geüpload?
Nee. Het coderen gebeurt in je browser, dus de afbeelding verlaat nooit je apparaat.
Verandert de kwaliteit door om te zetten naar Base64?
Nee. De pixeldata wordt niet aangeraakt, alleen herschreven als tekst, dus decoderen geeft je precies de originele bytes terug.
Is er een maximale grootte voor een data-URL?
Browsers hanteren geen harde limiet, maar een lange data-URL kan niet apart gecachet worden en vertraagt het parsen, dus houd ze klein: voor iconen en graphics.
Ondersteunt elke browser data-URL's?
Ja. Data-URL's werken al sinds Internet Explorer 8 in elke grote browser, inclusief alle huidige mobiele browsers.
Kan ik dit gebruiken voor een favicon?
Een kleine favicon kan als data-URL inline in de HTML head staan, al is een normaal favicon.ico-bestand plus de PNG-formaten nog steeds de gangbaarste opzet.