Afbeelding naar Base64
Converteer afbeeldingen naar Base64-gecodeerde tekenreeksen
Invoerafbeelding
Selecteer of sleep een afbeelding
Afbeeldingsbestanden tot 10 MiB. JPG, PNG, GIF, WebP, SVG en andere afbeeldingsformaten.
Bestandsgegevens
- Naam
- —
- Grootte
- 0 B
- MIME-type
- —
- Afmetingen
- —
Over Base64-codering
- Sluit afbeeldingen rechtstreeks in HTML, CSS of JSON in zonder externe bestanden
- Handig voor e-mailsjablonen, data-URI's en API-responses
- Base64-codering vergroot de bestandsgrootte met ongeveer 33%
- Het meest geschikt voor kleine afbeeldingen zoals pictogrammen, logo's of miniaturen
Base64-resultaat
Upload een afbeelding om het Base64-resultaat te zien.
0 tekens
Upload een afbeelding om het Base64-resultaat te zien.
Gebruiksvoorbeelden
De voorbeelden zijn ingekort voor weergave. De kopieerknoppen kopiëren de volledige HTML of CSS.
Over de Afbeelding-naar-Base64-converter
Onze gratis afbeelding-naar-Base64-converter zet afbeeldingsbestanden om in Base64-gecodeerde tekenreeksen die u rechtstreeks kunt insluiten in HTML, CSS, JavaScript of JSON. Upload of sleep gewoon een afbeelding en de tool genereert direct een complete data-URI die klaar is voor gebruik in uw code.
Base64-codering zet binaire afbeeldingsgegevens om in een tekstformaat met een alfabet van 64 tekens. Zo kunt u afbeeldingen inline in tekstgebaseerde documenten opnemen en zijn aparte afbeeldingsverzoeken niet nodig. Base64 vergroot de gegevens met ongeveer 33%, maar bij kleine afbeeldingen zoals pictogrammen, logo's en miniaturen loont dat, omdat minder HTTP-verzoeken de laadtijd van de pagina verbeteren.
De converter verwerkt uw afbeeldingen volledig in de browser met de FileReader API. Er worden nooit afbeeldingsgegevens naar een server geüpload, dus u kunt zonder zorgen eigen graphics, vertrouwelijke screenshots of andere gevoelige beelden coderen. De tool ondersteunt alle gangbare afbeeldingsformaten tot 10MB.
Belangrijkste functies
- Ondersteuning voor JPG, PNG, GIF, WebP, SVG en andere afbeeldingsformaten
- Bestanden selecteren door te slepen of te klikken om te uploaden
- Directe conversie aan de clientzijde, zonder uploads naar een server
- Live afbeeldingsvoorbeeld naast de Base64-uitvoer
- Complete data-URI als uitvoer, inclusief MIME-type-header
- Met één klik de volledige Base64-tekenreeks naar het klembord kopiëren
- De Base64-tekenreeks downloaden als tekstbestand
- Weergave van bestandsinformatie (naam, grootte, type)
- Direct bruikbare HTML- en CSS-codefragmenten
- Maximale bestandsgrootte van 10MB met formaatvalidatie
De Afbeelding-naar-Base64-converter gebruiken
- Upload uw afbeelding: Klik op het uploadgebied of sleep een afbeeldingsbestand erheen. Ondersteunde formaten zijn onder meer JPG, PNG, GIF en WebP tot 10MB.
- Bekijk het voorbeeld: De tool toont een voorbeeld van uw geüploade afbeelding samen met bestandsinformatie (naam, grootte en type).
- Kopieer de Base64-tekenreeks: Klik op de knop Kopiëren om de complete data-URI naar het klembord te kopiëren, klaar om in uw code te plakken.
- Download als tekst: Klik op de knop Downloaden om de Base64-tekenreeks als tekstbestand op te slaan voor later gebruik.
- Gebruik de codefragmenten: Gebruik de HTML- en CSS-voorbeelden onder de uitvoer om de gecodeerde afbeelding in uw project te verwerken.
- Wissen en een nieuwe converteren: Klik op de X-knop op de bestandskaart om de huidige afbeelding te verwijderen en een nieuwe conversie te starten.
Toepassingen
- Pictogrammen insluiten in HTML: Zet kleine pictogrammen en logo's om naar Base64 en neem ze rechtstreeks op in uw HTML met img-tags en data-URI's, zodat extra HTTP-verzoeken wegvallen.
- CSS-achtergrondafbeeldingen: Codeer decoratieve afbeeldingen en gebruik ze als inline CSS-waarden voor background-image, zodat u minder afhankelijk bent van externe bestanden.
- Ontwerp van e-mailtemplates: Sluit afbeeldingen rechtstreeks in HTML-e-mailtemplates in, zodat ze zichtbaar blijven ook als e-mailclients externe afbeeldingen blokkeren.
- API's en JSON-payloads: Neem afbeeldingsgegevens op in JSON-API-antwoorden of -verzoeken wanneer er geen uploadendpoints beschikbaar zijn.
- Applicaties in één bestand: Maak zelfstandige HTML-bestanden met alle afbeeldingen als Base64 ingesloten, ideaal voor documentatie, rapporten of offline tools.
- Configuratiebestanden: Codeer kleine afbeeldingen voor gebruik in configuratiebestanden, omgevingsvariabelen of infrastructure-as-code-templates.
- Progressive Web Apps: Cache kritieke afbeeldingen als Base64-tekenreeksen in service workers of lokale opslag voor direct offline weergeven.
Veelgestelde vragen
Wat is Base64-codering voor afbeeldingen?
Base64-codering zet binaire afbeeldingsgegevens om in een ASCII-tekenreeks. Het resultaat kunt u gebruiken als data-URI in HTML-img-tags en CSS-achtergrondeigenschappen, of opnemen in JSON-payloads, zodat afbeeldingen als platte tekst kunnen worden verzonden en opgeslagen.
Maakt Base64-codering het bestand groter?
Ja, Base64-codering vergroot de gegevens met ongeveer 33%, omdat er 4 tekstkarakters nodig zijn voor elke 3 bytes binaire gegevens. Daarom wordt Base64-insluiting vooral aanbevolen voor kleine afbeeldingen zoals pictogrammen en logo's.
Wanneer gebruik ik Base64-afbeeldingen in plaats van gewone afbeeldingsbestanden?
Gebruik Base64 voor kleine afbeeldingen (onder 10-20KB) waarbij minder HTTP-verzoeken voordeel oplevert, voor e-mailtemplates waarin externe afbeeldingen kunnen worden geblokkeerd, of wanneer u zelfstandige HTML-documenten nodig hebt. Voor grotere afbeeldingen zijn gewone bestandsverwijzingen efficiënter.
Is deze tool gratis?
Ja, deze afbeelding-naar-Base64-converter is volledig gratis. Er zijn geen limieten op conversies, geen registratie nodig en er worden geen watermerken of beperkingen op uw uitvoer toegepast.
Zijn mijn gegevens veilig?
Ja. Uw afbeeldingen worden volledig in uw browser verwerkt met de JavaScript FileReader API. Er worden nooit afbeeldingsgegevens naar een server geüpload of daar opgeslagen, dus deze tool is volledig veilig voor gevoelige of eigen afbeeldingen.
Wat is de maximale bestandsgrootte?
Deze tool ondersteunt afbeeldingen tot 10MB. In de praktijk is Base64-codering het nuttigst voor afbeeldingen onder 20KB. Grotere afbeeldingen kunt u beter als gewone bestanden aanbieden, zodat uw HTML of CSS niet opzwelt.
Tips & best practices
- Optimaliseer afbeeldingen eerst: Comprimeer en verklein uw afbeeldingen voordat u ze naar Base64 converteert. Kleinere bronbestanden geven kortere, efficiëntere Base64-tekenreeksen.
- Gebruik het alleen voor kleine afbeeldingen: Base64 past het best bij pictogrammen, logo's en miniaturen onder 10-20KB. Bij grotere afbeeldingen presteren externe bestandsverwijzingen beter.
- Kopieer de volledige data-URI: De uitvoer bevat het complete voorvoegsel data:image/[format];base64, zodat u het zonder aanpassing direct in HTML of CSS kunt plakken.
- Bekijk de codefragmenten: Gebruik de meegeleverde HTML- en CSS-voorbeelden als sjablonen om de Base64-afbeelding in uw project te verwerken.
- Denk aan caching: Base64-afbeeldingen in HTML of CSS worden samen met het document gecachet, terwijl externe afbeeldingen los van elkaar gecachet kunnen worden. Kies de aanpak die het best bij uw cachingstrategie past.
- Download als back-up: Gebruik de knop Downloaden om het Base64-tekstbestand als back-up op te slaan, vooral voor afbeeldingen die in meerdere projecten worden gebruikt.