Afbeelding naar Base64
Zet een afbeelding online om naar Base64, maak een data-URI voor HTML, CSS of JSON en kopieer de gecodeerde string zonder uploaden.
Concept
Zet afbeeldingen om naar Base64 voor HTML, CSS, e-mail en JSON
Image-to-Base64 zet een afbeeldingsbestand om naar een data-URI zodat je het inline kunt gebruiken zonder apart bestand te hosten.
De afbeelding wordt in de browser gecodeerd naar een Base64-string die direct bruikbaar is in img/CSS, e-mail-HTML, API-test-JSON of voorbeelddata.
Dit is vooral handig voor kleine assets zoals iconen, ingesloten e-mailafbeeldingen en lichte testdata.
Typische toepassingen
Gebruik het voor e-mailhandtekeningen, README-afbeeldingen, mockdata voor API-responses of frontendtests zonder externe afbeeldingslink.
Eerst controleren
Controleer het MIME-type in de data-URI (bijvoorbeeld image/png) en vergelijk de gecodeerde grootte met het bronbestand.
Prestatiepunten
Base64 is vaak langer dan het originele bestand en kan cache-efficiëntie, bundlegrootte en rendertijd verslechteren.
Gebruik gelinkte bestanden voor grote of vaak wijzigende afbeeldingen; gebruik Base64 vooral voor compacte assets en tijdelijke testdata.
Afbeelding naar Base64 Afbeelding naar Base64 werkruimte
Hoe te gebruiken
- 1 Sleep een afbeelding naar binnen of klik om te uploaden.
- 2 Controleer de preview en bestandsdetails en bekijk daarna de Base64-uitvoer.
- 3 Kopieer de geconverteerde string naar HTML, CSS, JSON of een ander doel.
Veelgebruikte toepassingen
- Afbeelding naar Base64 data-URI maken voor HTML
- PNG of JPG naar Base64 omzetten voor kleine iconen
- Base64-string kopiëren voor code of tests
Veelgestelde vragen
Hoe voeg ik een afbeelding toe?
Selecteer een afbeeldingsbestand of sleep het naar het veld om een Base64 data-URL met preview te maken.
Kan ik het Base64-resultaat kopiëren?
Ja. Je kunt de Base64 data-URL uit het uitvoerveld naar je klembord kopiëren en gebruiken in HTML, CSS, JSON of tests.
Waar moet ik op letten bij grote afbeeldingen?
Base64-strings kunnen groter zijn dan het originele bestand, dus controleer de grootte voordat je grote afbeeldingen in pagina's of code insluit.