Afbeelding naar Base64-converter
Een Base64-data-URL combineert het mediatype en de gecodeerde bytes van een afbeelding in één tekstwaarde, zoals data:image/png;base64,.... Kies een afbeelding tot 20 MiB en de converter maakt die waarde lokaal in uw browser. Vóór het kopiëren ziet u de oorspronkelijke bestandsgegevens en de geschatte lengte van de gemaakte data-URL.
Hoe je een afbeelding base64-encodeert
-
1
Kies een afbeelding
Selecteer één afbeeldingsbestand van maximaal 20 MiB.
-
2
Codeer lokaal
De browser leest het bestand en maakt zonder upload een volledige Base64-data-URL.
-
3
Controleer het resultaat
Bekijk het mediatype, de bestandsgegevens en de geschatte lengte van de gemaakte data-URL.
-
4
Kopieer de data-URL
Kopieer de volledige waarde `data:image/...;base64,...` naar het klembord.
Wanneer je moet inlijnen en wanneer je moet koppelen
Base64-inbedding bespaart een HTTP-verzoek ten koste van een toename van de bestandsgrootte met 33%, de moeite waard voor sommige bestanden, verspilling voor andere.
Grootteberekening
| Oorspronkelijke grootte | Base64-grootte | Extra bytes |
|---|---|---|
| 1 KB | 1.36 KB | 360 B |
| 10 KB | 13.6 KB | 3.6 KB |
| 100 KB | 136 KB | 36 KB |
| 1 MB | 1.36 MB | 360 KB |
Beslissingsgids
| Gebruiksscenario | Inline of extern |
|---|---|
| Icoon onder 2 KB (SVG-logo of sprite) | Inline |
Cursorafbeelding in CSS (cursor: url()) |
Inline |
| Kleine zelfstandige HTML- of CSS-demo | Inline |
| Icoon opgenomen in een JavaScript-payload | Inline |
| Hero-afbeelding, groter dan 50 KB | Extern |
| Alles wat apart kan worden gecachet | Extern |
Formaat van een gegevens-URI
data:[<mediatype>][;base64],<data>
Voorbeelden:
data:image/png;base64,iVBORw0KGgo..., PNGdata:image/svg+xml;utf8,<svg>...</svg>, SVG; vaak beter inline weergegeven zonder Base64data:image/jpeg;base64,/9j/4AAQS..., JPG
Tips
- SVG is vaak beter als
url()met de coderingutf8in plaats van Base64; korter en leesbaarder. - Codering controleert of zuivert de afbeelding niet. Sluit alleen vertrouwde bestanden in, vooral SVG, dat actieve of externe inhoud kan bevatten.
- Grote afbeeldingen binnen JSON-payloads kunnen het verwerken belemmeren als ze zeer groot zijn; overweeg gebruik van multipart of externe referenties.
- Een CSS-background-image met base64 wordt netjes inline weergegeven, maar belemmert het cachen tussen pagina's.
Veelgestelde vragen
Base64 codeert drie bytes invoer als vier karakters; de uitvoer is daarom altijd ongeveer 33% groter dan de invoer. Een afbeelding van 10 KB levert een string van circa 13.600 karakters op. Langere strings zijn gebruikelijk.
De converter accepteert één afbeelding tot 20 MiB. Dat is een verwerkingslimiet, geen advies voor inbedding. Houd data-URL’s bij voorkeur klein, want Base64 voegt ongeveer een derde toe en verhindert afzonderlijke caching.
Nee, de Base64-encoding wordt uitgevoerd in uw browser. Het beeld verlaat uw apparaat nooit.
Niet in deze encoder. Gebruik de aparte tool Base64 naar afbeelding om een data-URL of ruwe Base64-string weer als afbeeldingsbestand te downloaden.
Gerelateerde tools
PNG naar SVG vectoriseren
Trek PNG-rasterafbeeldingen in de browser over als SVG-paden. Ideaal voor logo’s, iconen en lijntekeningen. Regel drempelwaarde, aantal kleuren en afvlakking.
WebP naar PNG
Converteer WebP-afbeeldingen naar PNG met behoud van transparantie en pixelnauwkeurige kwaliteit voor bewerken, afdrukken en oudere ontwerptools.
GIF-maker
Zet een reeks afbeeldingen of een korte video om in een geanimeerde GIF. Stel beeldsnelheid, herhalingen en afmetingen in voor het exporteren.
Foto-editor
Browsergebaseerde foto-editor met bijsnijden, draaien, helderheid, contrast, verzadiging, filters, tekstoverlay en export naar JPG, PNG of WebP.
QR-codegenerator
Maak in uw browser een QR-code van tekst of een URL en download deze als PNG.
Barcodegenerator
Maak in de browser een 1D-barcode in Code 128, EAN, UPC, ITF-14 en andere ondersteunde formaten en download deze als SVG of PNG.