Image to Base64 – Encode and Decode Data URIs

How to encode an image as Base64 and decode it again

1. Select Encode. Drop one image onto the page, or use Choose image. PNG, JPG, WebP, GIF, SVG and AVIF are accepted, and AVIF preview depends on the browser.
2. Read the original size beside the Base64 length. Copy the raw Base64, the full data URI, or the HTML, CSS or Markdown snippet.
3. If the warning appears, the original is over about 100 KB. Prefer a normal image address for that file, or shrink it before you inline it.
4. Select Decode, paste the code — line breaks and a missing data prefix are fine — then select Decode image. The page names the type from the file bytes, shows a preview and offers a download.

What Base64 does to an image

Base64 is a way of writing binary data with letters, numbers and a few symbols. An image file is a sequence of bytes. Base64 groups those bytes and spells them as text so the file can sit inside something that expects text: an HTML page, a CSS rule, a JSON response, an email source or a configuration file. The picture does not become sharper, and it does not become a smaller file. The text is the same file, rewritten so a text channel can carry it.

Encode on this page uses the browser’s FileReader and keeps the exact bytes you chose. It does not redraw the image on a canvas. A GIF stays animated, an SVG stays the original markup, and a JPG keeps the metadata that was already inside it. That is a different job from the PNG to JPG converter and the WebP to JPG converter, which decode the pixels and save a new file. If you only needed a different container, use those tools. If you needed the file as text, use this one.

Raw Base64 and a data URI

Raw Base64 is only the encoded characters. A data URI adds a short header so a browser knows what the text is and that the payload is Base64 rather than percent-encoded text. A PNG begins data:image/png;base64, and the characters follow. Paste that whole string into an HTML image source, a CSS url() or a Markdown image, and a browser that allows data URIs will show the picture without a second file request.

The Encode tab prints the raw characters, the full data URI, and three snippets: an HTML image tag, a CSS background-image declaration, and a Markdown image. Each copy button takes the text that is on screen. The Decode tab accepts either form. Line breaks and spaces in the pasted text are ignored, which matters because mail clients and code formatters wrap long lines. If the data: prefix is missing, the page still treats the characters as raw Base64 and names the type from the bytes, not from the filename you no longer have.

The size overhead is about a third

Base64 uses four characters for every three bytes, then adds padding when the length is not a multiple of three. The text is therefore about 33 percent longer than the original file, and sometimes a little more because of that padding. A 30 KB icon becomes roughly 40 KB of text. A 1 MB photograph becomes roughly 1.3 MB of text. The readout under the result states the original byte count, the Base64 character count and the percentage for the file you actually chose. Use that line. “About a third” describes the usual case, not a fixed ratio you can quote for every length.

When inlining helps, and when it hurts

Inlining helps when the image is small and belongs in the same response as the page: a logo in a single HTML file, a one-off diagram in documentation, or a swatch stored beside design tokens. It removes one network request. It hurts when the image is large, repeated on many pages, or likely to change on its own. The Base64 text is downloaded again every time the HTML or CSS changes, even if the picture did not. A separate image file can stay in the cache. Above about 100 KB of original image, this page shows a warning for that reason. The warning is practical guidance, not a rule from a particular browser.

If the picture is bigger than the place it is going, shrink it before you encode it. The image compressor can aim a JPG or WebP at a kilobyte size. The image resizer changes the pixel size when the layout never needed the camera original. The crop tool drops unused edges so you are not paying a one-third overhead on pixels nobody will see. Encode the download from those tools. Encoding the camera original and hoping the text will be small does not work, because Base64 never compresses anything.

HTML, CSS, Markdown and JSON

The HTML snippet is an image element whose source is the data URI. The CSS snippet sets background-image to url() around the same URI. The Markdown snippet is the usual image syntax with the URI in the parentheses. All three are the same bytes, so they fail together if a content-security policy refuses data: images. Some sites block that scheme on purpose. JSON has a further constraint: the value has to be a valid string, so copy the raw Base64 or the data URI into a quoted field and let a JSON encoder escape it. Do not paste a multi-megabyte photograph into an API body and expect a comfortable request. A small icon is the case this pattern was meant for.

Email signatures

A signature that looks correct in the program where you wrote it can arrive blank. Webmail often removes data URIs, and some clients refuse images that are not loaded over HTTPS. Even when the client allows the URI, a heavy signature rides on every message, and the Base64 form is already larger than the picture. Keep signature art tiny, or host it and link to that address. This tool will encode a large photograph if you ask it to. The size line and the warning are there so that choice is conscious rather than accidental.

GIF, SVG and AVIF

PNG, JPG and WebP are the formats the other Image Cosmos tools edit. This encoder also accepts GIF, SVG and AVIF, because it copies the file rather than painting a new one. A GIF’s frames stay in the Base64. An SVG stays markup that has been encoded, not a flattened bitmap, so it can still scale when the browser draws it. AVIF encoding on this page does not depend on canvas support. Whether Decode can preview AVIF depends on the browser: current Chrome, Edge, Firefox and Safari can show it, and an older browser may not. If the preview cannot be drawn, the download is still the original bytes. This page will not turn a JPG into AVIF, and it will not claim a preview it cannot paint.

Privacy

The file is read in this tab. Image Cosmos does not receive it, store it, or keep the Base64 you copied. Close or reload the page and the temporary preview and download link disappear. Because the encoder copies the original bytes, a camera JPG still contains its EXIF, and that block can include a place and a device. If the text is going into a page or a message where that information should not travel, run the photo through the EXIF metadata remover first and encode the download. Stripping metadata rewrites the pixels, so the Base64 then describes the rewritten file, not the camera original. Say that plainly when the distinction matters.

Decode is the reverse, and it stays on the device as well. Paste the text. The page looks at the leading bytes for a PNG, JPG, GIF, WebP or AVIF signature, or for an SVG that starts like SVG, and it ignores a header that disagrees with those bytes. It then shows a preview when the browser can display that type, and it offers a download named for the type it found. If the text is not Base64, or the bytes are not one of those images, it stops with an error and does not invent a file. Nothing in that check is uploaded.

Frequently asked questions

How do I convert an image to a Base64 string?

Open the Encode tab and drop a PNG, JPG, WebP, GIF, SVG or AVIF file, or use Choose image. The page reads the file in your browser and prints the raw Base64, the data URI, and copy-ready HTML, CSS and Markdown. It uses the original bytes, so it does not recompress the picture.

What is a data URI, and how is it different from raw Base64?

Raw Base64 is only the encoded characters. A data URI adds a header such as data:image/png;base64, so a browser knows the type and that the payload is Base64. The Encode tab shows both. The Decode tab accepts either, including a paste that forgot the header.

Why is a Base64 image about 33% larger?

Base64 writes four characters for every three bytes, with padding when the length is not a multiple of three. The text is therefore about a third longer than the file, sometimes a little more. The size line states the real original bytes, the Base64 length and the percentage for the image you chose.

When should I avoid inlining an image as Base64?

Avoid it for photographs, screenshots and heroes over about 100 KB. The text cannot be cached on its own, it is downloaded again whenever the HTML or CSS changes, and it delays the document that contains it. A normal image URL is the better default once the file is that large. This page shows a warning above that size.

Can I put a Base64 image in an HTML img tag, CSS or Markdown?

Yes, when the page is allowed to load data URIs. The HTML snippet is an image element, the CSS snippet is a background-image url(), and the Markdown snippet uses the usual image syntax. All three carry the same data URI. A content-security policy that blocks data: images will refuse every one of them.

Will a Base64 image work in an email signature?

Often it will not. Many webmail and desktop clients strip data URIs or show a broken image, and a large signature is sent with every message in a form that is already about a third bigger than the picture. A small hosted HTTPS image is more reliable. If you still encode one, keep it tiny and read the size warning.

How do I turn a Base64 string back into an image file?

Open Decode and paste the raw Base64 or the data URI. Spaces and line breaks are ignored, and a missing data: prefix is fine. The page identifies PNG, JPG, WebP, GIF, SVG or AVIF from the leading bytes, shows a preview when this browser can display that type, and downloads the file.

Does this Base64 converter upload my image?

No. Encoding and decoding both run in this tab. Image Cosmos does not receive the file, the Base64 or the download. Close or reload the page and the temporary preview is gone. A camera JPG still contains its own EXIF until you strip that metadata in a separate step and encode the rewritten file.