Image to Base64
Convert an image to a Base64 data URI for free. Copy it as a plain data URI or ready-made CSS, HTML or Markdown — encoded entirely in your browser.
Click to choose a file or drag & drop here
PNG, JPG, WebP, GIF or SVG · encoded on your device
Sometimes an image needs to live inside a file rather than beside it. An email template that must survive being forwarded, a single-file HTML report, a CSS background in a stylesheet that ships alone, a JSON payload carrying an avatar — all of these need the picture encoded as text.
Base64 turns any file into a string of safe characters that can sit inside HTML, CSS, JSON or Markdown. This tool does that conversion in your browser and hands you the result as a plain data URI or wrapped ready to paste.
How to use the Image to Base64
Choose an image
PNG, JPG, WebP, GIF or SVG. Encoding happens instantly and locally.
Pick the output you need
A bare data URI, a CSS background-image rule, an HTML img tag, or Markdown image syntax.
Check the size
The encoded length is shown next to the original. Base64 always grows a file by about a third.
Copy and paste it
The string is self-contained — no separate file to upload, link or keep in sync.
What Base64 actually is
A binary file is a sequence of bytes, and many places that carry text — an HTML attribute, a CSS value, a JSON string, an email body — cannot safely hold arbitrary bytes. Base64 solves that by re-expressing every three bytes as four characters drawn from a 64-character alphabet that is safe everywhere.
The cost is size. Four characters for every three bytes means the encoded form is always about 33% larger than the original, before any additional overhead from the data: prefix. Nothing is compressed, and nothing is encrypted — Base64 is an encoding, not a security measure. Anyone can decode it in one line of code.
When inlining is a good idea
- Tiny icons and logos under about 5 KB, where saving a network round trip is worth more than the extra bytes.
- Single-file deliverables — an HTML report or an email template that has to work with no external files at all.
- Email signatures, where a linked image is usually blocked by the client and a linked file may vanish.
- CSS shipped without an asset pipeline, where there is nowhere to put a separate image.
- API payloads that must carry a small image as JSON.
When inlining is a bad idea
Above roughly 10 KB, inlining usually makes a page slower rather than faster. An inlined image cannot be cached separately from the document that contains it, so it is re-downloaded every time that HTML or CSS changes — and it blocks rendering of the file it sits in until the whole thing has arrived.
It is also unreadable in source control: a one-line change to an inlined image shows up as a diff of thousands of characters. For anything above a small icon, a normal image file with a proper cache header will beat a data URI on every metric that matters.
| Original size | Encoded size | Sensible? |
|---|---|---|
| 1 KB | ~1.4 KB | Yes — clearly worth it |
| 5 KB | ~6.8 KB | Yes — usually a win |
| 20 KB | ~27 KB | Borderline — measure it |
| 100 KB | ~136 KB | No — use a normal image file |
| 1 MB | ~1.37 MB | No — and it will slow the page badly |
A note on SVG
SVG is already text, so Base64-encoding it is usually the wrong move — it makes the file a third bigger for no benefit. For SVG in CSS, URL-encoding the markup directly is smaller and stays human-readable; for SVG in HTML, pasting the <svg> element inline is better still, because it can then be styled with CSS.
Base64 SVG does make sense in one case: when the value has to survive being passed through something that will mangle angle brackets and quotes.
Frequently asked questions
What is a Base64 image used for?
Embedding a picture directly inside HTML, CSS, JSON, Markdown or an email, so that no separate image file has to be hosted or delivered alongside it.
Does Base64 make my image smaller?
No — the opposite. Encoding adds roughly 33%, because every three bytes become four characters. Compress the image first if size matters.
Is Base64 encryption?
No. It is an encoding, and anyone can reverse it instantly. Never treat a Base64 string as a way to hide anything.
How big can the image be?
This tool accepts up to 5 MB, but anything over about 10 KB is usually better linked than inlined — a data URI cannot be cached separately from the file containing it.
Is my image uploaded to convert it?
No. The file is read and encoded entirely inside your browser, so nothing is transmitted.
Which image formats work?
Any format your browser can read — PNG, JPG, WebP, GIF, AVIF and SVG. The correct MIME type is written into the data URI automatically.
100% private. Files are processed on your device and never uploaded.
Instant results. No upload queue. Processing time depends on your device.
Free forever. No signup, no watermark, no paid tier.
Works everywhere. Use a modern browser on your phone or computer.
Related tools
Image to Base64 is one of all the free tools on ToolNest. No account or subscription needed — anywhere in the world.