Hoe zet ik een afbeelding om naar een Base64 data-URI voor CSS?

Sleep of plak een afbeelding (Ctrl+V), open dan het tabblad CSS en klik op Kopiëren. Je krijgt een background-image: url(...)-regel met de data-URI erin. De tabbladen HTML, Markdown, Raw Base64 en JSON werken op dezelfde manier.

Waarom is de Base64-uitvoer ongeveer een derde groter dan mijn afbeelding?

Base64 zet elke 3 bytes om in 4 tekens, dus de tekst is ongeveer 33% groter dan het bestand. Daarom zijn data-URI's geschikt voor kleine pictogrammen en logo's, niet voor grote foto's.

Hoe kan ik de Base64-tekenreeks korter maken?

Open eerst Verkleinen en stel een Maximale breedte of een Formaat (WebP, JPEG of PNG) in, en verlaag de Kwaliteit voor WebP of JPEG. SVG- en GIF-bestanden kunnen op deze manier niet worden verkleind; SVG krijgt in plaats daarvan een tabblad SVG (URL-gecodeerd).

Kan ik een Base64-tekenreeks weer omzetten in een afbeelding?

Ja. Zet Richting op Base64 naar afbeelding en plak een data-URI of kale Base64. Het herkent PNG, JPEG, GIF, WebP, SVG, BMP, ICO en AVIF en biedt daarna een download aan. Ongeldige invoer toont een foutmelding.

Waarom mislukt Kopiëren of lijkt het voorbeeld afgekapt bij een grote afbeelding?

Het voorbeeld toont alleen de eerste 2000 tekens, maar Kopiëren en Downloaden geven de volledige waarde. Zeer grote tekenreeksen kunnen de limiet van het klembord van de browser overschrijden, dus gebruik Downloaden of verklein de afbeelding eerst.

Ja. Elke tool is gratis te gebruiken, zonder account en zonder creditcard. Het werk gebeurt op jouw apparaat in plaats van op onze servers, en daarom is het gratis te gebruiken.

Worden mijn bestanden geüpload?

Nee. Je bestanden worden in je browser geopend en verwerkt en niet naar LibraTool gestuurd. Sommige tools downloaden eerst een verwerkingsengine of AI-model naar je browser; die download bevat geen gegevens van jou.

Ja. Het werkt in actuele mobiele browsers op iOS en Android, zonder iets te installeren. Zeer grote bestanden kunnen traag zijn of het geheugen van een telefoon overschrijden; gebruik daarvoor een computer.

🖼️

Gratis Afbeelding naar Base64

Converteer een afbeelding naar een Base64-data-URI voor inline gebruik in CSS, HTML of Markdown. Kopieer kant-en-klare fragmenten. Gecodeerd in je browser; nooit geüpload.

Bestandsgrootte hangt af van je apparaatBestanden blijven privéGeen aanmelding vereistVoor altijd gratis

Werkt offline na het laden

Sleep een bestand hierheen of klik om te bladeren

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · verwerkt op je apparaat

of druk op Ctrl+V om vanaf het klembord te plakken

Bestanden bladeren

Tip: u kunt ook een afbeelding plakken uit uw klembord (Ctrl+V).

Jouw bestanden verlaten nooit je apparaat. Alle verwerking vindt lokaal in je browser plaats.

Converteer een afbeelding naar een Base64 data URI die u direct in CSS, HTML of Markdown kunt plakken — geen apart bestand nodig. Codering vindt in de browser plaats; nooit geüpload.

Veelvoorkomend gebruik

Afbeelding in CSS InsluitenSluit een klein pictogram of achtergrond in als data-URI in uw stylesheet.
Afbeelding in HTML InsluitenSluit een logo of pictogram rechtstreeks in zelfstandige HTML in.
SVG of Pictogram naar Base64 ConverterenZet een klein pictogram om naar data-URI voor insluiting.
Afbeelding in Markdown InsluitenSluit een kleine afbeelding in een Markdown-bestand in met data-URI.
Image Data URI OphalenProduceer een ruwe data: URI die u overal kunt gebruiken.

Hoe het werkt

Een data-URI sluit een afbeelding rechtstreeks in je code in als tekst, zodat deze zonder afzonderlijke bestandsaanvraag wordt geladen — handig voor kleine pictogrammen en zelfstandige HTML. Dit codeert het in je browser.

1
Je plaatst een afbeelding neer
Deze wordt lokaal gelezen met de FileReader-API — nooit geupload.
2
Het is Base64-gecodeerd
De afbeeldingsbytes worden een data:-URI (data:image/...;base64,…) rechtstreeks in je browser.
3
Je kiest een fragment
Kopieer de ruwe data-URI, of kant-en-klare CSS (background-image), HTML (<img>) of Markdown.
4
Plak het in je code
De afbeelding reist nu inline met je CSS/HTML — geen extra bestand om te hosten.

De afbeelding wordt volledig op je apparaat gecodeerd. Houd er rekening mee dat Base64 ongeveer 33% groter is dan het origineel, dus data-URI's zijn best voor kleine afbeeldingen.

Gerelateerde tools

🖼️

Afbeeldingssteganografie (tekst verbergen in afbeelding)

Verberg een geheime tekstboodschap in een PNG via least-significant-bit-steganografie, met optionele AES-256-GCM-wachtwoordversleuteling. Extraheer het later met hetzelfde hulpmiddel. Alles draait in je browser.

Probeer hetBestanden blijven lokaal

🔢

Base64-encoder en -decoder

Codeer tekst of bestanden naar Base64, of decodeer Base64-tekenreeksen terug naar platte tekst. Direct, privé en gratis.

Probeer het

🔗

URL-encoder en -decoder

URL's en query-strings coderen en decoderen. Ondersteunt encodeURIComponent, decodeURIComponent en query-stringanalyse.