Image to Base64
Convert any image to a Base64 data URI and copy a ready-to-paste HTML, CSS or Markdown snippet — or decode a Base64 string back into a downloadable image. Everything runs in your browser, so nothing is uploaded. Last reviewed 2026-06-19.
Drop an image here, or browse
PNG, JPG, GIF, SVG, WebP, BMP, ICO — read locally, never uploaded.
What is a Base64 image (data URI)?
A data URI embeds an image directly inside text instead of pointing to a
separate file. It has the form
data:<mime>;base64,<encoded-bytes> — for example
data:image/png;base64,iVBORw0KGgo…. Because it is plain text, you can drop it
straight into HTML, CSS, JSON, SVG or Markdown, and the browser renders the image without a
second network request. Encoding never changes the picture — it is a byte-for-byte text
representation of the exact file you gave it.
Size & caching — the trade-off
Base64 turns every 3 bytes into 4 ASCII characters, so the encoded text is always about 33% larger than the binary file, plus a short header. That is fine for a few tiny assets but wasteful for large ones. The bigger catch is caching: a linked image file is downloaded and cached once, then reused everywhere, while an inlined data URI is re-downloaded as part of every page or stylesheet that contains it, and cannot be cached on its own. Inline small, link large.
When to inline vs link
| Situation | Recommendation | Why |
|---|---|---|
| Small icons, logos, sprites (< ~5 KB) | Inline | Saves an HTTP request; the ~33% size overhead is tiny in absolute terms and the asset loads with the page. |
| Inline SVG used in CSS / a single component | Inline | Avoids a separate file, keeps the markup self-contained, and SVG compresses well even as Base64. |
| Email signatures / HTML emails | Inline | Many email clients block external images; an embedded data URI shows reliably without a remote fetch. |
| Large photos or hero images | Link instead | Base64 inflates bytes ~33%, can’t be cached separately, and blocks the HTML from rendering until fully parsed. |
| Images reused across many pages | Link instead | A linked file is cached once and reused; an inlined copy is re-downloaded inside every page that embeds it. |
Tips
- Compress or resize first. Base64 of a smaller image is a smaller string — run a photo through the Image Compressor or Image Resizer before encoding.
- SVG inlines especially well — vector icons stay sharp and compress better than raster as Base64; great for CSS backgrounds and component libraries.
- Watch HTML/CSS size. A handful of inlined icons is fine; dozens of large data URIs make your markup heavy and slow to parse.
- Need text, not images? Use the Base64 Encoder / Decoder for plain text and strings.
Frequently asked questions
- Is my image uploaded to a server?
- No. The image is read entirely in your browser with the built-in FileReader API and converted to Base64 locally — it never leaves your device and is never logged or transmitted. It works offline once the page has loaded, which is why it is safe for private screenshots, ID photos or internal assets.
- What is a data URI and where do I paste the result?
- A data URI looks like data:image/png;base64,iVBORw0KGgo… — the MIME type, the word base64, then the encoded bytes. You can drop the whole string straight into an HTML <img src="…">, a CSS background-image: url("…"), or a Markdown image. This tool builds those three snippets for you so you can copy the exact one you need.
- Why is the Base64 bigger than the original file?
- Base64 encodes every 3 bytes as 4 ASCII characters, so the text is always about 33% larger than the binary image — plus the short data:…;base64, header. That is the trade-off for embedding an image directly in text. It is fine for small assets but wasteful for large photos, which are better linked as a normal file.
- Which image formats can I encode?
- Any format your browser can read as a file — PNG, JPEG, GIF, WebP, SVG, BMP and ICO all work. The MIME type is taken from the file itself, so the resulting data URI is correct for that format. Encoding does not change or re-compress the image; it is a byte-for-byte text representation of the original file.
- Can I decode a Base64 string back into an image?
- Yes — switch to the “Base64 → Image” tab and paste either a full data URI or just the raw Base64 (then pick its format). The tool previews the image and lets you download it as a real file. If the string is not valid image data you will get a clear error rather than a broken image.
- Does inlining an image as Base64 help page speed?
- For a few tiny assets, yes — it removes extra HTTP requests. But inlined images cannot be cached separately and bloat the HTML/CSS, so for anything beyond small icons it usually hurts. A good rule of thumb is to inline assets under a few kilobytes and link everything larger.