Afbeelding naar Base64
Sleep een willekeurige afbeelding naar deze afbeelding-naar-Base64-converter en krijg een data-URI en plakklare fragmenten voor HTML, CSS en JavaScript. Inline afbeeldingen besparen HTTP-verzoeken voor kleine iconen en zijn onmisbaar voor HTML in één bestand, e-mailtemplates en offline apps.
Afbeelding naar Base64 online omzetten: zo werkt het
- Selecteer een afbeeldingsbestand of plak een afbeeldings-URL.
- Kies de uitvoer: data-URI,
<img>, CSS-achtergrond, favicon, JSON en meer. - Klik op Afbeelding naar Base64 coderen.
- Bekijk de afbeelding en kopieer de code.
Meer Afbeelding naar Base64-converters
Uitvoerformaten
Kies hoe het resultaat moet worden verpakt. De converter kan het volgende opleveren:
- txt: alleen de Base64-string, klaar om in code, een databaseveld of een API-verzoek te plakken.
- uri: een volledige
data:-URI die je in de adresbalk van een browser kunt plakken of overal kunt gebruiken waar een URL wordt geaccepteerd. - html img: een
<img>-tag met de data-URI insrc. - css background image: een CSS-regel met
background-image: url(data:...). - html favicon: een
<link rel="icon">-tag voor een inline favicon. - html hyperlink: een
<a>-link die het ingesloten bestand downloadt of opent. - html iframe: een
<iframe>die de inhoud inline weergeeft. - javascript image: JavaScript dat een
Image-object aanmaakt. - javascript popup: JavaScript dat de inhoud in een nieuw venster opent.
- json: een JSON-object met de bestandsnaam, het MIME-type en de gegevens.
- xml: een XML-element met de gegevens in een CDATA-sectie.
Wanneer maak je afbeeldingen inline als Base64?
Maak kleine afbeeldingen (onder ongeveer 5–10 KB) zoals iconen, logo's en placeholders inline om verzoeken te besparen. Doe dat niet met grote foto's: die maken HTML/CSS zwaarder, kunnen niet apart worden gecachet en vertragen de weergave. Lees meer in data-URI's uitgelegd.
Veelgestelde vragen
Hoe zet ik een afbeelding om naar Base64?
Kies je afbeelding, selecteer "Data-URI" of "<img>" als uitvoer en klik op "Afbeelding naar Base64 coderen". Kopieer het resultaat naar je HTML of CSS.
Welke afbeeldingsformaten worden ondersteund?
Elk formaat dat je browser kan lezen: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF en meer.
Hoe gebruik ik een Base64-afbeelding in HTML?
Zet de data-URI in het src-attribuut: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
Reacties (0)
Vragen, ideeën of een bug in “Afbeelding naar Base64”? Laat een reactie achter, beoordeel de tool of reageer op anderen.
Nog geen reacties. Deel als eerste je feedback!