Image to Base64 guide
Drop, choose or paste an image to get its data URI, raw Base64, a CSS background rule and an img tag. Or paste Base64 below to see and download the image. Everything runs in your browser.
What a Base64 image is
Base64 turns binary data, like the bytes of a PNG, into plain text using 64 safe characters: A to Z, a to z, 0 to 9, plus and slash. Every 3 bytes become 4 characters. Put that text inside a data URI, data:image/png;base64, followed by the characters, and a browser treats it exactly like an image URL. No separate file, no extra request.
That is the whole appeal. You can paste an image straight into CSS, HTML, JSON, an email template or a single-file demo, and it travels with the code.
The 33 percent tax
Four characters for every three bytes means Base64 is about 33 percent bigger than the original file, plus a few bytes of padding and prefix. The info line under the preview shows the exact before and after. A 30 KB photo becomes roughly 40 KB of text.
Worse, inlined images cannot be cached on their own. A logo served as a file is downloaded once and reused on every page. The same logo inlined in your CSS is downloaded again every time the CSS changes, and it blocks rendering while the stylesheet loads. Gzip claws back some of the overhead, but not all.
The practical rule: inline tiny things, under roughly 5 to 10 KB. Icons, small SVG shapes, a loading spinner, a 1x1 tracking-free placeholder. Serve everything else as a normal file. The tool warns you above 10 KB.
Where inlining still wins
HTML email. Many email clients block external images by default until the reader clicks to load them. Inline data URIs are shown in Apple Mail and some others, though Gmail and Outlook strip or block them, so test before you bet a campaign on it. CID attachments or hosted images are safer for broad email.
Single-file deliverables. A self-contained HTML report, a CodePen demo, a bug reproduction, or a README badge with no hosting. One file, no broken paths.
APIs and JSON. Some APIs accept images only as Base64 strings in a JSON body. The Raw Base64 box gives you the string without the data: prefix, which is usually what those APIs want. Check the docs; some want the prefix, most do not.
SVG is a special case
SVG is already text, so Base64-encoding it makes it bigger for no reason. For CSS backgrounds you can percent-encode the SVG instead: url("data:image/svg+xml,%3Csvg..."), usually smaller than Base64. Base64 is still the safe choice when the SVG has lots of quotes and special characters or when a system insists on base64. The sample loaded on this page is an SVG so you can compare the size yourself.
Decoding: Base64 back to an image
The second half of the page reverses the process. Paste a full data URI or just the raw characters. If there is no data: prefix, the tool reads the first bytes of the decoded data, the magic number, to work out the format: PNG files start with 89 50 4E 47, JPEG with FF D8 FF, GIF with GIF8, WebP with RIFF....WEBP. Then it shows the image, its pixel size and a download button with the right file extension.
It accepts the URL-safe Base64 variant too (minus and underscore instead of plus and slash, as used in JWTs and many APIs) and ignores line breaks, which email systems add every 76 characters.
Worked example: you find background-image: url(data:image/png;base64,iVBORw0KGgo...) in a stylesheet and want the actual file. Copy everything between the parentheses, paste it in, click download. iVBORw0KGgo, by the way, is what the PNG signature looks like in Base64. Once you know it you will spot PNGs in logs and payloads instantly.
Pitfalls
Truncated strings. A data URI copied from a log or a database column with a length limit is often cut off. The image then fails to load or shows a half-rendered photo. The decoder tells you when bytes decode but the browser cannot display them.
Wrong MIME type. A JPEG labeled data:image/png usually still displays, because browsers sniff, but some tools and APIs reject it. Let the encoder set the type from the file.
Privacy. Encoding and decoding happen in your browser with FileReader and atob. Screenshots, IDs and internal diagrams never touch a server.
How we calculate: sources
Frequently asked questions
How do I convert an image to Base64?
Choose, drop or paste an image. The data URI, raw Base64 string, CSS background and HTML img snippets appear instantly, each with a copy button.
How do I convert Base64 back to an image?
Paste a data URI or raw Base64 into the Base64 to Image box. The image appears with its size and format, and you can download it as a file.
Why is the Base64 string bigger than my image?
Base64 uses 4 text characters for every 3 bytes, so it is about 33% larger than the original file.
When should I inline images as Base64?
For tiny assets under about 10 KB, like icons and small SVGs. Larger images load faster as normal files because they can be cached separately.
What is the difference between a data URI and raw Base64?
A data URI adds a prefix such as data:image/png;base64, so browsers know the format. Many APIs want only the raw Base64 characters without the prefix.
Can it detect the format of raw Base64?
Yes. It reads the file signature in the decoded bytes to identify PNG, JPEG, GIF, WebP, SVG, ICO, BMP and AVIF.
Are my images uploaded?
Everything runs in your browser. Nothing you enter is uploaded to a server or stored by us.