What's the difference between Base64 and a data URI?

Base64 is only the text that represents the bytes. A data URI is that text with the data:image/png;base64, prefix in front, which tells the browser the file type. An img src and CSS url() need the data URI; API fields depend on their documentation, and some ask for plain Base64.

Does inlining images as Base64 make a site faster?

Only for very small images, where the extra request costs more than the 33% size increase. For photos a separate file is better: the browser caches it, downloads it in parallel and doesn't have to reprocess the HTML or CSS.

Can I use Base64 images in email?

Not reliably. Gmail and Outlook on Windows don't display data URI images. For email, host the image and use its URL, or attach it with a Content-ID (CID) and reference it as cid: in the HTML.

How do I put an SVG in a CSS data URI?

Choose the SVG image, the CSS format and URL-encoded encoding. The result is a background-image: url("data:image/svg+xml,...") line with the special characters escaped, usually smaller than the Base64 version.

How do I turn Base64 returned by an API into a file?

Switch to Base64 to image and paste the value, with or without the data: prefix. The page shows the preview, the real type and the dimensions, and downloads the file with the right extension, ready to attach to a bug or use in an upload test.

Why doesn't my Base64 image show up?

Common causes are Base64 cut off while copying, the wrong type in the data: prefix, spaces or line breaks inside a CSS string, or a format the browser can't show, such as HEIC outside Safari. Paste the value here and the page checks it and tells you which one it is.

Is the image sent to a server?

No. Reading and converting happen in your browser, and the image doesn't go to a server, the URL or local storage. Usage metrics record only the chosen format, the image type and a size range, never the image or the file name.

Image to Base64 Converter

Drop, paste or pick an image and copy a data URI ready for HTML, CSS or Markdown. The other way round, paste Base64 or a data URI to see the image, check its real type and download the file.

The image is read and converted in your browser. It isn't sent to any server and isn't saved on the page.

Direction

Drop, paste (Ctrl+V) or choose an image

PNG, JPEG, GIF, WebP, AVIF, SVG, ICO or BMP, up to 25 MB. The image never leaves the browser.

Choose image

Format

Result

No image yet

Choose an image or paste a screenshot with Ctrl+V. The code shows up here in the chosen format.

Got Base64 that isn't an image, a Basic header or a Kubernetes Secret? The Base64 decoder reads text and any file.

Decode Base64

What is a data URI

A data URI puts the file inside the address itself: data:image/png;base64, followed by the image bytes in Base64. The browser treats that text as an image URL, so it works in an img src, in CSS url(), in Markdown and in JSON. The part before the comma states the file type; if it's wrong, some browsers and upload validators reject the image.

When to inline an image and when not to

Worth inlining

Icons and logos of a few KB, which would each cost a request
Small background images in critical CSS loaded with the page
Test fixtures and API mocks, where the image has to travel inside the JSON

Better as a file

Photos and banners: Base64 is a third bigger and isn't cached by the browser separately from the page
The main image of the page, because a bigger HTML delays everything after it
Email marketing images, which Gmail and Outlook on Windows don't display as data URIs

SVG doesn't need Base64

SVG is text, so it can go into a data URI with percent-encoding, escaping only <, >, # and %. The result is usually smaller than Base64 and stays readable. Double quotes become single quotes so the value fits inside url("...") in CSS. Choose URL-encoded in the options when the image is an SVG.

Testing uploads and APIs with Base64 images

Many APIs take the image as Base64 inside JSON, with or without the data: prefix. For QA, two things matter. Size limits usually apply to the decoded file, and Base64 is about 33% bigger, so a 5 MB photo becomes roughly 6.7 MB of payload. Then there's the type: if the data URI says image/png and the bytes are JPEG, a backend that checks the file signature will reject it. Base64 to image mode shows both types side by side.

Formats the browser displays

PNG, JPEG, GIF, WebP, AVIF, SVG, ICO and BMP show up in any current browser. HEIC, the iPhone photo format, only opens in Safari; here it's converted and downloaded normally, but the preview may not appear.

Image to Base64 frequently asked questionsFrequently asked questions

Data URIs, email, SVG, uploads and images that won't open.