Base64
Image Data URL
⚠️ Large image may freez the browser
Encode PNG naar Base64 voor CSS
Converteer PNG-afbeeldingen naar Base64 of DataURL formaten. Embed direct in CSS of JavaScript zonder externe bestanden. Grotere bestanden kunnen de prestaties beïnvloeden; kleinere formaten worden aangeraden. Base64-codering vereenvoudigt de integratie met webassets, waardoor de afhankelijkheid van externe bronnen wordt verminderd. DataURL-formaat vereenvoudigt de code structuur voor dynamische contentlevering.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Converteer Beelden naar Base64 Code
1
PNG-afbeelding uploaden
Upload uw PNG-afbeelding door erop te klikken of deze naar het uploadgebied te slepen.
2
Kies een coderingformaat
Select of de 'Base64' of 'DataURL' tab om uw gewenste coderingformaat te kiezen.
3
Bekijk Base64 Data
De Base64 of DataURL-representatie van je afbeelding zal verschijnen in het tekstveld onder de tabbladen.
4
Kopieer gecodeerde tekst
Klik op de knop 'Kopiëren' om de gecodeerde tekst naar je klembord te kopiëren voor gebruik in je CSS of JavaScript.
Integreer PNG's direct in je CSS
Inclusief een kleine afbeelding direct in uw CSS zonder aparte bestanden te beheren, kan worden bereikt door PNG's om te zetten in Base64 of DataURL formaten. Het encode-png-to-base64-for-css hulpprogramma vereenvoudigt uw webontwikkelingsworkflow en vermindert HTTP verzoeken. Dit resulteert in schonere, efficiëntere code en snellere laadtijden.
Verklein Bestandgrootte en HTTP Verzoeken
Dit hulpmiddel vermindert het aantal bestanden dat uw website moet laden door PNG-afbeeldingen om te zetten in Base64 of DataURL-formaten. Het rechtstreeks in uw CSS of JavaScript opnemen van afbeeldingen vermindert HTTP-verzoeken, wat de laadsnelheid van de pagina kan verbeteren. Deze aanpak optimaliseert de websiteprestaties door externe bestandafhankelijkheden te minimaliseren.
Veelgestelde Vragen
Wat is een Base64 DataURL en waarom zou ik het gebruiken?
Een Base64 DataURL is een manier om een afbeelding als een reeks tekens te representeren. Het maakt het mogelijk om afbeeldingen direct in je CSS of JavaScript code te verwezenlijken, zonder dat je ze hoeft te laden vanuit externe bestanden. Dit kan handig zijn voor kleine iconen of afbeeldingen.
Hoe gebruik ik de gegenereerde Base64 of DataURL?
Kopieer gewoon de code die wordt geleverd nadat je je afbeelding hebt omgezet en plak deze in je CSS of JavaScript. Bijvoorbeeld, in CSS zou je het zo kunnen gebruiken: background-image: url('data:image/png;base64,...');
Welke beeldformaten ondersteunt deze tool?
Dit hulpmiddel is specifiek ontworpen voor PNG-afbeeldingen. Andere formaten converteren mogelijk niet correct.
Waarom worden grote afbeeldingen niet aangeraden?
Grote afbeeldingen creëren zeer lange Base64-strings, wat je computer kan vertragen en de laadtijden van pagina's kan verlengen. Het is het beste om dit hulpmiddel voor kleinere afbeeldingen te gebruiken.
Is er een limiet aan de grootte van het beeld dat ik kan uploaden?
Hoewel er geen strikte limiet is voor de bestandsgrootte, zal de prestatie verslechteren met grotere afbeeldingen. We raden aan kleinere PNG-bestanden te gebruiken voor de beste resultaten.