Data URL Converter

A data URL embeds a file's actual contents inside the URL itself, using the format data:[mime];[encoding],[data] — so a small image, SVG icon, or snippet of JSON lives directly in your HTML, CSS, or JavaScript. A normal file URL, by contrast, just points to a separate resource the browser must fetch over a new HTTP request. The practical trade-off is requests versus weight: a data URL removes the round trip and works offline or inside a single self-contained file, but it inflates the markup and cannot be cached independently by the browser. That makes data URLs ideal for tiny, rarely changing assets and a poor fit for large files. Paste a file or data URL into this converter to generate or decode one and see its exact size in either direction.

Both encodings let a data URL carry binary or text content safely, but they work differently. Base64 maps every three bytes to four ASCII characters from a fixed 64-symbol alphabet, so it handles any binary file reliably and is the standard choice for images, audio, video, and PDFs. URL-encoding instead replaces only unsafe characters with percent-escapes like %20, which keeps already-readable text — such as SVG markup or plain JSON — compact and human-legible, often smaller than Base64 for those formats. The rule of thumb: use Base64 for true binary assets and URL-encoding for text and SVG, where it can save bytes and stays inspectable. This converter offers both formats on a single toggle for files and text, so you can generate either and compare the resulting size before you decide which to embed.

Base64 encoding adds roughly 33% to a file's size, because it represents every three bytes of data using four ASCII characters — a 4:3 ratio that is inherent to the format, not a flaw in any particular tool. On top of that, a data URL adds a short header (the data: prefix, MIME type, and ;base64, marker), so the finished string is slightly larger still. For a tiny icon those extra bytes are negligible and easily outweighed by skipping an HTTP request, but for a large file the inflation is real and the asset also can't be cached separately. This converter shows the original size next to the data URL size and reports the exact overhead in both bytes and percent for every conversion, so you can judge at a glance whether inlining is actually worth it.

Inlining works best for small, static assets — icons, logos, inline SVGs, and tiny background images — where eliminating a separate HTTP request outweighs the roughly 33% Base64 overhead and the loss of independent browser caching. It also helps when you need a single self-contained file, an offline page, or an image embedded directly in an email or generated document. Hosting a normal file is the better choice for large images, anything that changes often, or assets reused across many pages, because the browser can then cache them once and reload them instantly elsewhere. A useful threshold: data URLs over about 32 KB usually perform worse than an external file. This converter's validator flags that 32 KB mark (and warns again past 2 MB), so paste your data URL in to check whether inlining still makes sense.

A data URL's MIME type comes from whatever the browser detected when the file was read, and that guess is occasionally wrong — an SVG saved with a generic extension, for example, may be reported as text/plain or application/octet-stream instead of image/svg+xml. Because the MIME type tells the browser how to render the content, an incorrect one can stop an image from displaying or a file from downloading with the right extension. The fix is simply to set the type explicitly rather than trusting auto-detection. This converter auto-detects the MIME type from each file but lets you override it manually, with common types suggested as you type, so you can force the correct value before copying. Set the right MIME type, regenerate the data URL, and your inline asset will render and download exactly as intended.