Image to Base64

Sometimes you need an image in your code, not as a file on a server. Maybe it's a small icon you want baked into a CSS file, a logo in an HTML email template, or an image field in a JSON payload going to a vision API. Base64 encoding solves this by turning the image binary into a plain text string you can paste anywhere, no hosting required, no file paths to manage.

Upload your image, choose your output format, and copy the result directly into your code. Everything runs in the browser; the image never leaves your device.

Raw Base64 vs Data URL: Which One to Use

When you convert an image here, you get to choose between two output formats, and which one you need depends entirely on where the string is going.

A data URL bundles the MIME type right into the string: data:image/png;base64,iVBORw0KGgo.... Paste that directly into an HTML <img src=""> attribute or a CSS background-image: url(...) declaration and the browser renders it immediately, no extra work needed.

A raw base64 string is just the encoded payload without that prefix. This is what you need when an API, config file, or script expects the encoded data on its own. Sending a data URL to an API endpoint that expects raw base64 will usually cause an error, so it matters to pick the right one.

The tool gives you both options. Pick based on where the string is going.

Where Base64 Strings Actually Go in Code

Tiny icons and UI elements in CSS are a natural fit. A rule like background-image: url('data:image/svg+xml;base64,...') eliminates the extra HTTP request for an asset that loads on every page, useful for icons that appear site-wide.

HTML email templates are another common use case. Most email clients block external image requests by default, so a logo embedded as base64 in the HTML will render correctly regardless of what mail client the recipient is using. It's one less thing that can break in a campaign.

On the API side, vision APIs for OCR, image classification, and similar tasks often accept images as base64 strings in the JSON body rather than as multipart file uploads. Convert your image here and paste the string directly into the request payload.

For quick prototyping, embedding an image as base64 in a single HTML file means you can share a working demo without setting up asset hosting or worrying about broken image paths when files move around.

The 33% Size Penalty: When Base64 Is Worth It

Base64 encoding increases file size by roughly 33%. The encoding works by converting every 3 bytes of binary data into 4 ASCII characters, which is why the math works out that way. It's not a flaw, it's just how the encoding works.

In practice: a 10 KB icon becomes about 13 KB as a base64 string. That's a reasonable trade for eliminating an HTTP round trip on an asset that appears on every page load. A 500 KB photo becomes roughly 667 KB embedded directly in your HTML or CSS, which bloats the document size significantly and slows the initial page load.

The practical rule: base64 makes sense for images under roughly 10 KB where the saved HTTP request outweighs the larger string size. For anything bigger, a standard <img src=""> pointing to a hosted URL is almost always the better call.

SVG is worth mentioning separately. You can base64 an SVG and use it in CSS, but dropping an inline <svg> tag directly into the HTML is usually cleaner: it's still text, it's still cacheable, and it's easier to style with CSS.