Pin tools here. They are saved in this browser.
Pin a tool and its sticker lands here.
Turn an image into a data URI ready for CSS or HTML, or turn a data URI back into an image file.
A data URI carries a file inside the address itself: data:image/png;base64,iVBORw0KGgo…. After data: comes the media type, then an optional ;base64 marker that says how the content is encoded, and then the content after a comma. Wherever a browser accepts an image URL, such as src in HTML or url() in CSS, it accepts a data URI and shows the image without a further request. The format is defined in RFC 2397.
Base64 writes every 3 bytes as 4 characters, so the encoded image is about 33% larger than the file. An inlined image is also tied to the document that contains it: the browser cannot cache it separately, and it is transferred again with every page or style sheet that repeats it.
That makes data URIs a good fit for a few small images, such as an icon of one or two kilobytes or a placeholder, and a poor fit for photographs. The tool warns you once the result passes about 10 KB.
An SVG file is text, so it can go into a data URI as text: data:image/svg+xml;charset=utf-8,…. Only some characters have to be percent-encoded: the ones that would end the URL or the quotes around it, and the ones a URL cannot carry as they are. An unescaped #, common in colour values, starts the URL fragment and cuts the image short. This tool escapes %, #, <, >, ", &, the backslash, white space and control characters, and writes characters outside ASCII as UTF-8 escapes. Decoding the result gives back the same SVG text. The text form is offered when the file is valid UTF-8.
The URL-encoded form stays readable, and because it is still plain text, gzip and Brotli usually compress it better than Base64. Which form is shorter before compression depends on the file, so the tool shows both sizes.
The image is read by your browser and encoded by JavaScript on your device. The other direction works the same way: the pasted data URI is decoded in the page and offered to you as a file. Neither the image nor the data URI is uploaded.
No. The file is read and encoded by your browser, and the tool makes no network request with it. The same holds for a data URI you paste to turn it back into a file.
Base64 represents every 3 bytes of the file with 4 text characters, which adds about 33%. The short header in front, such as data:image/png;base64, adds a few more bytes.
When the image is small, around a few kilobytes, and is needed as soon as the page renders, so that saving a request matters more than caching. Larger images, and images shared by many pages, are better served as separate files.
Yes. Put it inside url("…") in CSS or in the src attribute of an img element. If the site sends a Content-Security-Policy, the policy has to allow data: as an image source, in img-src or in default-src, for the image to appear.