Afbeelding naar Base64
Maak van een afbeelding een Base64-code die je direct in HTML, CSS, JSON of een e-mailsjabloon kunt plakken.
of sleep het hierheen · tot 50 MB, gratis
Grotere bestanden? Met Pro zet je bestanden tot 500 MB omBoven de gratis limieten: je kunt de download vrijgeven vanaf € 1,99.
Bezig…
Je bestand is klaar
Gratis · Geen account · Geen watermerk · Je bestanden verlaten je apparaat niet
Afbeelding naar Base64 in 3 stappen
- Kies je afbeelding, of sleep die naar het vak.
- Kies de uitvoer: data-URI, alleen Base64, CSS of een HTML-tag.
- Klik op Omzetten naar Base64 en kopieer de code of download die als .txt-bestand.
Wanneer je een afbeelding als Base64 insluit
Base64 schrijft de bytes van een bestand als gewone tekst, zodat een afbeelding in een HTML-pagina, een stylesheet, JSON-gegevens of een e-mailhandtekening kan staan in plaats van een los bestand te zijn. Dat scheelt een verzoek bij kleine iconen en logo's, en het is de enige manier om een afbeelding te versturen via sommige API's en formuliervelden die alleen tekst accepteren.
De prijs is de grootte: Base64-tekst is ongeveer een derde groter dan de afbeelding en kan niet apart in de cache. Gebruik het voor afbeeldingen van een paar kilobyte en laat foto's gewone bestanden. Voor de kortste code comprimeer je de afbeelding eerst, of gebruik je SVG voor logo's en iconen, die ook op elk formaat scherp blijven.
Veelgestelde vragen
Hoe zet ik een afbeelding om naar Base64?
Kies hier een afbeelding, kies het uitvoerformaat en klik op Omzetten naar Base64. De code verschijnt in een vak met een knop Kopiëren, en je kunt hem ook als .txt-bestand downloaden. Het werkt met JPG-, PNG-, GIF-, WebP-, SVG-, AVIF-, BMP- en ICO-afbeeldingen.
Wat is een data-URI?
Een data-URI is de Base64-tekst met een kort voorvoegsel dat de browser vertelt welk bestandstype het is, zoals data:image/png;base64, gevolgd door de code. Je kunt hem overal gebruiken waar een URL naar een afbeelding wordt verwacht, bijvoorbeeld in de src van een img-tag of in CSS url().
Hoe gebruik ik Base64 in HTML of CSS?
Kies ‘HTML-<img>-tag’ voor een kant-en-klaar img-element, of ‘CSS background-image’ voor een regel die je in een stijlregel kunt plakken. Beide bevatten de volledige data-URI, dus de afbeelding verschijnt zonder los bestand.
Waarom is de Base64 groter dan de afbeelding?
Base64 gebruikt 4 teksttekens voor elke 3 bytes, dus de code is ongeveer 33 procent groter dan het bestand. Voor kleine iconen is dat geen probleem, maar bij foto's loopt het snel op. Comprimeer of verklein de afbeelding eerst als de code te lang is.
Wordt mijn afbeelding naar een server geüpload?
Nee. De afbeelding wordt in je browser op je eigen apparaat gelezen en gecodeerd, dus hij wordt nooit naar ons verstuurd en nergens opgeslagen. Zodra de pagina geladen is, blijft de tool werken, zelfs zonder internetverbinding.