Click to upload or drag & drop an image
PNG, JPG, WebP, GIF, SVG · processed locally
What is a Base64 data URI?
A data URI embeds a file's contents directly inside a URL-like string — data:image/png;base64,iVBORw0KG... — instead of pointing to a separate file. Browsers, CSS, and HTML all understand this format natively, so you can use it anywhere a normal image URL would go.
When to use this instead of an image file
Embedding small icons or logos as Base64 avoids an extra network request, which helps for tiny, frequently-reused assets like a favicon or a CSS background sprite. It's a poor fit for large images: Base64 encoding inflates file size by about 33%, and embedded images can't be cached separately by the browser.
Frequently asked questions
How do I use this in CSS?
Paste the full data URI as the value of a url() function: background-image: url("data:image/png;base64,..."). Copy the full data URI (not the raw Base64) for this.
How do I use this in HTML?
Set it as the src attribute of an <img> tag: <img src="data:image/png;base64,...">.
Is my image uploaded when I use this tool?
No. Conversion happens instantly in your browser using the built-in FileReader API — nothing is sent to a server.