Image to Base64
Convert images to Base64 data: URIs in your browser. Drop a PNG, JPG, GIF, SVG, or WEBP — copy out as a raw Base64 string, full data URI, a CSS background-image rule, or an HTML <img> tag.
Image in, data URI out
A data URI carries the image bytes inline, so no extra HTTP request is needed. Best for small icons, patterns, and SVGs.
[binary bytes]
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP4z8DwHwAFAAH/q842iQAAAABJRU5ErkJggg==
What you'll use this for
Data URIs eliminate HTTP requests for small assets, ship icons inside CSS, and embed images where a network call isn't possible.
Inline icons
Bundle small UI icons into CSS so there's nothing to fetch on first paint.
Email signatures
Embed a tiny logo straight inside the HTML body so it survives strict email clients.
CSP-strict apps
Avoid external image hosts when your Content Security Policy blocks them.
Offline assets
Keep critical glyphs available when the network is down or restricted.
How to encode an image as Base64
Drop or pick an image
PNG, JPG, GIF, SVG, or WEBP, up to 4 MB. Everything is read with FileReader in the browser.
Pick output mode
Raw Base64, full data: URI, CSS rule, or HTML tag — whichever fits where you're pasting.
Copy or download
Hit copy to grab the result, or save it as a .txt file for use later.
Paste anywhere
Drop the data URI into your HTML, CSS, JSON, or Markdown — it renders just like a normal URL.
Frequently asked questions
No — Base64 inflates size ~33%. Use for small icons / patterns; full photos should stay as separate files.
data: URI: anywhere a URL fits. CSS: background-image: url('...');. HTML: <img src="...">.
Yes. No signup, no limits, no ads. Runs entirely in your browser.
Yes — SVG renders correctly as data URI, especially useful for inline icons.
Paste a data URI into a browser address bar — or use the Base64 Decode tool on the raw Base64.
About image data URIs
A data: URI (RFC 2397) lets you embed an entire resource — image, font, JSON — inside the URL itself rather than referencing it. For images, the bytes are Base64-encoded and prefixed with the MIME type and ;base64,. Browsers, mail clients, and most rendering pipelines treat it identically to a normal https:// URL.
When to use a data URI
- Small assets — icons, sprites, patterns under a couple of KB.
- Email — embedding images that survive aggressive mail filters.
- Single-file demos — keep an HTML file standalone with no external assets.
- Build outputs — bundlers inline small assets via this exact format.
When not to use one
- Large photos — the ~33% size penalty plus no caching hurts more than a normal
<img>. - Shared icons — a single PNG cached by the browser is faster across many pages.
Browser support
Universal in all modern browsers and most email clients. Older versions of Outlook are the main exception.