Which image formats are supported?

PNG, JPEG, GIF, WebP and SVG. The type is detected from the file signature rather than the extension, so a correctly formed file works even if it has been renamed. Other binary formats will still encode, but the resulting data URI may declare the wrong media type and fail to render.

A data URI embeds the content of a file directly in a URL, using the form data:mediatype;base64,payload. Anywhere a browser accepts a URL, it accepts one of these: the src of an img tag, a CSS background-image, a Markdown image reference. The browser decodes it in place, so there is no separate request for the file.

How much bigger does the image get?

About one third, because Base64 turns every three bytes into four characters. A 30 KB icon becomes roughly 40 KB of text. The tool shows both numbers and the ratio between them, which is worth a glance before you inline something large.

Should I inline images to make my site faster?

Only small ones. Inlining removes a request, which helps for an icon that would otherwise block rendering. It hurts for anything substantial: the bytes are embedded in a file that is usually not cached as aggressively as an image, they cannot be served in a modern format to browsers that support one, and any change to the image means re-downloading the whole document or stylesheet. Modern HTTP/2 and HTTP/3 connections make the saved request far less valuable than it was.

Can I convert an SVG this way?

You can, and it works, but for SVG specifically a percent-encoded data URI is usually better than a Base64 one. SVG is text, so Base64 inflates it by a third for no benefit, whereas percent encoding leaves most of it readable and is often smaller. Base64 remains the safer choice if the SVG contains characters that are awkward to escape.

Why does my data URI not display?

The usual causes are a media type that does not match the actual content, whitespace or line breaks left in the Base64 payload when it was copied from a wrapped source, a missing base64 marker before the comma, or a content security policy that blocks data: sources for images. Pasting the URI into the decode side here will tell you quickly whether the payload itself is sound.

Can I use this for images in an HTML email?

It is a common reason to inline. Many email clients block remote images by default, so an embedded image displays immediately. Be aware that some clients, notably certain versions of Outlook, have historically not supported data URIs in email, and that the message size grows by the full encoded size of every image.

How large an image can it encode?

There is no fixed limit in the tool, but very large files are impractical: the encoded string has to be held in memory and rendered as text in the page, and browsers apply their own limits to URL lengths in some contexts. If a file is large enough that this feels slow, it is almost certainly too large to inline in the first place.

Is my image uploaded anywhere?

No. The file is read locally by your browser and encoded in the page. It is never transmitted, stored or logged, and no network request is made as part of the conversion. Screenshots with customer data, internal architecture diagrams and unreleased artwork are all safe to convert here.

Can I convert a data URI back into a file?

Yes. Paste it into the decode side and the image is rendered, with a download button that saves it as a file using the extension matching the media type declared in the URI. That is the quickest way to recover an image that only exists as a data URI in a stylesheet or an email.

Image to Base64 & Data URI Converter

Image to Base64

📁Drag and drop an image, or click to choose onePNG, JPEG, GIF, SVG, WebP

// Image to Base64: Features

Both directions, with a preview

Drop an image onto the page or click to choose one, and you get a preview, the file name, byte size and pixel dimensions, then the raw Base64 and a complete data: URI ready to paste. Paste an existing Base64 string or data URI into the decode side and the image is rendered so you can confirm what it actually contains, which is useful when a data URI turns up in a stylesheet or an email and you want to see it and download it as a real file if you need one.

The media type is detected from the file itself

Rather than trusting the file extension, the tool reads the first bytes of the file to determine the type: the PNG signature, the JPEG start-of-image marker, the GIF header, the RIFF and WEBP markers, and a leading angle bracket for SVG. That matters because a data URI with the wrong media type will not render, and a file that has been renamed is a common source of exactly that problem.

What inlining costs you

Base64 makes the data about one third larger, and the tool shows the encoded size next to the original so the trade-off is explicit. For a small icon that saves a network round trip, inlining is usually a win. For a photograph it is usually a loss: the page becomes larger, the bytes cannot be cached separately from the HTML or CSS that contains them, and a change to the image invalidates the whole file. A rough rule is that a few kilobytes is fine and a few hundred is not.

Where a data URI earns its place

A content security policy that forbids external image sources still allows inline data. An HTML email renders reliably when images are embedded rather than fetched, because many clients block remote content by default. A single-file report or export has nowhere to put a separate image. A CSS background for a tiny icon avoids a request that would otherwise block rendering. Outside these cases, a normal image file served from your own domain is usually the better option.

Your images never leave your machine

The file is read by the browser's FileReader and encoded locally. It is not uploaded, stored or logged, and no request is made to any server as part of the conversion. That means screenshots containing customer data, internal diagrams and unreleased artwork can all be converted here. To work with text rather than files, the Base64 Encoder handles strings in both directions.

// Image to Base64: FAQ

Which image formats are supported?: PNG, JPEG, GIF, WebP and SVG. The type is detected from the file signature rather than the extension, so a correctly formed file works even if it has been renamed. Other binary formats will still encode, but the resulting data URI may declare the wrong media type and fail to render.
What is a data URI?: A data URI embeds the content of a file directly in a URL, using the form data:mediatype;base64,payload. Anywhere a browser accepts a URL, it accepts one of these: the src of an img tag, a CSS background-image, a Markdown image reference. The browser decodes it in place, so there is no separate request for the file.
How much bigger does the image get?: About one third, because Base64 turns every three bytes into four characters. A 30 KB icon becomes roughly 40 KB of text. The tool shows both numbers and the ratio between them, which is worth a glance before you inline something large.
Should I inline images to make my site faster?: Only small ones. Inlining removes a request, which helps for an icon that would otherwise block rendering. It hurts for anything substantial: the bytes are embedded in a file that is usually not cached as aggressively as an image, they cannot be served in a modern format to browsers that support one, and any change to the image means re-downloading the whole document or stylesheet. Modern HTTP/2 and HTTP/3 connections make the saved request far less valuable than it was.
Can I convert an SVG this way?: You can, and it works, but for SVG specifically a percent-encoded data URI is usually better than a Base64 one. SVG is text, so Base64 inflates it by a third for no benefit, whereas percent encoding leaves most of it readable and is often smaller. Base64 remains the safer choice if the SVG contains characters that are awkward to escape.
Why does my data URI not display?: The usual causes are a media type that does not match the actual content, whitespace or line breaks left in the Base64 payload when it was copied from a wrapped source, a missing base64 marker before the comma, or a content security policy that blocks data: sources for images. Pasting the URI into the decode side here will tell you quickly whether the payload itself is sound.
Can I use this for images in an HTML email?: It is a common reason to inline. Many email clients block remote images by default, so an embedded image displays immediately. Be aware that some clients, notably certain versions of Outlook, have historically not supported data URIs in email, and that the message size grows by the full encoded size of every image.
How large an image can it encode?: There is no fixed limit in the tool, but very large files are impractical: the encoded string has to be held in memory and rendered as text in the page, and browsers apply their own limits to URL lengths in some contexts. If a file is large enough that this feels slow, it is almost certainly too large to inline in the first place.
Is my image uploaded anywhere?: No. The file is read locally by your browser and encoded in the page. It is never transmitted, stored or logged, and no network request is made as part of the conversion. Screenshots with customer data, internal architecture diagrams and unreleased artwork are all safe to convert here.
Can I convert a data URI back into a file?: Yes. Paste it into the decode side and the image is rendered, with a download button that saves it as a file using the extension matching the media type declared in the URI. That is the quickest way to recover an image that only exists as a data URI in a stylesheet or an email.

// How to Use Image to Base64

Drop in an image to encode

Drag an image onto the drop area or click it to choose a file. PNG, JPEG, GIF, WebP and SVG are supported, and the preview confirms the tool has read the file you intended.
Copy the Base64 or the data URI

The raw Base64 and a complete data: URI are shown separately, each with its own copy button. Use the data URI when you are pasting into an img tag, a CSS rule or Markdown; use the raw Base64 when the surrounding format supplies the media type itself.
Check the size, or decode instead

Compare the encoded size against the original before inlining anything substantial. To go the other way, switch to the decode side and paste a Base64 string or data URI to see the image it represents.

Category Encoding