Image to Base64

How it works

Base64 is a way of writing binary data using text characters alone. Encode an image that way and you can paste it directly into an HTML or CSS file instead of making the browser fetch a separate file for it. Choose your images from the box or click to pick them, choose the output shape and press the button; each image comes back as a .txt file you download and open. The cost is size: three bytes of the original become four characters, so the encoded copy is about a third larger, and compression on the server recovers only part of that. The second cost is caching — a linked image file is stored by the browser once and reused on every page, while an embedded one is downloaded again with every page that carries it. Together those two facts draw the line: the method suits small icons, logos and repeating patterns, and works against you with photographs.

This tool is also known as image to base64, base64 image encoder, data uri converter, png to base64, css background image base64.

What is Base64?

Base64 is a method of writing binary data using an alphabet of 64 safe characters: letters, digits and two punctuation marks. It was designed to carry files through channels that can only handle text — email protocols, HTML and CSS files, JSON bodies — where raw binary would be mangled or rejected. It is not encryption: it hides nothing, anyone can decode it in a line of code, and it makes the data about a third larger than it was.

What is Data URI?

A data URI is a special kind of URL that carries the file inside the address itself. It starts with data:, then names the type of the content, then a base64 marker, then the encoded bytes — data:image/png;base64,… is the familiar pattern. When a browser meets an address in that form it decodes the image straight out of the address without making a network request, which is how a small icon ends up living inside an HTML or CSS file rather than beside it.

What is MIME type?

A MIME type is the short label that says what kind of data something is: image/png, image/jpeg, text/plain. In a data URI it is the part sitting between data: and the base64 marker, and it is what tells the browser to draw the bytes as a picture rather than print them as text. Label a JPEG as image/png and most browsers will still render it, because they inspect the bytes — but strict validators, some email clients and many APIs will refuse the mismatch.

Are Base64 and a data URI the same thing?

They are not the same, although one sits inside the other. Base64 is the encoding itself: binary rewritten as 64 safe text characters, nothing more. A data URI is the wrapper that turns that text into something a browser can treat as an address, with the MIME type at the front and the encoded body behind it. You hand raw Base64 to an API or paste it into a configuration file; you paste a data URI into a src attribute or a CSS url(). Putting one where the other was expected is the usual cause of an image that refuses to appear. This tool produces both, so choose the output shape that matches the place the text has to go.

When embedding pays off

Embedding an icon, a logo or a background pattern of a few kilobytes removes one request from the page and makes the first paint arrive sooner, because the image is already there when the stylesheet is read. It also helps in email templates, where many clients block external images until the reader agrees to load them — an embedded image is part of the message and shows immediately.

Embedding a large picture does the opposite: the HTML or CSS file swells, it can no longer be cached usefully, and the data comes down the wire again on every single page view. Anything that changes often is a poor candidate too, since changing the image now means editing the code.

• Good fit: small icon, logo, background pattern, email template
• Poor fit: photograph, large cover image, anything that changes often

What each output shape gives you

A data URI is the full address, with the file's type at the front, and it can be written straight into a src attribute or inside a CSS url(). The CSS and HTML options wrap that same address in a ready-made line, so there is nothing left to type around it.

Raw Base64 is the encoded data on its own, with no type and no prefix. That is the shape an API body or a configuration file usually expects, and pasting a full data URI where raw Base64 was wanted is a common reason a request comes back rejected.

The size cost in numbers

The growth is not an estimate, it follows from the encoding: every three bytes are rewritten as four characters, which is 33 percent more, plus a little padding. A 4 KB icon becomes about 5.4 KB of text; a 400 KB photograph becomes about 533 KB sitting inside your HTML.

Compression narrows the gap without closing it, because Base64 text compresses less well than the binary it came from. Judge the trade the honest way: one saved request against a permanently larger file that is downloaded again with every page.

Frequently asked questions

Does Base64 make the image bigger?

Yes, by about a third. Three bytes of binary become four text characters, so a 300 KB image becomes roughly 400 KB of text. That is why the technique belongs to small images, and why embedding a photograph usually makes a page slower rather than faster.

How do I use the output?

Open the downloaded .txt file and copy the line. With the CSS option, paste it into a rule in your stylesheet; with the HTML option, paste the tag into the page; with the data URI option, put it inside a src attribute or a url(). Nothing else has to be added around it.

Is my file uploaded anywhere?

No. The image is read and encoded by your own browser, and it is never sent to a server. That also means the tool keeps working with no connection, and that a confidential image can be encoded without leaving the device it is on.

Is there a size limit?

The tool imposes none, but your project does. Once an embedded image runs past roughly ten kilobytes, the request you saved is worth less than the weight you added to the file — at that point link to the image instead of embedding it.