Image to Data URL

Turns an image into a base64 data URL you can paste straight into HTML, CSS, or JSON, and turns a data URL back into a file you can save. It reads the real media type from the file's magic bytes rather than trusting the extension, reports the exact character count of the finished URL against the size of the source file, and warns you when the inline form has grown past the point where it is worth using. The same page decodes both base64 and percent encoded data URLs, which is the form an inline SVG usually takes in a stylesheet.

Drop an image, paste one from the clipboard, or pick a file, and the data URL appears with a copy button. Switch the output form to get a ready made CSS background-image rule or an HTML img tag instead of the bare string, and set the selector if you want the CSS rule to name your own class. To go the other way, paste a data URL into the box: the panel shows the decoded image, its real media type, and a download button with a sensible filename.

Most base64 image converters upload your picture to a server to do arithmetic that a browser can do instantly, then cap the file size or wrap the answer in ads. This one does the encoding in the page, so your files and inputs never leave your device, and there is no size limit beyond your own memory. It also tells you the truth about the tradeoff, including the exact overhead and a warning past 100 KB, rather than encouraging you to inline a photo that should have been a separate request.

How much bigger does base64 make my image?

About 33 percent, plus the short prefix that names the media type. Three bytes of file become four characters of base64, so a 90 KB PNG becomes roughly 120 KB of text. The tool reports the exact overhead for your specific file rather than the rule of thumb.

When should I inline an image instead of linking to it?

When it is small and always needed: an icon, a tiny texture, a one pixel gradient. Inlining saves a request, but the bytes cannot be cached separately from the document that holds them, so every page load pays for them again, and a data URL inside a stylesheet blocks first paint. Past roughly 100 KB a normal file reference almost always wins, which is why this tool warns at that point.

Can it decode a data URL that is not base64?

Yes. The RFC also allows a percent encoded payload, which is the form most people use for an inline SVG in CSS because it stays readable and compresses better. Paste either one and the tool reports which encoding it found, then hands back the decoded bytes.