It is a way to represent binary data (like an image) using only ASCII text characters, in the form data:image/png;base64,XXXX. This lets you embed the image directly in HTML or CSS code, with no separate file.
Carregando ferramenta… / Loading tool…
Convert images to Base64 Data URIs and back, right in the browser, with ready HTML and CSS snippets.
Encoding an image as Base64 turns it into text you can embed directly in HTML, CSS or JSON, removing one network request. The mechanism is simple: Base64 takes the image's binary and represents it using a 64-character safe alphabet (A–Z, a–z, 0–9, + and /), mapping every 3 bytes to a group of 4 characters. Because 4 characters take more room than 3 bytes, the resulting text is about 33% larger than the original file. A Data URI also prepends a header (data:image/png;base64,) that tells the browser the media type. Encoding here uses the FileReader to read the file as a Data URL in the browser itself; decoding rebuilds the bytes and assembles a viewable Blob. Understanding that trade-off, no extra request, but bigger text and no separate caching, keeps your pages from bloating needlessly.
Every image is a sequence of bytes. Base64 splits those bytes into groups of 3 (24 bits) and rewrites each group as 4 six-bit characters drawn from a 64-symbol printable alphabet. When the byte total is not a multiple of 3, one or two equals signs (=) act as padding. That is why the output is always safe ASCII text that travels through HTML, CSS, JSON and email without corrupting.
The Data URI is that text with a header: data:[type];base64,[data]. The type (for example image/png or image/svg+xml) tells the browser how to interpret the bytes. Because the image becomes part of the document itself, it loads with the HTML/CSS, with no second round-trip to the server, but it is also not cached as an independent file.
Example 1, encode an icon: a ~1 KB PNG becomes a Base64 string of about 1.37 KB, prefixed as data:image/png;base64,iVBORw0KGgo…. Copy the CSS background snippet and paste it into a rule like background-image: url('data:image/png;base64,…') to show the icon with no separate file.
Example 2, decode: paste a full Data URI (data:image/svg+xml;base64,PHN2Zy…) in Base64 → Image mode and the tool rebuilds the bytes, shows the preview and offers the download. If you paste only the part after the comma, provide the expected type so the image is reassembled correctly.
Embedding as Base64 pays off for tiny icons, critical above-the-fold images and HTML emails, where removing a request is worth more than the extra bytes. For large or reused images, separate files are better: the browser caches them once and reuses them, while a Data URI is re-downloaded on every page that repeats it.
On privacy: reading the file (FileReader) and decoding happen 100% in the browser. No byte of the image is transmitted, which makes it safe to convert screenshots, internal logos or any sensitive material. Also remember that pasting a large Data URI into a repository inflates your source code, use it sparingly.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/image-to-base64"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Image to Base64"
></iframe>It is a way to represent binary data (like an image) using only ASCII text characters, in the form data:image/png;base64,XXXX. This lets you embed the image directly in HTML or CSS code, with no separate file.
Encoding and decoding happen entirely in your browser. No image is sent to any server.